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


Posted in Javascript onApril 29, 2019

现在的网站开发,都绕不开微信登录(毕竟微信已经成为国民工具)。虽然文档已经写得很详细,但是对于没有经验的开发者还是容易踩坑。

所以,专门记录一下微信网页认证的交互逻辑,也方便自己日后回查:

  1. 加载微信网页sdk
  2. 绘制登陆二维码:新tab页面绘制 / 本页面iframe绘制
  3. 用户扫码登陆,前端跳入回调网址
  4. 回调网址进一步做逻辑处理,如果是页内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的文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 #Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 #Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 #Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
You might like
Views rows style模板重写代码
2011/05/16 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
家长评语大全
2014/01/22 职场文书
交通安全寄语大全
2014/04/08 职场文书
代理协议书范本
2014/04/22 职场文书
园林技术专业求职信
2014/07/28 职场文书
计算机教师工作总结
2015/08/13 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python