企业微信第三方扫码登录

为什么写这个文章

公司后台突然需要扫码登录，网上的企业微信扫码都是基于自建应用的扫码登录，对第三方的扫码并没有多加介绍

概述

企业微信的管理员和成员，可通过单点登录机制，登录到第三方网站。第三方可通过接口，获取登录者的身份信息及企业信息。
单点登录包括如下两种场景：

• 管理员从企业微信管理端单点登录第三方；
• 管理员或成员在第三方网站发起登录授权；

需要注意下面几点

1.登录授权发起域名一定要和js存放地址保持一致，否则会提示校验请求来源错误

2.登录授权页和自建应用不同，使用第三方api

https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=ww100000a5f2191&redirect_uri=http%3A%2F%2Fwww.oa.com&state=web_login@gyoss9&usertype=admin

引入插件代码wwLogin-1.0.0.js

!function (a, b, c) {
    function d(c) {
        var d = b.createElement("iframe"),
            e = "https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=" + c.appid + "&redirect_uri=" + c.redirect_uri + "&state=" + c.state + "&usertype=member";
        e += c.style ? "&style=" + c.style : "", e += c.href ? "&href=" + c.href : "", d.src = e, d.frameBorder = "0", d.allowTransparency = "true", d.scrolling = "no", d.width = "300px", d.height = "400px";
        var f = b.getElementById(c.id);
        f.innerHTML = "", f.appendChild(d), d.onload = function () {
            d.contentWindow.postMessage && a.addEventListener && (a.addEventListener("message", function (b) {
                b.data && b.origin.indexOf("work.weixin.qq.com") > -1 && (a.location.href = b.data)
            }), d.contentWindow.postMessage("ask_usePostMessage", "*"))
        }
    }

    a.WwLogin = d
}(window, document);

创建容器

<div id="js-layout-login-login-wechat-qrcode" class="layout_qrcode"></div>

执行代码

const defaultWechatConfig = {
    // 企业微信配置
    agentId: '',//企业微信内自行获取
    appId: "",//企业微信内自行获取
    callbackUrl: encodeURIComponent('****'),//企业微信内自行配置,一定要和授权完成回调域名保持一致
    state: "123"//企业微信内自行配置获取
};
var w = defaultWechatConfig;
window.WwLogin({
    id: "js-layout-login-login-wechat-qrcode",
    appid: w.appId,
    agentid: w.agentId,
    redirect_uri: w.callbackUrl,
    state: w.state
});

基本上就可以显示二维码了