欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信網(wǎng)頁登錄邏輯與實(shí)現(xiàn)方法

 更新時(shí)間：2019年04月29日 14:26:22   作者：yuanxin  
這篇文章主要介紹了微信網(wǎng)頁登錄邏輯與實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

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

在多人團(tuán)隊(duì)協(xié)作中，加載資源的代碼需要格外小心。因?yàn)榭赡軙卸鄠€(gè)開發(fā)者在同一業(yè)務(wù)邏輯下調(diào)用，這會造成資源的重復(fù)加載。

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

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

// 備忘錄模式: 防止重復(fù)加載
export const loadWeChatJs = (() => {
 let exists = false; // 打點(diǎn)
 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: 失敗時(shí)候, 可以移除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。

毫無疑問，第二種交互方式更友好，因?yàn)橐婕安煌墝拥捻撁嫱ㄐ?，代碼處理也更具挑戰(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加載了二維碼，所有信息都放在了二維碼中。同時(shí)監(jiān)聽微信服務(wù)器的消息。
  • 用戶手機(jī)掃碼，通知微信服務(wù)器確定登陸。
  • 微信服務(wù)器接受到用戶的掃碼請求，轉(zhuǎn)發(fā)給前端。
  • 前端收到微信服務(wù)器傳來消息，根據(jù)wxOption的redirect_uri參數(shù)，跳轉(zhuǎn)到此url地址。注意：
    • 這個(gè)接口地址是后端的，請求方式是GET
    • 前端通過拼接params攜帶參數(shù)
    • 地址會被拼接微信服務(wù)器傳來的一個(gè)臨時(shí)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)容。

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

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)于iframe通信的更多細(xì)節(jié)，請查看MDN的文檔

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論