• 微信授权获取用户openid前端实现


    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活。
     
    首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url
     
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
    接下来如果参数没错可以直接回到你redirect设置的url并且在后面加上了code,把url参数切割出来 拿到code,请求获取openid,ajax请求:
     
     https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
     
     
    注:需要appid和秘钥 ,且密钥只能使用测试appsecret
     
    那么问题来了 这么请求会跨域,我试过了get、post都不行,都会说你跨域 那怎么办?我想用jsonp尝试下:
     
     
     
     但是出现了新的报错,返回的是json类型,不是jsonp类型,控制台报错,首先明确一个问题我们不可能去修改微信的官方代码,那么只好自己想办法了,后台还是不肯帮忙,只好去google看看怎么能解决,果然,功夫不负有心人,找到yahoo ypl的方式,尝试一下,成功。yahoo ypl如下:
     
     
     
    还和上面一样,只是改成了yahoo的代理yql,至此成功拿到微信openid,说下每一步的意义吧:首先我们不可改变的是,
     
    1:要在纯前端实现(后台不管只好自己想办法)
     
    2:直接请求微信会说跨域,
     
    3:jsonp会说返回值的问题
     
    一步步解决,怎么获取微信的code,这个毕竟不是教微信的文章,自行去公众平台看
     
    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
    之后我们拿到code,再去jsonp请求微信的获取access_token(openid就这样就可以拿到,专业点说是获取用户信息),却发现返回值是个json,只要请求到了那就是想办法解决这个问题,于是引入ypl进行中转,ypl是雅虎旗下一个用来转换数据的,还有其他不明白的朋友可以加我qq:15274527。
     
    附录:授权返回页面是这样:http://url.html?code=code&state=STATE
     
    附上我的裁切函数,直接就可以拿到返回值,在使用使用通过.then(data=>{console.log(data)})就可以看了
     
     
    export let splitQuery = () =>{
        // 获取href的query
        return new Promise((resolve,reject)=>{
     
            const url = window.location.search;
            var theRequest = new Object();  
             if (url.indexOf("?") != -1) {  
                 var str = url.substr(1); 
                 var strs = str.split("&"); 
                 for(var i = 0; i < strs.length; i ++) {  
                     theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
                 }  
             }
     
             resolve(theRequest);
     
     
        })
      
    }
  • 相关阅读:
    kafka.errors.UnsupportedCodecError: UnsupportedCodecError: Libraries for snappy compression codec not found 解决方案
    查看运行的容器完整命令
    python 生成requirements.txt文件
    解决matplotlib 中文乱码
    django 显示本地图片
    JniLibs和Jni的区别
    Error:No such property: GradleVersion for class: JetGradlePlugin
    Flutter 导包或者其他三方工程的时候出现Flutter 导包错误 Target of URI doesn't exist
    Flutter工程泡在真机上时,xocde提示 codesign 想要访问你的钥匙串中的秘钥
    Flutter 工程报错 Failed to create provisioning profile.
  • 原文地址:https://www.cnblogs.com/gopark/p/9394816.html
Copyright © 2020-2023  润新知