轉載：解決微信OAuth2.0網頁受權回調域名只能設置一個的問題

時間 2019-12-06

標籤轉載解決微信 oauth2.0 oauth 網頁受權域名只能設置一個問題欄目 HTML 简体版

原文原文鏈接

項目地址：https://github.com/HADB/GetWeixinCode

說明：微信項目不少，可是回調域名有限，常常使用，作個筆記。html

解決微信OAuth2.0網頁受權只能設置一個回調域名的問題git

get-weixin-code.htmlgithub

 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.1.1',
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 device = GWC.urlParams['device'];
58                 
59                     var authUrl;
60                     
61                     var redirectUri;
62                     if (!code) {
63                         
64                         if (device == 'pc') {
65                             authUrl = 'https://open.weixin.qq.com/connect/qrconnect';//（電腦掃碼登陸）微信開放平臺申請https://open.weixin.qq.com/
66                         } else {
67                             authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect';//（手機微信瀏覽器登陸）微信公衆號https://mp.weixin.qq.com/
68                         }
69                         //第一步，沒有拿到code，跳轉至微信受權頁面獲取code
70                         redirectUri = GWC.appendParams(authUrl, {
71                             'appid': appId,
72                             'redirect_uri': encodeURIComponent(location.href),
73                             'response_type': 'code',
74                             'scope': scope,
75                             'state': state,
76                             
77                         });
78                     } else {
79                         //第二步，從微信受權頁面跳轉回來，已經獲取到了code，再次跳轉到實際所需頁面
80                         redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], {
81                             'code': code,
82                             'state': state
83                         });
84                     }
85                     location.href = redirectUri;
86                 }
87             };
88             GWC.getUrlParams();
89             GWC.doRedirect();
90         </script>
91     </body>
92 
93 </html>

使用方法

部署get-weixin-code.html至你的微信受權回調域名的目錄下api
使用方式相似於直接經過微信回調的方式，只是將回調地址改爲了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.comapp
在www.abc.com域名下部署get-weixin-code.html，不必定是根目錄，例如：http://www.abc.com/xxx/get-weixin-code.html微信公衆平臺
假設你的http://www.xyz.com/hello-world.html這個頁面須要獲取微信受權，那麼你應該使用如下地址來獲取受權：(device = pc 是電腦端掃碼登陸用到的，微信開放平臺接口)網站

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&device=pc

這樣最終就會跳轉到這樣一個地址：http://www.xyz.com/hello-world.html?code=XXXXXXXXXXXXXXXXX&state=hello-world，從而你就拿到了受權code以及自定義的state參數了url

其餘說明

經過多一次的跳轉，解決了微信限制回調域名只能設置一個的問題
犧牲了一點用戶體驗，換來了項目部署的美感，不須要將各類項目都部署到一個域名下
不少朋友問我怎麼支持第三方微信平臺，這個須要對不一樣的第三方平臺的受權方式有所瞭解，熟悉他們的受權方式，請求參數等。若是他們是經過在網站入口處的URL上進行受權的，那麼可使用本項目，將入口的URL改爲上述的方式，若是他們是在流程中的某些頁面去獲取受權，那麼是無法改變他們的獲取地址的，因此本項目就不適用了