TL;DR;
Show you the code: WeComScanToLoginDemo
最近遇到需要集成企业微信扫码登录的需求,看了企业微信提供的说明文档 ,看了很多博客感觉讲得都不够详细,所以打算结合代码和自己的配置经历提供一篇保姆级的企业微信扫码登录教程。
交互时序图
结合企业微信官方说明文档给出的交互逻辑可以总结出如下的交互逻辑图:
其中需要注意的是扫码之后用户网站实际上是和微信后台维持了一个长链接,微信后台回调我们自己的网站业务服务之后,我们返回给微信后台的最终结果将会被反馈到扫码登录的网站。
配置方式
创建企业(已有企业可以忽略)
首先拿出你的手机,登录企业微信,创建新的企业或者登录已有企业
登录企业微信管理后台(需要管理员权限)
然后电脑扫码登录企业微信后台管理系统:扫码登录
创建企业微信扫码授权登录应用
找到应用管理下的创建应用,创建用于扫码登录的企业微信应用(PS:同时为了防止其他人能够通过企业微信手机版进入该应用,可以设置成隐藏该应用在工作台不显示)
应用配置
首先点击进入该自建应用,我们可以看到该应用的AgentId和Secret,这两个很重要,是使用该应用的凭证。
接下来需要配置接收消息API和企业微信授权登陆
但是在此之前,请慢一慢,我们需要将本地的服务部署到一个公网环境下,如果你没有公网环境的机器,这里推荐你用ngrok 直接将本地服务反向代理到公网,按照官网教程一步一步操作很简单,启动服务只需要一句命令:./ngrok http 8081
这里我将本地8081端口的服务反向代理到公网环境下,可以看到启动之后的效果:
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account zclhit (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://555099f27b19.ngrok.io -> http://localhost:8081
Forwarding https://555099f27b19.ngrok.io -> http://localhost:8081
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
这里我们得到了一个反向代理的公网域名:555099f27b19.ngrok.io ,它支持http和https两种访问协议,
同时,在本地配置好服务的API key之后启动服务。(注意,这里需要先启动服务)
什么?你不知道如何配置?
配置本地服务
本地服务配置文件代码片段如下:
wechat:
cp:
corpId: wwfdef*****
appConfigs:
- agentId: 1000001
secret: Um-UzW****
token: 111
aesKey: 111
- agentId: 1000002
secret: r6CzFefNoO****
token: dGlN4****
aesKey: TrYeRp******
server:
port: 8081
这里的corpId就是你的企业微信企业Id,可以在 我的企业 - 企业信息 中查看得到。
然后就是appConfigs,这里为了实现企业用户扫码登录知道登录的人是谁,需要用到两个服务:1,企业微信官方提供的通讯录同步工具;2,我们刚刚创建的企业微信登录自建应用
对于官方通讯录同步工具的使用,可以在 管理工具 - 通讯录同步 的方式找到,需要我们开启API接口,同时记住这个的secret:
然后自建企业微信应用的设置,需要我们进入刚才创建好的应用,找到接收消息的配置。
注意注意注意!!!!
在这里先生成Token和加密key,配置到我们本地服务中,然后启动本地服务,再去配置消息接收URL,点击保存的时候,微信会主动发请求去校验URL是否可用,所以请务必保证本地服务已经启动并且反向代理正常工作,校验的URL就是按照微信API的要求提供的字符串加密URL,这里已经在我的代码中给出了。
需要在页面上看到保存成功的提示才可以:
这时候在我们ngrok的控制台也可以看到微信服务端的验证的调用记录:
到这里才算是该应用消息接收器配置成功。
开通授权登录
完成上一步之后,可以开通授权登录页面:
这里只需要开通Web网页扫一扫登录,配置我们刚才的反向代理域名即可。
配置html页面的跳转地址:
在示例代码中,需要将重定向url设置成你本地的反响代理地址,具体文件路径:/src/main/resources/templates/index.html
这里需要按照你本地和企业的实际情况进行配置