构造扫码登录链接

[TOC]

构造独立窗口登录二维码

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

https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=CORPID&agentid=AGENTID&redirect_uri=REDIRECT_URI&state=STATE

参数说明

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

若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与网页应用的可信域名不一致。
若用户不在agentid所指应用的可见范围,扫码时会提示无权限。

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

redirect_uri?code=CODE&state=STATE

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

redirect_uri?state=STATE

示例

假定当前
企业CorpID:wxCorpId
开启授权登录的应用ID:1000000
登录跳转链接:http://api.3dept.com
state设置为:weblogin@gyoss9

需要配置的授权回调域为:api.3dept.com

根据URL规范,将上述参数分别进行UrlEncode,得到拼接的OAuth2链接为:
https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wxCorpId&agentid=1000000&redirect_uri=http%3A%2F%2Fapi.3dept.com&state=web_login%40gyoss9

构造内嵌登录二维码

为了满足网站更定制化的需求,我们还提供了第二种获取code的方式,支持网站将企业微信登录二维码内嵌到自己页面中,用户使用企业微信扫码授权后通过JS将code返回给网站。
JS企业微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到企业微信域下登录后再返回,提升企业微信登录的流畅性与成功率。 网站内嵌二维码企业微信登录JS实现办法:

步骤一:引入JS文件

在需要展示企业微信网页登录二维码的网站引入如下JS文件(支持https):
旧版:http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js
新版(20210803更新):http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js

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

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

var wwLogin = new WwLogin({
        "id": "wx_reg",  
        "appid": "",
        "agentid": "",
        "redirect_uri": "",
        "state": "",
        "href": "",
        "lang": "zh",
});

参数说明

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

1.网站内嵌二维码企业微信登录JS代码中href字段作用?
答:如果企业觉得企业微信团队提供的默认样式与自己的页面样式不匹配,可以自己提供样式文件来覆盖默认样式。举个例子,如企业觉得默认二维码过大,可以提供相关css样式文件,并把链接地址填入href字段(只支持https协议的资源地址):

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

相关效果如下:

© 1998 - 2021 Tencent Inc. All Rights Reserved