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

// 備忘錄模式: 防止重復(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標簽
 script.onload = () => {
 exists = true;
 resolve(window.WxLogin);
 };
 document.body.appendChild(script);
 });
})();

// 微信默認配置
const baseOption = {
 self_redirect: true, // true: 頁內(nèi)iframe跳轉(zhuǎn); 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() {
 const wxOption = {
 // ...
 };
 loadWeChatJs()
 .then(WxLogin => loadQRCode(wxOption))
 .catch(error => console.log(`Error: ${error.message}`)); 
}

// 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)請求地址
};

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ù), 進一步進行邏輯處理
}

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', '*');
}