【笔记】微信网页登录逻辑与实现

浅浅的花香味﹌ 2022-10-01 09:43 155阅读 0赞

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

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

1.  加载微信网页sdk
2.  绘制登陆二维码：新tab页面绘制 / 本页面iframe绘制
3.  用户扫码登陆，前端跳入回调网址
4.  回调网址进一步做逻辑处理，如果是页内iframe绘制二维码，需要通知顶级页

[?阅读更多系列文章][Link 1] / [阅读原文?][Link 2]

### 微信网页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);
      });
    })();
    复制代码

### 绘制登陆二维码 ###

根据[《微信登陆开发指南》][Link 3]，将参数传递给`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}`) // 微信回调请求地址
    };
    复制代码

### 前后端、微信服务器、用户端交互逻辑 ###

按照上面的配置，我描述一下前端、用户端、微信服务器和后端交互的逻辑：

1.  前端根据wxOption加载了二维码，所有信息都放在了二维码中。同时监听微信服务器的消息。
2.  用户手机扫码，通知微信服务器确定登陆。
3.  微信服务器接受到用户的扫码请求，转发给前端。
4.  前端收到微信服务器传来消息，根据wxOption的redirect\_uri参数，跳转到此url地址。注意：

*  这个接口地址是后端的，请求方式是GET
 *  前端通过拼接params携带参数
 *  地址会被拼接微信服务器传来的一个临时token，用于交给后端换取用户公众密钥

1.  后端接收到`/api/socials/weixin/authorizations${querystr}`的请求，decode解码querystr中的信息。然后向微信服务端请求用户公众密钥。根绝前后端的约定（demo中用的是redirect字段），重定向到前端指定的redirect字段，并且拼接用户公众密钥等更多信息。
2.  前端知悉重定向，跳到重定向的路由（demo中用的是/account/redirect）
3.  在对应的路由处理后端传来的用户密钥等数据即可
4.  至此，微信认证的四端交互逻辑完成

### 跨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的文档*

### 更多系列文章 ###

[⭐在GitHub上收藏/订阅⭐][Link 1]

《前端知识体系》

*  [JavaScript基础知识梳理(上)][JavaScript]
 *  [JavaScript基础知识梳理(下)][JavaScript 1]
 *  [ES6重难点整理][ES6]
 *  [谈谈promise/async/await的执行顺序与V8引擎的BUG][promise_async_await_V8_BUG]
 *  [前端面试中常考的源码实现][Link 4]
 *  [Flex上手与实战][Flex]
 *  ......

《设计模式手册》

*  [单例模式][Link 5]
 *  [策略模式][Link 6]
 *  [代理模式][Link 7]
 *  [迭代器模式][Link 8]
 *  [订阅-发布模式][-]
 *  [桥接模式][Link 9]
 *  [备忘录模式][Link 10]
 *  [模板模式][Link 11]
 *  [抽象工厂模式][Link 12]
 *  ......

《Webpack4渐进式教程》

*  [webpack4 系列教程(二): 编译 ES6][webpack4 _ _ ES6]
 *  [webpack4 系列教程(三): 多页面解决方案--提取公共代码][webpack4 _ _--]
 *  [webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载][webpack4 _ _-- 1]
 *  [webpack4 系列教程(五): 处理 CSS][webpack4 _ _ CSS]
 *  [webpack4 系列教程(八): JS Tree Shaking][webpack4 _ JS Tree Shaking]
 *  [webpack4 系列教程(十二)：处理第三方 JavaScript 库][webpack4 _ JavaScript]
 *  [webpack4 系列教程(十五)：开发模式与 webpack-dev-server][webpack4 _ webpack-dev-server]
 *  ......

[⭐在GitHub上收藏/订阅⭐][Link 1]

转载于:https://juejin.im/post/5cc6910d6fb9a03235586946

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fdongyuanxin%2Fblog
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-04-15-wechat-h5-login%2F
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fopen.weixin.qq.com%2Fcgi-bin%2Fshowdocument%3Faction%3Ddir_list%26amp%3Bt%3Dresource%2Fres_list%26amp%3Bverify%3D1%26amp%3Bid%3Dopen1419316505%26amp%3Btoken%3D%26amp%3Blang%3Dzh_CN
[JavaScript]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-03-26-javascript-first%2F
[JavaScript 1]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-03-27-javascript-second%2F
[ES6]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-04-09-es6%2F
[promise_async_await_V8_BUG]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-05-29-promise-async-await-order%2F
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-03-18-interview-js-code%2F
[Flex]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-03-20-css3-flex%2F
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-10-23-singleton-pattern%2F
[Link 6]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-10-25-stragegy-pattern%2F
[Link 7]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-11-01-proxy-pattern%2F
[Link 8]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-11-06-iter-pattern%2F
[-]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-11-18-publish-subscribe-pattern%2F
[Link 9]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-01-19-bridge-pattern%2F
[Link 10]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-01-26-memento-pattern%2F
[Link 11]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-01-31-template-pattern%2F
[Link 12]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2019-04-01-abstract-factory-pattern%2F
[webpack4 _ _ ES6]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-07-31-webpack-compile-es6%2F
[webpack4 _ _--]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-08-06-webpack-mutiple-pages%2F
[webpack4 _ _-- 1]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-08-08-webpack-spa-split-lazy%2F
[webpack4 _ _ CSS]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-08-17-webpack-css%2F
[webpack4 _ JS Tree Shaking]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-09-01-js-tree-shaking%2F
[webpack4 _ JavaScript]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-10-09-webpack-js-pacakge%2F
[webpack4 _ webpack-dev-server]: https://link.juejin.im?target=https%3A%2F%2Fgodbmw.com%2Fpassages%2F2018-10-19-webpack-dev-server%2F