微信網頁登錄邏輯與實現方法

來源：懂視網責編：小采時間：2020-11-27 21:57:52

微信網頁登錄邏輯與實現方法

微信網頁登錄邏輯與實現方法:現在的網站開發，都繞不開微信登錄（畢竟微信已經成為國民工具）。雖然文檔已經寫得很詳細，但是對于沒有經驗的開發者還是容易踩坑。所以，專門記錄一下微信網頁認證的交互邏輯，也方便自己日后回查：加載微信網頁sdk 繪制登陸二維碼：新tab頁面繪制 /

推薦度：

點擊下載本文 文檔為doc格式

導讀微信網頁登錄邏輯與實現方法:現在的網站開發，都繞不開微信登錄（畢竟微信已經成為國民工具）。雖然文檔已經寫得很詳細，但是對于沒有經驗的開發者還是容易踩坑。所以，專門記錄一下微信網頁認證的交互邏輯，也方便自己日后回查：加載微信網頁sdk 繪制登陸二維碼：新tab頁面繪制 /

現在的網站開發，都繞不開微信登錄（畢竟微信已經成為國民工具）。雖然文檔已經寫得很詳細，但是對于沒有經驗的開發者還是容易踩坑。

所以，專門記錄一下微信網頁認證的交互邏輯，也方便自己日后回查：

加載微信網頁sdk
繪制登陸二維碼：新tab頁面繪制 / 本頁面iframe繪制
用戶掃碼登陸，前端跳入回調網址
回調網址進一步做邏輯處理，如果是頁內iframe繪制二維碼，需要通知頂級頁

微信網頁SDK加載

在多人團隊協作中，加載資源的代碼需要格外小心。因為可能會有多個開發者在同一業務邏輯下調用，這會造成資源的重復加載。

處理方法有兩種，第一種是對外暴露多余接口，專門check是否重復加載。但是考慮到調用者每次在加載前，都需要顯式調用check()方法進行檢查，難免會有遺漏。

所以采用第二種方法--設計模式中的緩存模式，代碼如下：

// 備忘錄模式: 防止重復加載
export const loadWeChatJs = (() => {
 let exists = false; // 打點
 const src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'; // 微信sdk網址

 return () => new Promise((resolve, reject) => {
 // 防止重復加載
 if(exists) return resolve(window.WxLogin);
 
 let script = document.createElement('script');
 script.src = src;
 script.type = 'text/javascript';
 script.onerror = reject; // TODO: 失敗時候, 可以移除script標簽
 script.onload = () => {
 exists = true;
 resolve(window.WxLogin);
 };
 document.body.appendChild(script);
 });
})();

繪制登陸二維碼

根據《微信登陸開發指南》，將參數傳遞給window.WxLogin()即可。

// 微信默認配置
const baseOption = {
 self_redirect: true, // true: 頁內iframe跳轉; false: 新標簽頁打開 
 id: 'wechat-container', 
 appid: 'wechat-appid',
 scope: 'snsapi_login',
 redirect_uri: encodeURIComponent('//1.1.1.1/'),
 state: '',
};

export const loadQRCode = (option, intl = false, width, height) => {
 const _option = {...baseOption, ...option};

 return new Promise((resolve, reject) => {
 try {
 window.WxLogin(_option);
 const ele = document.getElementById(_option['id']);
 const iframe = ele.querySelector('iframe');
 iframe.width = width? width : '300';
 iframe.height = height? height : '420'; 
 // 處理國際化
 intl && (iframe.src = iframe.src + '&lang=en');
 resolve(true);
 } catch(error) {
 reject(error);
 }
 });
};

在需要使用的業務組件中，可以在周期函數componentDidMount調用，下面是demo代碼：

componentDidMount() {
 const wxOption = {
 // ...
 };
 loadWeChatJs()
 .then(WxLogin => loadQRCode(wxOption))
 .catch(error => console.log(`Error: ${error.message}`)); 
}

回調網址與iframe通信

這一塊我覺得是微信登陸交互中最復雜和難以理解的一段邏輯。開頭有講過，微信二維碼渲染有2中方式，一種是打開新的標簽頁，另一種是在指定id的容器中插入iframe。

毫無疑問，第二種交互方式更友好，因為要涉及不同級層的頁面通信，代碼處理也更具挑戰。

為了方便說明，請先看模擬的數據配置：

// redirect 地址會被后端拿到, 后端重定向到此地址, 前端會訪問此頁面
// redirect 地址中的參數, 是前端人員留給自己使用的; 后端會根據業務需要, 添加更多的字段, 然后一起返回前端
const querystr = '?' + stringify({
 redirect: encodeURIComponent(`${window.location.origin}/account/redirect?` + stringify({
 to: encodeURIComponent(window.location.origin),
 origin: encodeURIComponent(window.location.origin),
 state: 'login'
 })),
 type: 'login'
});

const wxOption = {
 id: 'wechat-container',
 self_redirect: true,
 redirect_uri: encodeURIComponent(`//1.1.1.1/api/socials/weixin/authorizations${querystr}`) // 微信回調請求地址
};

前后端、微信服務器、用戶端交互邏輯

按照上面的配置，我描述一下前端、用戶端、微信服務器和后端交互的邏輯：

前端根據wxOption加載了二維碼，所有信息都放在了二維碼中。同時監聽微信服務器的消息。

用戶手機掃碼，通知微信服務器確定登陸。

微信服務器接受到用戶的掃碼請求，轉發給前端。

前端收到微信服務器傳來消息，根據wxOption的redirect_uri參數，跳轉到此url地址。注意：

這個接口地址是后端的，請求方式是GET

前端通過拼接params攜帶參數

地址會被拼接微信服務器傳來的一個臨時token，用于交給后端換取用戶公眾密鑰

后端接收到/api/socials/weixin/authorizations${querystr}的請求，decode解碼querystr中的信息。然后向微信服務端請求用戶公眾密鑰。根絕前后端的約定（demo中用的是redirect字段），重定向到前端指定的redirect字段，并且拼接用戶公眾密鑰等更多信息。

前端知悉重定向，跳到重定向的路由（demo中用的是/account/redirect）

在對應的路由處理后端傳來的用戶密鑰等數據即可

至此，微信認證的四端交互邏輯完成

跨Iframe通信

前面流程走完了，現在的情況是頁面中iframe的二維碼區域，已經被替換成了/account/redirect?...的內容。

為了實現通信，需要在頁面的周期中監聽message事件，并在組件卸載時，卸載此事件：

componentDidMount() {
 // ... ...
 
 window.addEventListener('message', this.msgReceive, false);
}

componentWillUnmount() {
 window.removeEventListener('message', this.msgReceive);
}

msgReceive(event) {
 // 監測是否是安全iframe
 if(!event.isTrusted) {
 return;
 }
 console.log(event.data); // 獲取iframe中傳來的數據, 進一步進行邏輯處理
}

而在/account/redirect?...路由對應的組件中，我們需要解析路由中的params參數，按照業務邏輯檢查后，將結果傳遞給前面的頁面：

componentDidMount() {
 // step1: 獲取url中params參數
 const querys = getQueryVariable(this.props.location.search);
 // step2: 檢查querys中的數據是否符合要求 ... 
 // step3: 向頂級頁面傳遞消息
 return window.parent && window.parent.postMessage('data', '*');
}

至此，微信網頁認證的流程完成。

更多：關于iframe通信的更多細節，請查看MDN的文檔

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com