前后端分离 单点登录SSO 纯前端实现单点登录SSO

2023-10-30

示例代码地址【GitHub】

以前涉及到单点登录,都是用CAS解决的,不过体验不是很好,但是也确确实实实现了单点登录,利用了session会话。后来我到了公司的架构部,部门决定重新定位前端技术路线,我大胆地采用了前后端分离的方式,让前端工程化,这样遇到单点登录就涉及到一个问题,前端已经不存在session会话了,于是我就采用cookie,将登录信息存储进cookie,这时有人就会问,cookie是不是不安全,在我看来session和cookie的安全级别是差不多的,都很容易被攻击。如果对于内网项目,可以暂不考虑,如果是外网项目则必须采用https协议。

现在我就简单地说下我是如何实现的吧:

比如现在有a.com、b.com、uc.com;a.com和b.com中利用iframe嵌套uc.com,利用html5跨域通讯postMessage将在a.com中登录的信息告知uc.com,然后uc.com将需要保存的信息存入cookie,a.com也将需要保存的信息存入cookie;此时访问b.com时,b.com中的iframe中的uc.com会将cookie中的登录信息通过postMessage告知b.com这些信息,然后b.com将这些信息存入cookie中,此时b.com就是已登录状态了,无需再登录,这样便实现了单点登录。以上反之则是未登录。

上一种方式对于安全性较高的Safari和Opera浏览器是不可行的,不同之处在于这些浏览器不允许iframe中跨域存储cookie,此时解决方案是在a.com中登录后将信息存入cookie,然后跳转至利用iframe嵌套a.com的uc.com,a.com将cookie中的登录信息传递给uc.com,这样uc.com就获取到了登录信息,然后存储进cookie,然后利用浏览器路径替换方式进入a.com,这样便实现了单点登录。

我的方法很简单,有一个地方需要注意,就是postMessage只将信息发送给约定好的域,iframe只被约定好的域嵌套!

单点登录SSO-流程图:

 

对于安全性较高的浏览器,单点登录SSO-流程图:


是不是很简单,目前我是这么解决的,如果谁有更好的想法的话,就在此请求你一起分享下吧~

补充:前端和后端交互的时候,基本都是和rest风格的接口交互,我平时交互的时候都是头部信息中放入后端以JWT形式生成的token,后端获取请求时去解析前端传过来的token值,然后判断后给以相应的处理。这里就不介绍JWT了,关于JWT的文章泛滥了~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前后端分离 单点登录SSO 纯前端实现单点登录SSO 的相关文章

