微信网页授权——获取code、access_token、openid,及跨域问题解决

首先在微信开发文档中有提到微信网页授权的操作步骤:

第一步:用户同意授权,获取code

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri = REDIRECT_URL&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中scope有静默授权和非静默授权两种,在这里我们使用非静默授权:scope等于snsapi_userinfo,为后面获取用户信息做准备。

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

第二步:通过code换取网页授权access_token

获取code后,请求以下链接获取access_token:  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

但是在获取access_token的过程中,我们会遇到一个跨域问题,什么post、get和jsonp方法都试过了,都不行,那么怎么解决这个跨域问题呢?

首先我们知道我们是不可能改变微信的代码,那么我们就只能想到的解决方法是利用别人的代理来进行中转,那么从网上找到了如下方法:

qu(){
  console.log("aaa")
  let _this = this
  let URL = _this.url + "?appid=" + api.appId + "&secret=" + api.appSecret + "&code=" + _this.code + "&grant_type=" + _this.authorization_code
  $.ajax({
     url:'http://query.yahooapis.com/v1/public/yql',
     dataType:'jsonp',
     data:{
         q:"select*from json where url=\'" + URL + "'",
         format:'json'
     },
     success:function(data){
        console.log(data)
        _this.access_token = data.query.results.json.access_token
        _this.openid = data.query.results.json.openid
     }
  })
}

以上的用的就是yahoo的代理ypl进行一个中转,ypl是雅虎旗下一个用来转换数据的,从而获取到了access_token和openid。

猜你喜欢

转载自blog.csdn.net/weixin_42684309/article/details/83141612