最近公司給我安排一個微信登錄的功能，需求是這樣的：
1.登錄授權
點擊二維碼圖標后，登錄界面切換為如下樣式（二維碼），微信掃描二維碼並授權，即可成功登錄；
若當前賬號未綁定微信賬號，掃描后提示“您的賬號未綁定微信號，請先登錄綁定”；
點擊“返回”按鈕，界面切換為賬號密碼登錄；
若微信號綁定多個賬號在，則展示所綁定全部賬號的用戶名和企業名，選擇賬號后點擊登錄按鈕成功登錄；
2.掃描綁定
賬號登錄后檢測當前賬號open_id為空，則展示當前彈窗（001管理員賬號除外）；
用戶微信掃描二維碼后，將當前微信號綁定至對應賬號；
若微信號之前綁定其他賬號，則對應open_id下增加一個賬號；
3.個人資料
新增一個'微信號'字段：顯示賬號是否綁定
好，現在整理邏輯，理清思路，畫圖：
聲明一下，PC端的微信掃碼登錄是微信開放平台，移動端關注是跳轉第三方應用的，用的是公眾平台，兩個的接口地址拿的openId不一樣，開放平台下面如果創建多個應用或者綁定多個公眾號，各公眾號之間用unionId打通。
openId和unionId區別：http://www.25xt.com/html5css3/11968.html
公司或者企業在開發前 登錄微信開放平台，注冊認證，創建一個應用（應用就是你的項目，產品，不知道就直接讓產品幫你注冊認證，一般需要一個禮拜時間審批+300人民幣，完了拿到AppId和AppSecret）
自己的本地環境要映射到外網，那樣微信才能訪問到自己接口來。推薦使用ngrok，不會的網上有教程，我的是直接讓人幫我配的。
准備工作做好，開始開發：
第一步：根據文檔生成二維碼（開放平台 --> 資源中心 --> 網站應用 --> 微信登錄功能 --> 網站應用微信登錄開發指南）
我這里不需要生成整個頁面，而是在一個div里生成，所以用js生成：
1.在頁面中先引入如下JS文件（支持https）：
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
2.在需要使用微信登錄的地方實例以下JS對象：
var obj = new WxLogin({
id:"login_container", //div的id
appid: "",
scope: "",
redirect_uri: "", //回調地址
state: "", //參數，可帶可不帶
style: "", //樣式 提供"black"、"white"可選，默認為黑色文字描述
href: "" //自定義樣式鏈接，第三方可根據實際需求覆蓋默認樣式。
});
這里生成的二維碼供用戶掃描，掃描成功，移動端出現授權頁面，需用戶確認。
回調地址里面的域名要在開放平台去配：
二維碼就生成好了，可以看看效果，還沒調樣式：
再來看授權步驟：
第一步，獲取code。
調用接口：https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect;
接口中參數如下：
自己代碼：
1 @Override 2 public Map<String, String> weixinLoginUrl() { 3 String url = "https://open.weixin.qq.com/connect/qrconnect?appid=" + openPlatformAppId + "&redirect_uri=" 4 + URL.encode("'"+ openPlatformRedirect_uri +"'/getWxLoginCode") + "&response_type=code" + "&scope=snsapi_login" 5 + "&state=STATE#wechat_redirect"; 6 Map<String, String> map = new HashMap<String, String>(); 7 map.put("url", url); 8 map.put("getRedirect_uri", openPlatformRedirect_uri); //openPlatformRedirect_uri為配置文件里的域名(開放平台配好的)
9 return map;
10 }
解釋代碼：
openPlatformAppId為自己的AppId，
openPlatformRedirect_uri為自己配的域名，(請忽略我的方法命名和參數命名...別學我!)
這里提一下，登錄的scope=snsapi_login，公眾平台里scope有userInfo(用戶有感知)和baseInfo(用戶無感知，靜默授權)
返回給controller，controller重新請求一遍地址，這時候進入的是微信回調地址了，里面就會有code參數，根據code參數就可以拿access_token了，controller代碼：
1 @RequestMapping(value = "/wxLoginCheck", method = RequestMethod.GET) 2 @ResponseBody 3 public String wxLoginCheck() { 4 Map<String, String> weixinLoginUrl = alarmWxMessageService.weixinLoginUrl(); 5 String url = weixinLoginUrl.get("url"); 6 return "<script>location.href='" + url + "'</script>"; 7 }
這時候return的回調地址變成了第一步回調地址參數的那個地址("/getWxLoginCode")，域名沒寫了
第二步，通過code獲取access_token
調用接口：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code;
接口中參數如下：
自己代碼：
controller：
1 @RequestMapping(value = "/getWxLoginCode", method = RequestMethod.GET) 2 public String getWxLoginCode(String code) { 3 WeixinOauth2Token wxot=alarmWxMessageService.wxLogingetCode(code); 4 String openId = wxot.getOpenId(); 5 String accessToken = wxot.getAccessToken(); 6 }
解釋代碼：
code直接能拿到了，WeixinOauth2Token 為實體類，封裝openId和access_token之類字段
serviceImpl：
1 @Override 2 public WeixinOauth2Token wxLogingetCode(String code) { 3 WeixinOauth2Token wat = null; 4 String getTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + openPlatformAppId 5 + "&secret=" + openPlatformAppSecret 6 + "&code=" + code 7 + "&grant_type=authorization_code"; 8 // 獲取網頁授權憑證 9 JSONObject jsonObject = JSONObject.fromObject(HttpUtil.Get(getTokenUrl)); 10 if (jsonObject != null) { 11 try { 12 wat = new WeixinOauth2Token(); 13 wat.setAccessToken(jsonObject.getString("access_token")); 14 wat.setOpenId(jsonObject.getString("openid"));15 } catch (Exception e) { 16 wat = null; 17 int errorCode = jsonObject.getInt("errorCode"); 18 String errorMsg = jsonObject.getString("errorMsg"); 19 log.error("獲取網頁授權失敗errorCode=" + errorCode + ",errorMsg=" + errorMsg); 20 } 21 } 22 return wat; 23 }
解釋代碼：
openPlatformAppId為自己的AppId，
openPlatformAppSecret為自己的密碼，
code為之前獲取到的code，
json那一段是重新發送一個get請求，方法在HttpUtil里封裝的，下面貼出。
1 /** 2 * 向指定URL發送GET方法的請求 3 * 4 * @param url 發送請求的URL 5 * @param param 請求參數，請求參數應該是 name1=value1&name2=value2 的形式。 6 * @return URL 所代表遠程資源的響應結果 7 */ 8 public static String Get(String url) { 9 int connectionTimeOut=HTTP_CONNECTION_TIMEOUT, readTimeOut =HTTP_READ_TIMEOUT; 10 String result = ""; 11 BufferedReader in = null; 12 String urlNameString = url; 13 try { 14 logger.info("請求url+參數：" + urlNameString); 15 URL realUrl = new URL(urlNameString); 16 // 打開和URL之間的連接 17 URLConnection connection = realUrl.openConnection(); 18 // 設置通用的請求屬性 19 connection.setRequestProperty("accept", "*/*"); 20 connection.setRequestProperty("connection", "Keep-Alive"); 21 connection.setConnectTimeout(connectionTimeOut); 22 connection.setReadTimeout(readTimeOut); 23 // 建立實際的連接 24 connection.connect(); 25 // 獲取所有響應頭字段 26 // 定義 BufferedReader輸入流來讀取URL的響應 27 in = new BufferedReader(new InputStreamReader(connection.getInputStream())); 28 String line; 29 while ((line = in.readLine()) != null) { 30 result += line; 31 } 32 } catch (Exception e) { 33 logger.error("發送GET請求出現異常！url: " + urlNameString + ", " + e); 34 } 35 // 使用finally塊來關閉輸入流 36 finally { 37 try { 38 if (in != null) { 39 in.close(); 40 } 41 } catch (Exception e2) { 42 logger.error("close exception", e2); 43 } 44 } 45 return result; 46 }
到這里，已經授權完了，能拿到用戶的openId，用這個去完成公司相關業務。文檔上面的刷新access_token沒有做，自己可以去了解下
后來做完了，推送消息那邊要拿我這個openId，才發現，登錄是開放平台的，推送消息是公眾平台的，平台都不一樣，openId肯定不一樣，所以又重新開發一遍登錄，什么東西都是自己實現。。。。。。
注意：unionId，統一管理多個公眾號或者多個應用而產生的一個機制，像這次開發的，開放平台和公眾平台不能用這個
個人總結一下，開發一個東西之前，思路一定要理清，不然會繞來繞去把自己繞暈，技術都不是問題，重要的是思路；
代碼部分，命名符合規范，讓人看的懂是什么意思，注釋也要全，讓人明白寫的什么；
登錄模塊要好好研究一下，調用登錄方法去登錄，實現的原理和登錄時安全問題要考慮到；
技術上新用ModelMap這個對象，后台存儲：map.put("名字","值")，前台直接拿：var corpUsers = '${requestScope.名字}'；
List Map json 互相轉換、傳值、接收值；
重發請求的GET、POST方法；
spring重定向、jsp重定向等。
微信ui地址：https://weui.io/
開發小白，如果有錯誤的地方盡請大佬們指出，謝謝