飞书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>
注意：
核心代码-封装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 };
在 .vue 中的使用注意点
1.随时更新 currentTab[tab选中的值] 的值
2.首次二维码的更新可能有异步问题，需要借助 nextTick[钩子]文章来源：https://www.toymoban.com/news/detail-861516.html
部分核心代码（vue2.0）文章来源地址https://www.toymoban.com/news/detail-861516.html
......
this.currentTab = target;
this.$nextTick(() => {
qrcode(target);
});
......
handleClick: debounce(function(tab, event) {
this.currentTab = tab._props.name;
qrcode(this.currentTab);
}, 1000),
到了这里，关于飞书-SSO单点登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
