飞书-SSO单点登录

飞书SSO单点登录

飞书 sso 单点登录

可以参考 飞书js-sdk

Documentation - Feishu Open Platform

实现效果

核心代码

//这里注意容器需要设置固定大小
<el-dialog title='SSO选择登陆' :visible.sync='showDialog' width='800px'>
            <div style='height: 100%'>
                <el-tabs :tab-position='"left"' v-model='currentTab' lazy style='height: 100%;'
                         @tab-click='handleClick'>
                    <el-tab-pane v-if='tabList.length!==0' v-for='item in tabList' :label='item.companyName'
                                 :name='item.appId'>
                        <div style='display: flex;justify-content: center'>
		                        //这里注意容器需要设置大小，不然容易出现多个二维码
		                        //因为有多个容器这里的id需要和item的唯一id相匹配
                            <div :id='`login_container_${item.appId}`' style='width: 300px;height: 300px'></div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：

核心代码-封装qrcode方法

function qrcode(currentTab) {
    //这里是重定向地址需要用户自定义
    const redirect_uri = `XXXXXXXXXXXXXXXXXXX`;
    const redirect_uri_urlEncoded = encodeURIComponent(redirect_uri);
    const goto = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${currentTab}&redirect_uri=${redirect_uri_urlEncoded}&response_type=code&state=STATE`;
    const QRLoginObj = QRLogin({
        id: `login_container_${currentTab}`,
        goto,
        width: '500',
        height: '500',
        style: 'width:300px;height:300px'//可选的，二维码html标签的style属性
    });
    var handleMessage = function(event) {
        console.log(QRLoginObj.matchOrigin(event.origin), QRLoginObj.matchData(event.data), event.data.tmp_code, '飞书返回监听标识');
        // 使用 matchOrigin 和 matchData 方法来判断 message 和来自的页面 url 是否合法
        if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
            var loginTmpCode = event.data.tmp_code;
            console.log('`${goto}&tmp_code=${loginTmpCode}`', loginTmpCode, `${goto}&tmp_code=${loginTmpCode}`);
            // 在授权页面地址上拼接上参数 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);
    }
}

export { qrcode };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在 .vue 中的使用注意点

1.随时更新 currentTab[tab选中的值] 的值

2.首次二维码的更新可能有异步问题，需要借助 nextTick[钩子]

部分核心代码（vue2.0）

......
this.currentTab = target;
this.$nextTick(() => {
     qrcode(target);
});
......
1
2
3
4
5
6

handleClick: debounce(function(tab, event) {
    this.currentTab = tab._props.name;
    qrcode(this.currentTab);
}, 1000),
1
2
3
4