Vue中企业微信扫码登录

企业微信扫码登录有两种方式，一种是构建独立窗口的二维码，第二种是构建内嵌二维码。我的项目中选第二种
二维码构造流程请查阅官方文档

步骤一：引入JS文件

构建内嵌二维码第一步就是引入官方的js 文件，在需要展示企业微信网页登录二维码的网站引入如下JS文件，（支持https）：js地址，建议下载下来在本地使用，我自己的项目使用的是vue-cli 3.xx 的，下载下来的js 放到项目目录public下，然后在入口也引入

文件目录 。别忘了，还需要配置一下webpack，在vue.config.js做如下配置:

configureWebpack: {
    externals: {
      'wxLogin': 'WwLogin'
    },
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
 }

这样就可以全局访问WxLogin这个方法了。当然也可以直接在你需要的内嵌二维码的地方引入模块 import WwLogin from your_path。

步骤二：引入JS文件

在需要使用微信登录的地方实例JS对象：

WwLogin({
   "id" : "二维码容器的id",  
   "appid" : "",
   "agentid" : "",
   "redirect_uri" :"",
   "state" : "",
   "href" : "",
});

参数说明请请查阅官方文档。困惑我最多的是这个 redirect_uri，这个是授权回调地址，他的作用就是当你完成扫码之后，微信官方会将扫码结果返回的数据作为参数拼接到redirect_uri，并会自动跳转redirect_uri 所指向的路由。根据官网说明，redirect_uri 需要 使用 encodeURIComponent 编码一下。我的项目redirect_uri 指向当前页，因此这个参数 就应该是redirect_uri: encodeURIComponent(window.location.href)。在vue项目中，我们就可以通过 watch 去监听路由变化，然后获取路由中的 code参数（这个参数是后台用来获取企业微信用户信息的必要参数），

$route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
          if (this.otherQuery.code) {
            this.userWxLogin(this.otherQuery.code)
              .then(res => {
                this.loginSuccess();
                this.loginFailed = false;
              })
              .catch(err => {
                this.loginFailed = true;
              });
            //成功后删除不必要的参数（state,code,appid 在其他页面并不需要），保证路由是干净的
            delete this.otherQuery.code;
            delete this.otherQuery.state;
            delete this.otherQuery.appid;
          }
        }
      },
      immediate: true
    }

整个登录流程就结束了。
当然了还有一个参数是href，是用来定义 二维码样式的.

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none  !important}
.impowerBox .status {text-align: center;}

你可以专门做一个这个样式文件，然后放到支持https协议的资源地址的服务器上。或者转成 base64 在线base64编码，之后将编码后的字符串传递给href 参数href:data:text/css;base64,编码后的字符串

例子 。

我们并不需要自己去判断二维码是否过期，微信自动会给你做判断，如果过期二维码区域会自动增加刷新按钮，点击就刷新二维码了。要注意的是，先要在企业微信开通授权回调域名，这个域名应该跟 redirect_uri 参数所在的域名一直，否则二维码会获取失败。

失败例子

加入 WwLogin 这个函数的参数不对，也会在插入二维码的区域中做提示。如果参数全对，就会生成如下二维码：

image.png

实际上，不管是构造独立二维码 还是 构造内嵌二维码 原理是一样的，内嵌二维码 实际上就是在指定容器中加载了一个 iframe。另外，一直好奇的是，为什么扫码成功之后，在手机上点击确认登录页面就会自动跳转到 redirect_uri 指定的路由呢，当我打开控制台就发现，其实 引入的js文件中，会有一个 jsonp的轮询，以此来判断二维码的各个阶段的状态。然后再成功的状态下给你跳转到指定路由。

由于配置回调域名不能是本地域名，所以在本地开发的时候做一个内网穿透，可以使用natapp这个软件，免费的就行，传送门

结束

整个过程就是这样，没有什么坑。