企业微信实现扫码登录

企业微信实现扫码登录

最近在做公司的一个知识管理系统，其中登录部分分为账号密码和企业微信扫码登录两种。扫码登录并不是很复杂，这里简单分享一下。

企业微信扫码登录流程

企业微信提供了OAuth的扫码登录授权方式，可以让企业的网站在浏览器内打开时，引导成员使用企业微信扫码登录授权，从而获取成员的身份信息，免去登录的环节。

第一步：企业微信管理后台新建项目

新建项目

第二步：登录授权以及授权回调域名

登录授权

配置授权的回调域

要求配置的授权回调域，必须与访问链接的域名完全一致

第三步：代码开发

扫码登录目前有两种方式：

• 独立窗口登录二维码
• 内嵌登录二维码

独立窗口登录二维码

开发者需要构造如下的链接来获取code参数：

open.work.weixin.qq.com/wwopen/sso/…

参数说明:

参数	必须	说明
appid	是	企业微信的CorpID，在企业微信管理端查看
agentid	是	授权方的网页应用ID，在具体的网页应用中查看
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验
lang	否	自定义语言，支持zh、en；lang为空则从Headers读取Accept-Language，默认值为zh

返回说明： 用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

独立窗口登录二维码

内嵌登录二维码

为了满足网站更定制化的需求，企业微信还提供了第二种获取code的方式，支持网站将企业微信登录二维码内嵌到自己页面中，用户使用企业微信扫码授权后通过JS将code返回给网站。

JS企业微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到企业微信域下登录后再返回，提升企业微信登录的流畅性与成功率。

网站内嵌二维码企业微信登录JS实现办法：

步骤一：引入JS文件

在需要展示企业微信网页登录二维码的网站引入如下JS文件（支持https）：

旧版：rescdn.qqmail.com/node/ww/wwo…

新版（20210803更新）：wwcdn.weixin.qq.com/node/wework…

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

注意：新版wwLogin-1.2.4.js需要使用new WwLogin进行实例化

var wwLogin = new WwLogin({
        "id": "wx_reg", // 登录页面显示二维码的容器id
        "appid": "",  // 企业微信的CorpID，在企业微信管理端查看
        "agentid": "", // 授权方的网页应用id，在具体的网页应用中查看
        "redirect_uri": encodeURIComponent(url), // 重定向的地址，需要进行encode
        "state": "",
        "href": "",  //自定义样式链接，只支持https协议的资源地址
        "lang": "zh",
});

参数说明:

参数	必须	说明
id	是	企业页面显示二维码的DOM id
appid	是	企业微信的CorpID，在企业微信管理端查看
agentid	是	授权方的网页应用ID，在具体的网页应用中查看
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验
href	否	自定义样式链接，企业可根据实际需求覆盖默认样式。
lang	否	自定义语言，支持zh、en；lang为空则从Headers读取Accept-Language，默认值为zh

内嵌登录二维码

扫描成功

两种扫码方式，最后都是重定向到了我们约定的redirect_uri并且带上code和state参数，通过code可以换取用户access_token以及企业微信的用户信息。