随机推荐

  • Java多线程文件下载器高文件下载速度

    使用多线程下载器提高文件下载速度 在进行大文件下载时 使用多线程技术可以显著提高下载速度 本文将介绍如何使用多线程下载器来实现并行下载 以加快文件下载过程 多线程下载器简介 多线程下载器是一种利用多线程同时下载文件的工具 它将大文件分割成多
  • SSD(pytorch)自建数据集训练及测试

    一 数据集准备 SSD代码 GitHub amdegroot ssd pytorch A PyTorch Implementation of Single Shot MultiBox Detector 采用的VOC格式的数据集 在data文
  • odoo16安装教程,全球第一开源ERP平台

    虚拟机版本 ubuntu 22 10 本人用的是这个版本的ubuntu系统 也可以使用最新版本的 准备工作 打开虚拟机 ubuntu系统 进入终端 更新系统 sudo apt get update sudo apt get upgrade
  • js 获取两个时间之间相差月份

    话不多说 直接上代码 获取两个时间月份差 function getMonths start end var result var starts start split var ends end split var staYear start
  • Unity UGUI 添加 Material(材质)

    在给 UGUI 添加 Material 时 如果 Material 中的 Shader 不做特殊处理的话 那么此组件将会变成纯黑色 如果需要添加 Material 则需要在 Shader 中做 UGUI 专门的处理 Properties U
  • Android 11以下DialogFragment里弹出PopWindow显示问题

    最近在写UI的时候发现一个非常有意思的事情 Android 11以下在DialogFragment里面弹出PopWindow 最终会被截取 尝试过一些方法以后将解决方案做一个记录 mPopWindow setClippingEnabled
  • 华为手机连电脑当摄像头用_今天才知道,华为手机摄像头还能这样用!还不会用你买什么华为?...

    大家都知道 华为手机的摄像头十分给力 拍照效果很好看 但是你知道吗 华为手机摄像头 不仅仅能拍照 它还有很多隐藏的高级用法 比如今天说的这两个 不到10 的花粉会用 挺可惜的 一 华为手机摄像头高级用法 1 扫描文档 10分钟后就下班了 领
  • Python Tkinter Menu使用教程

    Menu类控件用来实现顶层 下拉 弹出菜单 Patterns Toplevel menus被用来显示在标题栏 root窗口或者其他顶层窗口上 创建一个顶层菜单 创建Menu类的实例 然后使用add方法添加命令或者其他菜单内容 root Tk
  • 30分钟掌握STL系列(二)

    30分钟掌握STL系列 二 迭代器 迭代器提供对一个容器中的对象的访问方法 并且定义了容器中对象的范围 迭代器就如同一个指针 事实上 C 的指针也是一种迭代器 但是 迭代器不仅仅是指针 因此你不能认为他们一定具有地址值 例如 一个数组索引
  • 滴滴前端高频react面试题总结

    当调用 setState的时候 发生了什么操作 当调用 setState时 React做的第一件事是将传递给setState的对象合并到组件的当前状态 这将启动一个称为和解 reconciliation 的过程 和解的最终目标是 根据这个新
  • iOS开发——在 OC 项目中使用基于 Swift 的 CocoaPods 库

    在 OC 项目中使用基于 Swift 的 CocoaPods 库 随着 Swift 的流行 各种神奇的库也开始有对应的 Swift 版本了 而其中一些更神奇的库却只有 Swift 版本 正巧接手了一个前人用 Swift 写的项目 里面有一个
  • element中checkbox触发change事件时同时传递状态和自定义参数

    element中checkbox触发change事件时同时传递状态和自定义参数 div div
  • 高质量程序设计指南C++ C 代码规范

    这里只是搬运作者对 匈牙利 命名规则做合理简化之后的命名规则 比较适合于 Windows应用程序的开发 建议1 类型名和函数名均以大写字母开头的单词组合而成 例如 class Node 类名 class LeafNode 类名 void D
  • 打开dll文件时模块加载失败,请确保二进制存储在指定的路径中,或者调试它以检查该二进制或相关的.DLL文件是否有问题

    打开dll文件时模块加载失败 请确保二进制存储在指定的路径中 或者调试它以检查该二进制或相关的 DLL文件是否有问题 打开dll文件时模块加载失败 电脑提示请确保二进制存储在指定的路径中 或者调试它以检查该二进制或相关的 DLL文件是否有问
  • Linux命令-fsync

    对fsync命令只做简单介绍 不做详细原理解释 通过man命令查看fsync 2 函数有以下共识 1 fsync函数是属于系统核心函数 2 调用fsync函数会将修改的数据和文件描述符的属性持久化到存储设备中 3 fsync函数将内核缓存的
  • PyQt+moviepy音视频剪辑实战文章目录

    前往老猿Python博文目录 本专栏为moviepy音视频剪辑合成相关内容介绍的免费专栏 对应的收费专栏为 moviepy音视频开发专栏 一 moviepy基础能力系统介绍 本部分主要以类为单位介绍moviepy相关知识 相关内容主要来自m
  • Linux——gcc和g++的区别和应用

    Windows中我们常用vs来编译编写好的C和C 代码 vs把编辑器 编译器和调试器等工具都集成在这一款工具中 在Linux下我们能用什么工具来编译所编写好的代码呢 其实Linux下这样的工具有很多 但我们只介绍两款常用的工具 它们分别是g
  • C#难点语法讲解之委托---从应用需求开始讲解

    一 委托的定义 委托 Delegate 是存有对某个方法的引用的一种引用类型变量 引用可在运行时被改变 简单解释 变量好控制 方法不好控制 委托可以把方法变成变量 二 例子解释定义 如果我们有一个数组 里面有10个数据 数组就是变量的一种
  • 逻辑架构图、系统架构图、技术架构图

    逻辑架构图 系统架构图和技术架构图是软件系统中常见的三种不同类型的架构图 用于描述系统的不同方面和层次 1 逻辑架构图 Logical Architecture Diagram 逻辑架构图侧重于系统的功能和模块之间的关系 描述了软件系统的逻
  • 前后端分离 单点登录SSO 纯前端实现单点登录SSO

    示例代码地址 GitHub 以前涉及到单点登录 都是用CAS解决的 不过体验不是很好 但是也确确实实实现了单点登录 利用了session会话 后来我到了公司的架构部 部门决定重新定位前端技术路线 我大胆地采用了前后端分离的方式 让前端工程化