web開發(fā)中微信網(wǎng)頁登錄邏輯的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)web開發(fā)中微信網(wǎng)頁登錄邏輯的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比商河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式商河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋商河地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

現(xiàn)在的網(wǎng)站開發(fā)，都繞不開微信登錄（畢竟微信已經(jīng)成為國民工具）。雖然文檔已經(jīng)寫得很詳細(xì)，但是對于沒有經(jīng)驗的開發(fā)者還是容易踩坑。

所以，專門記錄一下微信網(wǎng)頁認(rèn)證的交互邏輯，也方便自己日后回查：

加載微信網(wǎng)頁sdk
繪制登陸二維碼：新tab頁面繪制 / 本頁面iframe繪制
用戶掃碼登陸，前端跳入回調(diào)網(wǎng)址
回調(diào)網(wǎng)址進(jìn)一步做邏輯處理，如果是頁內(nèi)iframe繪制二維碼，需要通知頂級頁

微信網(wǎng)頁SDK加載

在多人團(tuán)隊協(xié)作中，加載資源的代碼需要格外小心。因為可能會有多個開發(fā)者在同一業(yè)務(wù)邏輯下調(diào)用，這會造成資源的重復(fù)加載。

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

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

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

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

繪制登陸二維碼

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

// 微信默認(rèn)配置
const baseOption = {
 self_redirect: true, // true: 頁內(nèi)iframe跳轉(zhuǎn); false: 新標(biāo)簽頁打開 
 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);
  }
 });
};

在需要使用的業(yè)務(wù)組件中，可以在周期函數(shù)componentDidMount調(diào)用，下面是demo代碼：

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

回調(diào)網(wǎng)址與iframe通信

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

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

為了方便說明，請先看模擬的數(shù)據(jù)配置：

// redirect 地址會被后端拿到, 后端重定向到此地址, 前端會訪問此頁面
// redirect 地址中的參數(shù), 是前端人員留給自己使用的; 后端會根據(jù)業(yè)務(wù)需要, 添加更多的字段, 然后一起返回前端
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}`) // 微信回調(diào)請求地址
};

前后端、微信服務(wù)器、用戶端交互邏輯

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

前端根據(jù)wxOption加載了二維碼，所有信息都放在了二維碼中。同時監(jiān)聽微信服務(wù)器的消息。
用戶手機(jī)掃碼，通知微信服務(wù)器確定登陸。
微信服務(wù)器接受到用戶的掃碼請求，轉(zhuǎn)發(fā)給前端。
前端收到微信服務(wù)器傳來消息，根據(jù)wxOption的redirect_uri參數(shù)，跳轉(zhuǎn)到此url地址。注意：

這個接口地址是后端的，請求方式是GET
前端通過拼接params攜帶參數(shù)
地址會被拼接微信服務(wù)器傳來的一個臨時token，用于交給后端換取用戶公眾密鑰

后端接收到/api/socials/weixin/authorizations${querystr}的請求，decode解碼querystr中的信息。然后向微信服務(wù)端請求用戶公眾密鑰。根絕前后端的約定（demo中用的是redirect字段），重定向到前端指定的redirect字段，并且拼接用戶公眾密鑰等更多信息。
前端知悉重定向，跳到重定向的路由（demo中用的是/account/redirect）
在對應(yīng)的路由處理后端傳來的用戶密鑰等數(shù)據(jù)即可
至此，微信認(rèn)證的四端交互邏輯完成

跨Iframe通信

前面流程走完了，現(xiàn)在的情況是頁面中iframe的二維碼區(qū)域，已經(jīng)被替換成了/account/redirect?...的內(nèi)容。

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

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

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

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

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

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

至此，微信網(wǎng)頁認(rèn)證的流程完成。

感謝各位的閱讀！關(guān)于“web開發(fā)中微信網(wǎng)頁登錄邏輯的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：web開發(fā)中微信網(wǎng)頁登錄邏輯的示例分析-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article8/coecip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、定制開發(fā)、網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容