使用場景
- 微信公眾號內嵌H5網頁調用微信登錄
- 在微信瀏覽器中的網頁喚起微信登錄界面
詳情可以查閱微信登錄官方文檔 鏈接地址
功能思路
- 后臺先在微信給開發者提供的測試賬號平臺上創建應用，并把前臺開發同學的微信添加到這個平臺中，用于提供測試公眾號，平臺地址
- 前臺拼裝各種微信登錄必須的參數，并將頁面跳轉到微信指定的連接獲取微信登錄
code參數 - 前臺解析返回的鏈接，獲取鏈接中的參數，并將
code參數傳給后臺 - 由于后續獲取的參數安全等級較高，所以后續的操作均由后臺完成，并將數據存儲在服務端
- 后臺通過
code參數換取access_token參數和openid參數并存儲在服務端 - 后臺再通過
access_token參數和openid參數換取用戶詳細信息，并將這兩步包裝成接口，讓前臺調用，返回前端登錄狀態完成微信登錄操作
- 后臺通過
- 如果
access_token參數失效，使用refresh_token刷新即可，詳細操作查閱文檔，一般用不到這步
前端代碼
1. 獲取code
function getWXcode() {
// 公眾號的唯一標識，找公眾號管理員提供
var APPID = '公眾號的appid';
// 授權后重定向的回調鏈接地址，要使用encodeURIComponent()對其進行編碼處理
// !!!注意回調的域名必須先讓公眾號管理員添加到安全域名中，否則無法完成跳轉
var REDIRECT_URI = encodeURIComponent('授權后跳轉回的頁面');
// 常量，返回類型，填寫code即可
var RESPONSE_TYPE = 'code';
// 常量，應用授權作用域
// snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
// snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid）
var SCOPE = 'snsapi_userinfo' || 'snsapi_base';
// 重定向后會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節
// 除了此項是非必須參數，其他都是必須要帶的參數
// 注意！！！該參數通常用于判斷跳轉回來之前的接口是什么作用，比如用于判斷是第一次微信登錄還是授權過的快速微信登錄
var STATE = '可以自定義的返回參數';
// 無論直接打開還是做頁面302重定向時候，必須帶'#wechat_redirect'參數
// 由于授權操作安全等級較高，所以在發起授權請求時，微信會對授權鏈接做正則強匹配校驗，如果鏈接的參數順序不對，授權頁面將無法正常訪問
location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}&scope=${SCOPE}&state=STATE#wechat_redirect `;
}
2. 解析參數
function parseData() {
// 截取地址欄?后面的內容
var search = location.search.slice(1);
// 用&標識分割成數組
var arr = search.split('&');
// 處理數組轉換成對象，并返回
var result = {};
arr.forEach(function(item) {
var itemArr = item.split('=');
result[itemArr[0]] = itemArr[1];
});
}
3. code傳給后臺，后臺完成微信登錄后續操作后，返回登錄狀態提示前端登錄成功還是失敗，然后前臺繼續后續業務邏輯代碼編寫
我是 fx67ll.com，如果您發現本文有什么錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ :)
轉發請注明參考文章地址，非常感謝！！！
