美文网首页
企业微信扫码登陆

企业微信扫码登陆

作者: 前端开发爱好者 | 来源:发表于2019-11-29 20:15 被阅读0次

    开头

    推荐阅读官方文档链接

    企业微信扫码登陆流程

    根据图片可以看出,流程很简单。

    步骤

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

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

    造新页面的登陆方式

    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获取到用户信息。

    这就完成了企业微信扫码登陆。
    daozhe
    内嵌登陆二维码

    1. 首先引入js文件
      http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js

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

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

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

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

    其余的步骤就与之前的登陆方式相同了。

    这就完成了扫码登陆。

    总结

    • 微信内嵌二维码使用了iframe技术。所以内嵌二维码与新页面其实是同一个。
    • 微信的二维码展示过程中使用了长轮询,每次请求的时间约为20秒,在20秒时接口返回200并携带状态信息。如果二维码过期则,停止轮询。
    • 用户扫描二维码后,长轮询变为段轮询(即使用户在登陆时选择取消),用户点击确认直接跳转到redirect_uri。
    • 构造二位码的edirect_uri地址本身可以包含查询参数,但是尽量不要包含哈希,登陆成功的链接地址会包含redirect_uri包含的查询参数。
    redirect_uri http://a.a.com
    登陆成功后跳转为  http://a.a.com?code=CODE&state=STATE
    
    redirect_uri http://a.a.com?name=1
    登陆成功后跳转为  http://a.a.com?name=1&code=CODE&state=STATE
    
    redirect_uri http://a.a.com/#/a
    登陆成功后跳转为  http://a.a.com/#/a?code=CODE&state=STATE
    
    • 对于前后端分离的项目,可以从后端获取二维码所需要参数构建二维码,将redirect_uri直接指向后端的登陆接口,后端只需要根据登陆的成功与否将页面重定向至需要的页面即可。

    相关文章

      网友评论

          本文标题:企业微信扫码登陆

          本文链接:https://www.haomeiwen.com/subject/ltqwwctx.html