企微扫码登录

企微扫码登录

企微的扫码登录官网有较为详细的文档扫码授权登录 - 文档 - 企业微信开发者中心 (qq.com)，对主要流程有详细说明且对部分代码有示例。

扫码登录有两种方式，一种是跳转到扫码页面，一种是内嵌二维码，因为第二种接受度更高所以这里以第二个为例：

1.引入资源

首先需要在网页中引入企微的指定资源http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js

如果是我们传统的单页面应用则直接在index.html中引入即可，如果有更个性化的引入方式则按项目要求引入即可。

2.构建二维码容器

因为企微其实是通过js生成iframe来展示二维码的，所以我们需要给这个iframe创建一个容器，该容器需要一个id值。

3.创建实例

有了容器以后我们就可以创建实例了：

window.WwLogin({
		"id" : "wx_reg",  
		"appid" : "", // ww0aa11a1aaa111a11 在企微管理平台获取
		"agentid" : "", // 1000000  在企微管理平台获取
		"redirect_uri" :"", // https://www.baidu.com/login  需要和在企微管理平台开启企业微信授权登录时设置的域名保持一致
		"state" : "",
		"href" : "", // 定制化css
});

这里照着填参数即可，如果某些参数为了数据的安全性不准备保存在前端那么让后端提供一个接口返回即可。

这里需要注意的是redirect_uri的域名一定要和企微管理平台开启扫码登录时设定的域名一直，否则会提示域名不一致。

4.扫码成功后获取信息

在用户扫码确认后，页面会被重定向值redirect_uri，同时会携带两个参数code和state。一般来说我们会重定向至login页面，根据路由传递的参数我们可以拿到code参数，拿到code参数以后就可以请求企微制定的接口去获取信息https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=ACCESS_TOKEN&code=CODE，一般来说这个接口的请求是需要后端的请求的，所以我们让后端提供一个接口将code传递给后端，后端请求后拿到用户信息并生成token返回。

5.获取信息后跳转

拿到接口返回的token以后，我们就可以像账号密码登录一样走后续流程即可。