飞书扫码登录网页

 

二维码 SDK 接入文档

最后更新于 2022-06-14

概述

为了实现在网页内部完成授权登录的流程，避免跳转到飞书登录页，保证流畅的体验，可以接入二维码 SDK 将飞书登录的二维码嵌入到网页中。当用户扫码成功后会返回 tmp_code，即可用来完成后续的授权登录流程。

使用方法

在网页中通过 script 标签引入 SDK:

<script src="https://sf3-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.2.js"></script>

引入 SDK 后，通过全局对象 window.QRLogin 创建实例:

var QRLoginObj = QRLogin({

id:"login_container",

goto: "https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=code&state=STATE",

width: "500",

height: "500",

style: "width:500px;height:600px"//可选的，二维码html标签的style属性

});

window.QRLogin 入参字段说明：

字段名	类型	属性	描述
id	string	required	二维码展示区域的元素id
goto	string	required	授权页面地址，获取方式
width	string	optional	二维码展示区域的宽（二维码的尺寸固定为250px*250px)
height	string	optional	二维码展示区域的高
style	string	optional	二维码展示区域的样式

window.QRLogin 会返回一个方法 matchOrigin 用来校验域名是否匹配飞书的域名。

通过如下方式监听，当用户扫码成功后，即可获取 tmp_code，然后在授权页面地址（入参中的goto参数）上拼接上参数 tmp_code，并跳转到该地址：

var handleMessage = function (event) {

var origin = event.origin;

// 使用 matchOrigin 方法来判断 message 来自页面的url是否合法

if( QRLoginObj.matchOrigin(origin) ) {

var loginTmpCode = event.data;

// 在授权页面地址上拼接上参数 tmp_code，并跳转

window.location.href = `${goto}&tmp_code=${loginTmpCode}`;

}

};

if (typeof window.addEventListener != 'undefined') {

window.addEventListener('message', handleMessage, false);}

else if (typeof window.attachEvent != 'undefined') {

window.attachEvent('onmessage', handleMessage);

}

该链接处理完成后，会重定向到该链接的 redirect_uri 参数所指定的地址，并带上一个授权码（code）。通过授权码可以获取 access_token。

---

https://open.feishu.cn/document/common-capabilities/sso/web-application-sso/qr-sdk-documentation

<script src="https://sf3-cn.feishucdn.com/obj/static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.1.js"></script>

<div id="login_container"></div>
 



mounted() {

            var QRLoginObj = QRLogin({
                id:"login_container",
                goto: "https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=cli_a03f23493d39d00e&redirect_uri=https%3A%2F%2Fwww.baidu.com&response_type=code&state=STATE",
                width: "500",
                height: "500",
            });     
            var handleMessage = function (event) {        
                var origin = event.origin;    
                // 使用 matchOrigin 方法来判断 message 是否来自飞书页面
                if( QRLoginObj.matchOrigin(origin) ) {           
                    var loginTmpCode = event.data; 
                    // 在授权页面地址上拼接上参数 tmp_code，并跳转
                    //window.location.href = `${goto}&tmp_code=${loginTmpCode}`;
                    console.log(loginTmpCode)
                }
            };
            if (typeof window.addEventListener != 'undefined') {   
                window.addEventListener('message', handleMessage, false);} 
            else if (typeof window.attachEvent != 'undefined') { 
                window.attachEvent('onmessage', handleMessage);
            }                
     },