使用場景：
一個公眾號（服務號），下面部署了多個項目，每個項目都部署在不一樣的服務器上面，多個域名。
需求：
XX工作室公眾號： 電商首頁、微信訂購兩個項目部署
頁面代碼：get-weixin-code.html
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 35 if (hash) { 36 url = baseWithSearch + '#' + hash; 37 } else { 38 url = baseWithSearch; 39 } 40 } 41 return url; 42 }, 43 getUrlParams: function() { 44 var pairs = location.search.substring(1).split('&'); 45 for (var i = 0; i < pairs.length; i++) { 46 var pos = pairs[i].indexOf('='); 47 if (pos === -1) { 48 continue; 49 } 50 GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1)); 51 } 52 }, 53 doRedirect: function() { 54 var code = GWC.urlParams['code']; 55 var appId = GWC.urlParams['appid']; 56 var scope = GWC.urlParams['scope'] || 'snsapi_base'; 57 var state = GWC.urlParams['state']; 58 var redirectUri; 59 60 if (!code) { 61 //第一步，沒有拿到code，跳轉至微信授權頁面獲取code 62 redirectUri = GWC.appendParams('https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect', { 63 'appid': appId, 64 'redirect_uri': encodeURIComponent(location.href), 65 'response_type': 'code', 66 'scope': scope, 67 'state': state, 68 }); 69 } else { 70 //第二步，從微信授權頁面跳轉回來，已經獲取到了code，再次跳轉到實際所需頁面 71 redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], { 72 'code': code, 73 'state': state 74 }); 75 } 76 77 location.href = redirectUri; 78 } 79 }; 80 81 GWC.getUrlParams(); 82 GWC.doRedirect(); 83 </script> 84 </body> 85 86 </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參數了
eg：
公眾號回調地址：wxcsh.edsl.com.cn
項目地址：wxcs78.edsl.com.cn
通過loginByWeixin.do接口可以取到對應公眾號的code，從而獲取openId
http://wxcsh.edsl.com.cn/get-weixin-code.html?appid=wxa63f33a8579fdf36&scope=snsapi_base&state=hello-world&redirect_uri=http://wxcs78.edsl.com.cn/user/loginByWeixin.do