企业微信web登录(扫二维码登录)

记录一下企业微信web扫码登录的使用过程。

按惯例,先看登录流程:

步骤

首先, 企业微信后台开启“企业微信授权登陆功能”,“设置授权回调域名” ,授权回调域名必须访问链接的域名完全一致。(访问链接的域名就是扫码登陆成功后跳转的域名,配置的域名不包括协议头,但是包括端口)。

接下来就是展示二维码了,企业微信提供了两种方式,独立页面和内嵌登陆二维码。两种方式没有什么本质的差别。

造新页面的登陆方式

  1. 企业微信扫码登陆的链接如下,我们只需要传递查询参数即可。
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进行校验

可见必传的参数有三个,appid和agentid是常量,redirect_uri则是用户扫码登陆成功后页面直接跳转的地址。

  1. 当用户允许授权,页面会重定向至redirect_uri并且附带上code和state参数。用户禁止授权则无code参数。后端通过企业微信API即可根据code获取到用户信息。

这就完成了企业微信扫码登陆。

WEB内嵌登陆二维码

  1. 首先在文件中引入企业微信官方api的js文件<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js"></script>

  2. 在页面中创建一个容器,比如 <div id="wx_reg"></div>

  3. 在要展示二维码的页面直接调用引入js的函数

window.WwLogin({
        "id" : "wx_reg",  
        "appid" : "",
        "agentid" : "",
        "redirect_uri" :"",
        "state" : "",
        "href" : "",
});

前四个参数必传,第一个为容器的id,其余3个与之前介绍的相同。

这就完成了扫码登陆。来看下效果

猜你喜欢

转载自blog.csdn.net/baidu_36095053/article/details/132224370