单点登录(SSO)前端怎么做

单点登录(SSO)前端怎么做

本文介绍单点登录(SSO)是什么,还有就是前端怎么做。

单点登录(SSO)是什么

cc4ac0c16bb94c77bf641a9946055ac4

单点登录(SSO,Single Sign On),是在企业内部多个应用系统(如考勤系统、财务系统、人事系统等)场景下,用户只需要登录一次,就可以访问多个应用系统。

同理用户只需注销一次,就可以从多个应用系统退出登录。

简单来说就是,一次登录,全部登录!一次注销,全部注销!!

方法1:父域Cookie

子级域名能共享主域名的Cookie,所以可以利用这个特性,在父级域名上设置Cookie就行了。

比如 tieba.baidu.commap.baidu.com,它们都建立在 baidu.com 这个主域名之下,那么它们就可以通过这种方式来实现单点登录。

  • 优点

此种实现方式比较简单

  • 缺点

不支持跨主域名

方法2:认证中心

b9cda66e6465fe73773ac0624fa414f8

认证中心独立一个项目,登录后将Token存在本地存储中

应用系统检测Token,无Token就跳转到认证中心。认证中心先检测自己本地存储中的Token有效性,有效则跳转到应用系统并在url带上Token,否则跳转到认证中心登录页面,登录成功后跳转到应用系统并在url带上Token

应用系统拿到 Token 之后,写入到自己的本地存储中,在header上带上Token,服务端会校验Token的合法性

  • 优点

支持跨主域名

扩展性好

  • 缺点

会让系统多次重定向跳转,如果认证中心是spa应用,加载耗时也大

Token带在url存在泄露风险

  • 介绍两款认证中心的开源实现

Apereo CAS 是一个企业级单点登录系统,其中 CAS 的意思是”Central Authentication Service“。它最初是耶鲁大学实验室的项目,后来转让给了 JASIG 组织,项目更名为 JASIG CAS,后来该组织并入了Apereo 基金会,项目也随之更名为 Apereo CAS。

XXL-SSO 是一个简易的单点登录系统,由大众点评工程师许雪里个人开发,代码比较简单,没有做安全控制,因而不推荐直接应用在项目中,这里列出来仅供参考。

方法3:iframe

利用iframe跨域,登录成功后给所有站点同步Token,退出时清除所有站点的Token。

在每个应用系统服务下放一个写入Token、移除Token的html文件

  • token.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><body><script>window.onload = function () {/** 从url上获取Token写入本地存储 */const Token = location.search.split('?')[1].split('=')[1];/** 从url上获取tokenMode */if(tokenMode === 'remove') {localStorage.removeItem('Token');}if (tokenMode === 'set') {localStorage.setItem('Token', Token);}};</script></body>
</html>

然后利用一个html管理所有应用系统,在html中引入所有应用系统的iframe,在iframe中引入上述html,通过iframe的src属性来控制Token的写入和移除。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>const configList = [{/** 开发环境 */"process.env.REACT_APP_BUILD_ENV": "development",},{/** 测试环境 */"process.env.REACT_APP_BUILD_ENV": "stage",},{/** Beta环境 */"process.env.REACT_APP_BUILD_ENV": "release",},{/** 正式环境 */"process.env.REACT_APP_BUILD_ENV": "production",},];/** 站点列表 */const siteList = [/**  */];// 获取location的queryfunction getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return decodeURIComponent(r[2]);return null;}/** 获取环境变量 */function getEnvVersion() {return getQueryString("env") || "development";}function init() {document.body.innerHTML = `${siteList?.map((site) => {const env = getEnvVersion();const configItem = configList.find((configItem) =>configItem?.["process.env.REACT_APP_BUILD_ENV"] === env);return ` <iframe style="height: 0px; overflow: hidden; border: none;" src="${configItem?.[site]}/token.html${location.search}" ></iframe> `;})?.join("")}`;}window.onload = function () {init();};</script></body>
</html>
  • 优点

支持跨主域名

  • 缺点

需要引入第三方html文件,写入需要时间,如果应用系统很多,需要引入很多html文件,会导致加载时间过长

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【再探】Java—Java 沙箱机制与类加载器

沙箱&#xff08;Sandbox&#xff09;机制是将Java程序限定在JVM特定的运行范围内&#xff0c;并严格限制代码对本地系统资源的访问&#xff0c;以保证代码的有效隔离&#xff0c;防止对本地系统造成破坏。 1 安全模型 类在加载过程中&#xff0c;类加载器会为类设置初始的安…

PyQt5中按钮长按指定时间后松开触发(鼠标事件)

背景&#xff1a;为了节约人力测试成本&#xff0c;模拟鼠标长按后松开&#xff0c;整理了这个简单的小demo 1、关键方法 实例鼠标按下事件 QMouseEvent(QEvent.MouseButtonPress, self.p_pos, Qt.MouseButton.LeftButton, Qt.MouseButton.LeftButton, Qt.NoModifier)实例…

常见的项目模块以及项目流程

1.图片轮播功能咋测的 接口&#xff0c;功能&#xff0c;影响面&#xff0c;性能&#xff0c;新旧数据兼容性测试 第一&#xff0c;测试环境查看旧数据功能是否正常&#xff0c;新增图片轮播是否正常&#xff0c;第二&#xff0c;自己写一个数据库数据迁移脚本将老数据迁移到…

gstreamer+mpp调用硬解码播放视频

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、cpu解码二、gstreamermpp1.默认已安装2.没安装必要软件 总结 前言 以前一直在MPP上开发硬解码推理&#xff0c;最近想弄一个盒子支持调用mpp硬解码播放视频…

