vue实现网页端企业微信扫码登录功能（前端部分）

 时至今日，企业微信在企业日常工作中的使用越来越频繁也越来越重要，不少企业已使用企业微信进行着日常的工作安排管理。在这种背景下，各类系统和企业微信对接的需求也不断增加，今天要说的就是一个比较常见的需求：在网页前端实现扫描企业微信二维码进行系统登录。以下是vue框架下实现的方式，主要是前端部分。
 要完成这个需求主要有两点关键技术问题需要解决：一是如何在网页端产生企业微信的二维码。二是用户扫码完成后，如何知道是哪个用户扫的二维码，或者如何告诉后端哪个用户扫的二维码呢。我们一步步来说。

一.如何生成二维码

 详细介绍前先放一下官方文档的链接，毕竟无论怎么介绍还得是以官方为准。构造扫码登录链接。接下来是具体实现的步骤：

1. 引入JS文件
 在你的项目中找到public文件夹中的index.html文件，在代码中引入企业微信的js文件，加入以下代码即可：

<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

 注意下，引入的js文件其实是有不同版本的，截止2023年1月11日，官方给出的包的版本是1.2.7，但是在未来可能会有更新，引入前最好在官网中看一眼是不是最新版本。

2. 展示二维码
 在需要展示企业微信二维码的地方（一般是登录页），创建一块区域用来展示二维码，注意要给id值

<div id="login_container" style="height: 400px; width: 400px">div>

 然后实例企业微信的JS对象，这里为方面展示，直接写在created()里面了，最好封装成一个方法。

created() {
    this.wwLogin = new WwLogin({
      id: 'login_container',
      appid: '', // 填你的企业微信企业id
      agentid: '', // 填你的自建应用id
      redirect_uri: '', // 填你的可信域名里的跳转链接，一定要有http或者https
      state: '',
      href: '',
      lang: 'zh'
    })
  }

 然后来讲一下参数，其中id，appid，agentid，redirect_uri，这四个必填，后面三个不填也能出二维码，如果有其他需要的话可以再详细了解。其中第一个id和我们创建出来展示的区域的id是要对应上的，不然二维码不知道展示到哪里。剩下三个参数就要在企业微信的管理后台里面拿了，如果这个时候有其他人能告诉你这三个值，那你直接运行就能看到二维码了。效果如下图：

 但如果开发者目前没有办法拿到这些值，或者是要创建一个新的企业的话，博主将在第三步展示如何配置并拿到这些参数。
 步骤二这里还有个小优化在这里分享下，在一些有一定代码规范要求的公司里，JS对象实例化完成后，代码会提示’WwLogin’ is not defined，虽然也能跑起来，但是看着还是会烦。这种情况下可以在.eslintrc.js文件中加入下面代码，再次运行即可：

globals: {
    'WwLogin': true
  }

3. 企业微信后台管理平台配置
 这一步里讲解下如何进行企业微信的后台管理设置，然后说一下哪里能够拿到第二步里缺失的三个必填值。首先需要登录企业微信后台管理平台，官方地址：企业微信。点击右上角的企业登录后，用企业微信扫码即可进入管理平台。这里要注意下，只有企业的管理员角色才能登录进入管理平台，如果一个开发人员没有权限的话，需要找人扫码或者让管理员帮忙赋予权限。如果没有企业或者想先弄一个测试组织自己先测试一下的话，可以在企业微信的app端上以个人为主体创建一个企业组织。

 登录上的管理平台如下图：

 然后在“我的企业”下方找到企业id，这个就是第二步中的appid参数。

 在应用管理里面创建一个自建应用，然后点进去，里面有个AgentId，这个就是第二步中的agentid参数。

 然后在这个页面中，滚动条滚到最下方，找到“企业微信授权登录”，点击“设置”，点击“设置授权回调域”，填入回调的地址，这个就是第二步中的redirect_uri参数，当然回调地址后面还能拼接其他路由地址，但是域名和端口号必须和配置中一致。


 以上就是企业微信管理平台的主要配置，将这些配置加上后，就能在前端看到二维码了。

二.如何知道是哪个用户登录

 前面讲解了如何生成二维码后，这里讲一下如何知道是哪个用户扫码登录的。在用户扫码完成，并点击确认登录后，企业微信会带着参数返回redirect_uri配置的地址，下面是一段我用来测试返回的路径：

http://test.com/wechatAuth?code=x4Wie3KgsS3_311mrsiB_WdC1MzsJ&appid=wwcffb38

 其中http://test.com/wechatAuth这一段是我配置的redirect_uri，而后面code中的值就是相当于我这个登录人的身份标识，我们需要这样this.$route.query.code截取下来，获取到code的值并将其传给后端，后端根据企业微信的相关接口：https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=ACCESS_TOKEN&code=CODE最终拿到用户的userid，知道userid后就能确定登录用户的身份，从而给前端返回登录用户的身份信息，前端就可以完成登录了。

 总结：本篇文章主要是介绍前端通过vue实现网页端企业微信扫码登录的功能，确实有一点的局限性，没有将后端部分的内容介绍出来。但通过文章前面介绍的内容，前端开发人员能很轻易实现企业微信扫码登录的功能，后续如果有时间看能不能介绍一下后端方面在登录时做的操作，希望这篇文章能够帮到大家，谢谢！