坐峰怀雪灬

路漫漫其修远兮,吾将上下而求索。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

使用方法:

  1. 部署get_weixin_code.html(页面在附件里)至你的微信授权回调域名的目录下;

  2. 使用方式类似于直接通过微信回调的方式,只是将回调地址改成了get_weixin_code.html所在的地址,另外省去了response_type参数(因为它只能为code)以及#wechat_redirect(它是固定的),它们会在get_weixin_code.html里面自己加上;

  3. get_weixin_code.html页面从微信那里拿到code之后会重新跳转回redirect_uri里面填写的url,并且在url后面带上codestate。

详细示例:

  1. 前往微信公众平台->接口权限->网页授权获取用户基本信息->修改,填写授权回调页面域名,例如www.abc.com;

  2. www.abc.com域名下部署get_weixin_code.html,不一定是根目录,例如:http://www.abc.com/xxx/get_weixin_code.html;

  3. 假设你的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;

  4. 这样最终就会跳转到这样一个地址:http://www.xyz.com/pay.html?code=XXXXXXXXXXXXXXXXX&state=gwbnsh,从而你就拿到了授权code以及自定义的state参数了;

  5. 余下步骤和正常支付流程开发步骤一样。

源码:

 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>

 

附件下载:源码