使用方法:
-
部署
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/pay.html
这个页面需要获取微信授权,那么你应该使用以下地址来获取授权:http://www.abc.com/xxx/
get_weixin_code.html
?appid=XXXX&scope=snsapi_base&state=gwbnsh&redirect_uri=http://www.xyz.com/pay.html; -
这样最终就会跳转到这样一个地址:
http://www.xyz.com/pay.html?code=XXXXXXXXXXXXXXXXX&state=
,从而你就拿到了授权gwbnsh
code
以及自定义的state
参数了; - 余下步骤和正常支付流程开发步骤一样。
源码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>微信登录</title> 7 </head> 8 9 <body> 10 <script> 11 var GWC = { 12 version: '1.2.0', 13 urlParams: {}, 14 appendParams: function (url, params) { 15 if (params) { 16 var baseWithSearch = url.split('#')[0]; 17 var hash = url.split('#')[1]; 18 for (var key in params) { 19 var attrValue = params[key]; 20 if (attrValue !== undefined) { 21 var newParam = key + "=" + attrValue; 22 if (baseWithSearch.indexOf('?') > 0) { 23 var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', 'g'); 24 if (oldParamReg.test(baseWithSearch)) { 25 baseWithSearch = baseWithSearch.replace(oldParamReg, newParam); 26 } else { 27 baseWithSearch += "&" + newParam; 28 } 29 } else { 30 baseWithSearch += "?" + newParam; 31 } 32 } 33 } 34 if (hash) { 35 url = baseWithSearch + '#' + hash; 36 } else { 37 url = baseWithSearch; 38 } 39 } 40 return url; 41 }, 42 getUrlParams: function () { 43 var pairs = location.search.substring(1).split('&'); 44 for (var i = 0; i < pairs.length; i++) { 45 var pos = pairs[i].indexOf('='); 46 if (pos === -1) { 47 continue; 48 } 49 GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1)); 50 } 51 }, 52 doRedirect: function () { 53 var code = GWC.urlParams['code']; 54 var appId = GWC.urlParams['appid']; 55 var scope = GWC.urlParams['scope'] || 'snsapi_base'; 56 var state = GWC.urlParams['state']; 57 var isMp = GWC.urlParams['isMp']; //isMp为true时使用开放平台作授权登录,false为网页扫码登录 58 var baseUrl; 59 var redirectUri; 60 if (!code) { 61 baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect"; 62 if (scope == 'snsapi_login' && !isMp) { 63 baseUrl = "https://open.weixin.qq.com/connect/qrconnect"; 64 } 65 //第一步,没有拿到code,跳转至微信授权页面获取code 66 redirectUri = GWC.appendParams(baseUrl, { 67 'appid': appId, 68 'redirect_uri': encodeURIComponent(location.href), 69 'response_type': 'code', 70 'scope': scope, 71 'state': state, 72 }); 73 } else { 74 //第二步,从微信授权页面跳转回来,已经获取到了code,再次跳转到实际所需页面 75 redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], { 76 'code': code, 77 'state': state 78 }); 79 } 80 location.href = redirectUri; 81 } 82 }; 83 GWC.getUrlParams(); 84 GWC.doRedirect(); 85 </script> 86 </body> 87 88 </html>
附件下载:源码