飞书-SSO单点登录

这篇具有很好参考价值的文章主要介绍了飞书-SSO单点登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

飞书SSO单点登录

飞书 sso 单点登录

可以参考 飞书js-sdk

Documentation - Feishu Open Platform

实现效果
飞书-SSO单点登录,飞书,前端,vue.js,javascript

核心代码

//这里注意容器需要设置固定大小
<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>

注意:
飞书-SSO单点登录,飞书,前端,vue.js,javascript

核心代码-封装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[钩子]

部分核心代码(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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【springboot+vue项目(十五)】基于Oauth2的SSO单点登录(二)vue-element-admin框架改造整合Oauth2.0

    Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架,提供了丰富的组件和功能,可以帮助开发者快速搭建现代化的后台管理系统。 vue-element-admin/   |-- build/                          # 构建相关配置文件   |    |-- build.js                   # 生产环境构建脚本

    2024年02月20日
    浏览(13)
  • 【单点登录SSO认证中心】

    (2017-09-22更新)GitHub:https://github.com/sheefee/simple-sso 1、http无状态协议 web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关联,这个过程用下图说明,三次请求/响应对之间没有任何联系 但这

    2024年02月13日
    浏览(10)
  • 单点登录(SSO)详解

    文章目录 前言 一、单点登录是什么? 二、单点登录的实现方式 1.Cookie方案: 2.Session方案: 3.Token方案: 三、JWT是什么 1.JWT的概况 2.JWT的组成 3.JWT的用法 4.JWT优缺点 四、Token实现单点登录(代码) 1.添加JWT依赖与JWT工具类 2.编写登录方法 总结 在分布式项目架构中,为了提高

    2024年02月13日
    浏览(13)
  • 八个开源免费单点登录(SSO)系统

    使用SSO服务可以提高多系统使用的用户体验和安全性,用户不必记忆多个密码、不必多次登录浪费时间。下面推荐一些市场上最好的开源SSO系统,可作为商业SSO替代。 单点登录(SSO)是一个登录服务层,通过一次登录访问多个应用。使用SSO服务可以提高多系统使用的用户体验

    2024年02月04日
    浏览(21)
  • Java实现单点登录(SSO)详解:从理论到实践

    ✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨  🎈🎈作者主页: 喔的嘛呀🎈🎈 ✨✨ 帅哥美女们,我们共同加油!一起进步!✨✨  目录 引言 一、什么是单点登录(SSO)? 二、SSO的工作原理 三、SSO的具体实现 SSO的核心概念

    2024年04月16日
    浏览(15)
  • SaaSpace:8款最好的免费SSO单点登录软件工具

    我们确实花了很多时间用于登录。 这不仅耗时,而且往往是一种令人羞愧的经历。(例如,你经常问自己,“这个密码中的\\\'B\\\'是大写还是小写?”,然后反思“我失去了记忆吗?”) 根据一些报告的研究,单点登录软件为努力跟踪其无数不同登录次数(平均191次)的企业用

    2024年02月06日
    浏览(217)
  • 基于SAML 2.0对接阿里云的SSO(单点登录)

    公司使用的阿里云作为公有云,每次员工入职或离职时同时需要维护两套账号(一套内部账号,一套阿里云RAM账号),为了让用户能够使用内部账号能访问阿里云,所以决定对接阿里云的SSO 主流程介绍 用户访问阿里云 阿里云调转至公司内部的SSO(单点登录) 公司内部SSO让用户

    2023年04月10日
    浏览(13)
  • AWS多账户单点登录 IAM Identity Center(AWS SSO)

    需求场景 多个aws账户,登陆麻烦且不安全,SSO单点功能并且外部身份提供者 — 如果您要管理外部身份提供者(IdP)(例如 Okta 或 Active Directory)中的用户。 官方文档:https://docs.aws.amazon.com/zh_cn/singlesignon/latest/userguide/getting-started.html 最佳实践:https://aws.amazon.com/cn/blogs/securi

    2024年02月12日
    浏览(15)
  • 深入理解SSO原理,项目实践使用一个优秀开源单点登录项目(附源码)

    深入理解SSO原理,项目实践使用一个优秀开源单点登录项目(附源码)。 一、简介 单点登录(Single Sign On),简称为 SSO。 它的解释是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。 ❝ 所谓一次登录,处处登录。同样一处退出,处处退出。 ❞

    2024年02月11日
    浏览(12)
  • 基于flask-oidc的OIDC协议授权码模式单点登录SSO实现

    关于SSO单点登录、OIDC协议、授权码模式等相关概念详见基于OIDC的SSO单点登录文章内容 应用注册: 在提供OIDC服务的认证系统中注册应用信息 授权流程: 携带由应用生成的 state (防CSRF跨域信息)和在认证系统中注册的应用信息重定向请求认证系统的授权服务 授权服务重定向到登

    2024年02月13日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包