首先在微信开发文档中有提到微信网页授权的操作步骤:
第一步: 用户同意授权, 获取 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 方法都试过了, 都不行, 那么怎么解决这个跨域问题呢?
首先我们知道我们是不可能改变微信的代码, 那么我们就只能想到的解决方法是利用别人的代理来进行中转, 那么从网上找到了如下方法:
- var target = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=AECRET&code="+value+"&grant_type=authorization_code";
- $.Ajax({//2. 通过 code 换取网页授权 access_token
- url: 'http://query.yahooapis.com/v1/public/yql',// 雅虎代理 url
- dataType: "jsonp",// 雅虎代理数据格式
- data:{
- q:"select * from json where url=\'"+target+"'",
- // 代理返回格式
- format:"json"
- },
- success: function (data) {
- alert("请求成功");
- alert("openid:"+data.query.results.JSON.openid);
- console.log("openid:"+data.query.results.JSON.openid);
- }
- });
以上的用的就是 yahoo 的代理 ypl 进行一个中转, ypl 是雅虎旗下一个用来转换数据的, 从而获取到了 access_token 和 openid.
来源: https://www.cnblogs.com/hou-zheng-qing/p/10909256.html