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


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的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
node 版本切换的实现
Feb 02 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
React配置子路由的实现
Jun 03 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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python中字符串前面加r的作用
2015/06/04 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python交互界面的退出方法
2019/02/16 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python实现图片上添加图片
2019/11/26 Python
python cookie反爬处理的实现
2020/11/01 Python
Python与C/C++的相互调用案例
2021/03/04 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
美食节策划方案
2014/05/26 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书