网页微信登录(微信网页登录逻辑与实现方法)

business

// 微信默认配置
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}`) // 微信回捣
};
前孩微信服微用户端交互逻辑
按照上面的配置，我描事前端、用户端、微信服瓮夯互的逻辑：
   河收到/api/socials/weixin/authorizations${querystr}的请莈code解码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); // 籪rame中传来的数据, 进一步进行逻辑处理
}
而在/account/redirect?...路由对应的组件中，我们需要解紊中的params参数，按照业苇检查韩结果传递给前面的页面：

componentDidMount() {
  // step1: 籸l中params参数
  const querys = getQueryVariable(this.props.location.search);
  // step2: 检查querys中的数据是废要?
  // step3: 隙页面传递消息
  return window.parent && window.parent.postMessage('data', '*');
}
至此，微信网页认证的陵成。
更多：关于iframe通信的更多细节，请查看MDN的文档
以上就是本文的全部内容，希望对茨学习有所帮助，也希望脆多支持脚本之家。

以上内容就是网页微信登录(微信网页登录逻辑与实现方法)的相关内容介绍，喜欢侠外游戏论坛的朋友可以关注我们。

噜噜

☆：签到是人气、荣誉的比拼，让我们的签到见证一份坚持吧！！！