跑图像生成模型GAN时,遇到OSError: cannot open resource 报错解决办法

报错信息如下&#xff1a; Traceback (most recent call last): File "/root/autodl-tmp/ssa-gan/pretrain_DAMSM.py", line 276, in <module> count train(dataloader, image_encoder, text_encoder, File "/root/autodl-tmp/ssa-gan/pretrain_DAMSM.py…

QT Creator与QT的下载安装

0.起因/小结&#xff1a; 因为运行项目需要更高版本的QT。 下载了QT 6.2.0&#xff0c;但是里面的gcc&#xff0c;g&#xff0c;gdb是64bit的&#xff0c;而我的QT Creator是32bit的&#xff0c;所以又下载了QT 13.0.0的64bit版本。 遇到问题&#xff1a;msvcp140_1.dll找不到…

软件管理及部分命令

sed命令 格式&#xff1a; sed [选项] 操作 目标文件 选项&#xff1a; -i&#xff1a;修改原始文件【如果不加-i&#xff0c;那就是仅仅修改内存中的文件副本】 案例&#xff1a;将1.txt中的tom修改成jerry。 sed -i "s/tom/jerry/g" 1.txt 将1…

基于FPGA的任意点滑动平均(滑动窗长度和数据位宽参数化,例化时参数可设置)

目录 1.前言2.原理3.举例说明4.Matlab实现5.FPGA实现滑动平均 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 对于一维信号&#xff0c;我们可以使用类似移动平均滤波&#xff08;Moving Average Filtering&#xff09;实现denoising。Moving Average Filtering 是一种…

vue-router 源码分析——3. 动态路由匹配

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…

Jmeter性能分析及调优详解(入门)

一、系统性能理解 如果说需求、开发、DB、运维、测试是单一一门学科&#xff0c;那么性能就是综合学科&#xff0c;它包含了需求分析、DB、开发、测试、运维的所有学科。其实一般来说在实际性能分析和调优中&#xff0c;测试担任的角色就是写压测脚本并执行脚本查看结果&#…

TPM 是什么?如何查看电脑的 TPM?

TPM 是什么&#xff1f; 首先我们来了解一下 TPM 是什么&#xff0c;TPM 由可信计算组织&#xff08;Trusted Computing Group&#xff0c;TCG&#xff09;开发&#xff0c;为了在提高计算机系统的安全性。随着网络安全威胁的不断增加&#xff0c;TPM 技术逐渐成为确保系统安全…

PDF文件处理不再复杂:9个Python库让一切变得简单

大家好&#xff0c;这里是程序员晚枫&#xff0c;2年前发布了一个开源项目&#xff1a;python-office&#xff0c;目前在GitHub上有800⭐&#xff0c;最近在开发新功能时感觉Python知识有点不够用了。 所以打算从2方面补充自己的知识&#xff1a;研究优秀的第三方库和学习Pyth…

力扣算法题:多数元素 --多语言实现

无意间看到&#xff0c;力扣存算法代码居然还得升级vip。。。好吧&#xff0c;我自己存吧 golang&#xff1a; func majorityElement(nums []int) int {count : 0condidate : 0for _,val : range nums {if count 0 {condidate valcount 1} else if val condidate {count} …

Qt实现程序单实例运行(只能运行1个进程)及QSharedMemory用法

1. 问题提出 在开发时&#xff0c;经常遇到这样的需求或场景&#xff1a;程序只能被启动一次&#xff0c;不能启动多次&#xff0c;启动多次会导致混乱&#xff0c;如&#xff1a;可执行程序用到文件指针、串口句柄等。试想如果存在多个同一个文件的句柄或同一个串口的句柄&…

开源网关Apache APISIX启用JWT身份验证

说明&#xff1a; 本文APISIX的配置参考我之前写的《Ubuntu部署Apache APISIX》 创建最小API 首先&#xff0c;确保你已经安装了.NET 6 SDK。创建文件夹“MinimalApiDemo”&#xff0c;VS Code打开文件夹&#xff0c;打开终端 dotnet new web -o MinimalApiDemo cd Minimal…

python字典包连接mysql

连接mysql, 使用清华大学或其他国内 PyPI 镜像源 如果你在中国&#xff0c;由于网络问题&#xff0c;连接到 Oracle 的官方仓库可能会很慢或失败。在这种情况下&#xff0c;你可以使用国内的 PyPI 镜像源。例如&#xff0c;使用清华大学的镜像源&#xff1a; bash复制代码 pi…

鸿蒙开发接口数据管理:【@ohos.data.distributedData (分布式数据管理)】

分布式数据管理 分布式数据管理为应用程序提供不同设备间数据库的分布式协同能力。通过调用分布式数据各个接口&#xff0c;应用程序可将数据保存到分布式数据库中&#xff0c;并可对分布式数据库中的数据进行增加、删除、修改、查询、同步等操作。 该模块提供以下分布式数据…

Spring的bean的生命周期

想象一下&#xff0c;Spring中的Bean就像是你家后院种植的一株植物&#xff0c;从播种到开花结果&#xff0c;再到最后枯萎&#xff0c;整个过程就像是Bean的生命周期。现在&#xff0c;让我们以这个比喻来了解一下Spring Bean的生命周期吧&#xff1a; 1. 播种&#xff08;…

49.线程池的关闭方法

shutdown方法 1.线程池状态变为shutdown 2.不会接收新任务 3.已提交的任务会执行完 4.此方法不会阻塞调用线程执行 ExecutorService executorService = Executors.newFixedThreadPool(2);executorService.submit(() -> {log.debug("task1 running");try {TimeUnit…