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

单点登录(SSO,Single Sign On),是在企业内部多个应用系统(如考勤系统、财务系统、人事系统等)场景下,用户只需要登录一次,就可以访问多个应用系统。
同理用户只需注销一次,就可以从多个应用系统退出登录。
简单来说就是,一次登录,全部登录!一次注销,全部注销!!
方法1:父域Cookie
子级域名能共享主域名的Cookie,所以可以利用这个特性,在父级域名上设置Cookie就行了。
比如 tieba.baidu.com 和 map.baidu.com,它们都建立在 baidu.com 这个主域名之下,那么它们就可以通过这种方式来实现单点登录。
- 优点
此种实现方式比较简单
- 缺点
不支持跨主域名
方法2:认证中心

认证中心独立一个项目,登录后将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文件,会导致加载时间过长
相关文章:
单点登录(SSO)前端怎么做
单点登录(SSO)前端怎么做 本文介绍单点登录(SSO)是什么,还有就是前端怎么做。 单点登录(SSO)是什么 单点登录(SSO,Single Sign On),是在企业内部…...
【面试干货】索引的作用
【面试干货】索引的作用 1、索引的作用 💖The Begin💖点点关注,收藏不迷路💖 1、索引的作用 索引 可以协助 快速查询、更新数据库表中数据。 通过使用索引,数据库系统能够快速定位到符合查询条件的数据,提…...
【成品设计】基于红外线的目标跟踪无线测温系统设计
《基于红外线的目标跟踪无线测温系统设计》 整体功能: A端:无线跟踪端 主控:采用STM32F103C8T6单片机作为核心控制。360度编码模块数字脉冲输出红外解码编码模块OLED屏幕。 B端:无线待测端 主控:采用STM32F103C8T…...
抽象,自定义函数,递归
6.1懒惰是一种美德 如果你 在一个地方编写了一些代码,但需要在另一个地方再次使用,该如何办呢? 假设你编写了一段代码,它计算一些斐波那契数(一种数列,其中每个数都是前两个数的和)。 现在的…...
php设计模式之策略模式详解
策略模式(Strategy Pattern)是一种行为设计模式,它使你能在运行时改变对象的行为。在PHP中应用策略模式可以让你轻松地根据需要选择和交换算法或策略,而无需修改使用这些算法的代码。 策略模式的核心概念: 目的&…...
Android在不同层面增加应用
1 App 应用代码一般在开发者的项目目录下,packages/apps/YourApp/,比如app/src/main/java目录下 对于系统应用,源代码可能位于packages/apps/目录下,例如packages/apps/Settings。 用户安装的应用(从Google Play或其…...
【Pycharm】功能介绍
1.Code Reformat Code 格式化代码,可以帮助我们去自动调整空格等,根据python语法规范自动调整 2.Settings 1.创建py文件默认填充模版 3.读写py文件编码格式一致性 顶部代码指定的编码方式作用: 可以保证python2/3解释器在读取文件的时候按…...
安卓手机平板使用JuiceSSH无公网IP远程连接本地服务器详细流程
文章目录 前言1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 前言 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? 本文就和大家分享一下如何使用 cpolarJuiceSSH 实现手机端远程连接Linux…...
告别冗长代码:Java Lambda 表达式如何简化你的编程
在现代软件开发中,高效和简洁的代码变得越来越重要。Java作为一门成熟而广泛使用的编程语言,一直在不断进化,以满足开发者的需求。Java 8的推出标志着一次重要的飞跃,其中最引人注目的特性之一便是Lambda表达式。 Lambda表达式为J…...
不同生成式AI模型的优缺点(GAN,VAE,FLOW)
不同生成式人工智能模型的优缺点 近年来,生成式 AI 模型因其能够创建新的原创内容而备受关注。这些模型旨在生成类似于给定训练数据集的数据,从而产生逼真且富有创意的输出。了解不同类型的生成式 AI 模型及其优缺点对于研究人员、开发人员和用户做出明…...
VMware ESXi 8.0U2c macOS Unlocker OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版
VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版 VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0U2 集成驱动版,在个人电脑上运行企业级工作负载 请访问原文链…...
SpringCloud Consul基础入门与使用实践总结
【1】Consul简介 官网地址:https://www.consul.io/intro/index.html 下载地址:https://www.consul.io/downloads.html 中文文档:https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…...
pdf拆分成有图和无图的pdf(方便打印)
pdf拆分成有图和无图的pdf(方便打印) 原因 打印图片要彩印,每次都要手动弄,打印的时候很麻烦; 随着打印次数的增加,时间就越来越多 为解决此问题,使用python写一个exe解决这个问题 历程 找一个python的GUI界面找到 t…...
通用树查找算法
想要一个树形控件来显示数据,却发现Racket的GUI库竟然没有提供这个控件。既然没有,那就自己手搓一个吧。没想到,在做这个控件中竟然有了新发现! 树形控件有一个功能是查找树中指定的节点。这就是接下来的故事的起点。 1 找外援 不…...
Flutter 中的 TableCell 小部件:全面指南
Flutter 中的 TableCell 小部件:全面指南 Flutter 是一个功能强大的 UI 框架,由 Google 开发,允许开发者使用 Dart 语言构建跨平台的移动、Web 和桌面应用。在 Flutter 的丰富组件库中,TableCell 是一个用于创建表格单元格的组件…...
clickhouse学习笔记(一)入门与安装
目录 一 、入门 简介 核心特性包括 1.1 列式存储 1.2 原生压缩 1.3 向量化执行引擎 1.4 DBMS 功能 1.5 分布式处理 1.6 高吞吐写入能力 1.7 实时分析 1.8 SQL支持 1.9 高度可扩展 1.10 数据分区与线程级并行 1.11 应用场景 1.12 不适用场景 二、ClickHouse单机版…...
【JavaEE精炼宝库】多线程(4)深度理解死锁、内存可见性、volatile关键字、wait、notify
目录 一、死锁 1.1 出现死锁的常见场景: 1.2 产生死锁的后果: 1.3 如何避免死锁: 二、内存可见性 2.1 由内存可见性产生的经典案例: 2.2 volatile 关键字: 2.2.1 volatile 用法: 2.2.2 volatile 不…...
使用Ollama+OpenWebUI部署和使用Phi-3微软AI大模型完整指南
🏡作者主页: 点击! 🤖AI大模型部署与应用专栏:点击! ⏰️创作时间:2024年6月6日23点50分 🀄️文章质量:96分 欢迎来到Phi-3模型的奇妙世界!Phi-3是由微软…...
k8s的ci/cd实践之旅
书接上回k8s集群搭建完毕,来使用它强大的扩缩容能力帮我们进行应用的持续集成和持续部署,整体的机器规划如下: 1.192.168.8.156 搭建gitlab私服 docker pull gitlab/gitlab-ce:latest docker run --detach --hostname 192.168.8.156 --publ…...
笔记96:前馈控制 + 航向误差
1. 回顾 对于一个 系统而言,结构可以画作: 如果采用 这样的控制策略,结构可以画作:(这就是LQR控制) 使用LQR控制器,可以通过公式 和 构建一个完美的负反馈系统; a a 但是有上…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
