解决微信OAuth2.0网页授权只能设置一个回调域名的问题
2017-06-22 21:58
543 查看
get-weixin-code.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信登录</title> </head> <body> <script> var GWC = { version: '1.1.1', urlParams: {}, appendParams: function(url, params) { if (params) { var baseWithSearch = url.split('#')[0]; var hash = url.split('#')[1]; for (var key in params) { var attrValue = params[key]; if (attrValue !== undefined) { var newParam = key + "=" + attrValue; if (baseWithSearch.indexOf('?') > 0) { var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', 'g'); if (oldParamReg.test(baseWithSearch)) { baseWithSearch = baseWithSearch.replace(oldParamReg, newParam); } else { baseWithSearch += "&" + newParam; } } else { baseWithSearch += "?" + newParam; } } } if (hash) { url = baseWithSearch + '#' + hash; } else { url = baseWithSearch; } } return url; }, getUrlParams: function() { var pairs = location.search.substring(1).split('&'); for (var i = 0; i < pairs.length; i++) { var pos = pairs[i].indexOf('='); if (pos === -1) { continue; } GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1)); } }, doRedirect: function() { var code = GWC.urlParams['code']; var appId = GWC.urlParams['appid']; var scope = GWC.urlParams['scope'] || 'snsapi_base'; var state = GWC.urlParams['state']; var redirectUri; if (!code) { //第一步,没有拿到code,跳转至微信授权页面获取code redirectUri = GWC.appendParams('https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect', { 'appid': appId, 'redirect_uri': encodeURIComponent(location.href), 'response_type': 'code', 'scope': scope, 'state': state, }); } else { //第二步,从微信授权页面跳转回来,已经获取到了code,再次跳转到实际所需页面 redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], { 'code': code, 'state': state }); } location.href = redirectUri; } }; GWC.getUrlParams(); GWC.doRedirect(); </script> </body> </html>
使用方法
部署get-weixin-code.html至你的微信授权回调域名的目录下
使用方式类似于直接通过微信回调的方式,只是将回调地址改成了
get-weixin-code.html所在的地址,另外省去了
response_type参数(因为它只能为
code)以及
#wechat_redirect(它是固定的),它们会在
get-weixin-code.html里面自己加上
get-weixin-code.html页面从微信那里拿到code之后会重新跳转回
redirect_uri里面填写的url,并且在url后面带上
code和
state
详细示例
前往微信公众平台->接口权限->网页授权获取用户基本信息->修改,填写授权回调页面域名,例如www.abc.com
在
www.abc.com域名下部署
get-weixin-code.html,不一定是根目录,例如:
http://www.abc.com/xxx/get-weixin-code.html
假设你的
http://www.xyz.com/hello-world.html这个页面需要获取微信授权,那么你应该使用以下地址来获取授权:
http://www.abc.com/xxx/get-weixin-code.html?appid=XXXX&scope=snsapi_base&state=hello-world&redirect_uri=http%3A%2F%2Fwww.xyz.com%2Fhello-world.html
这样最终就会跳转到这样一个地址:
http://www.xyz.com/hello-world.html?code=XXXXXXXXXXXXXXXXX&state=hello-world,从而你就拿到了授权
code以及自定义的
state参数了
其他说明
通过多一次的跳转,解决了微信限制回调域名只能设置一个的问题牺牲了一点用户体验,换来了项目部署的美感,不需要将各种项目都部署到一个域名下
建议先弄懂微信授权回调的流程再使用本项目
很多朋友问我怎么支持第三方微信平台,这个需要对不同的第三方平台的授权方式有所了解,熟悉他们的授权方式,请求参数等。如果他们是通过在网站入口处的URL上进行授权的,那么可以使用本项目,将入口的URL改成上述的方式,如果他们是在流程中的某些页面去获取授权,那么是没法改变他们的获取地址的,所以本项目就不适用了
相关文章推荐
- 解决微信OAuth2.0网页授权回调域名只能设置一个的问题
- 解决微信OAuth2.0网页授权回调域名只能设置一个的问题
- 解决微信OAuth2.0网页授权只能设置一个回调域名的问题
- 解决微信网页授权只能设置一个回调域名的问题
- 解决微信授权回调页面域名只能设置一个的问题
- 微信公众号平台网页授权接口中获取到的授权code传递给(即一个微信公众号网页授权给)任何其他多个回调域名下的url,解决了只能设置一个网页授权回调域名的问题,解决了redirect_uri参数错误的问
- 解决微信授权回调页面域名只能设置一个的问题 [php]
- 解决微信授权回调页面域名只能设置一个的问题
- 解决微信授权回调页面域名只能设置一个的问题 [php]
- 微信OAuth2.0网页授权设置一个域名需多个域名使用的问题
- PHP解决微信公众号网页授权域名只能填写一个的问题
- 微信公众号只能设置一个授权域名问题解决
- OAuth2.0网页授权回调页面域名(同一个)在多个公众号或测试号中设置后的影响
- 微信网页授权一个回调域名对应多个项目
- 微信第三方网页授权关于回调域名的问题
- 微信网页授权之回调域名
- [置顶] 微信网页授权获取code值回调两次的问题
- 微信网页授权登陆如何实现回调多个域名?
- 微信登录失败——授权回调域名校验出错,错误码:10003原因及解决办法