前后端分离基于Oauth2的SSO单点登录怎样做？

2024-05-16 03:21:48

一、说明

单点登录顾名思义就是在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统，免除多次登录的烦恼；本文主要介绍跨域间的 前后端分离 项目怎样实现单点登录，并且与 非前后端分离 的差异在那里？需要解决什么问题？。

前后端分离的核心概念是后端仅返回前端所需的数据，不再渲染HTML页面，前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互

PS：关于单点登录主流的实现思路和原理请看文章《Spring Security基于Oauth2的SSO单点登录怎样做？一个注解搞定》

二、实现差异

跨域间的前后端分离项目也是基于共享统一授权服务(UAA)的cookie来实现单点登录的，但是与非前后分离不一样的是存在以下问题需要解决

没有过滤器/拦截器，需要在前端判断登录状态
需要自己实现oauth2的授权码模式交互逻辑
需要解决安全性问题，oauth2的clientSecret参数放在前端不安全

三、实现架构

下面是前后端分离项目的三个角色(前端WEB工程、后端API工程、授权中心UAA)间进行登录/单点登录时的交互逻辑架构图

跨域的单点登录原理在《Spring Security基于Oauth2的SSO单点登录怎样做？一个注解搞定》中已经介绍过了这里就不展开说明了

前端WEB工程有几个点需要注意：

红色线条为重定向跳转
前端工程可通过是否存在 access_token 判断登录状态
前端工程跳转UAA之前需记录用户访问的页面地址，方便登录完成后重定向回去

PS：为什么获取access_token需要请求后端API工程去完成，而不是前端WEB工程自己直接请求UAA呢？因为安全性问题！这一步需要传clientSecret参数，而通过后台来配置这个参数就不需要暴露给前端了。

四、完整的demo下载地址

https://gitee.com/zlt2000/microservices-platform/tree/master/zlt-demo/sso-demo/web-sso

扫码关注有惊喜！

前后端分离基于Oauth2的SSO单点登录怎样做？相关推荐

本地前后端联调跳过cas sso单点登录
很多项目集成cas单点登录系统,在本地开发联调的时候,往往会遇到单点登录的拦截,这会影响到我们正常的联调.我们客户端和服务通信的身份信息存储在浏览器cookie里面,那么处理方式非常简单.我们只要想办 ...
使用Spring Secuirty Oauth2实现SSO单点登录
文章目录 1. 什么是单点登录 2. 微服务架构下单点登录的思路 3. 使用 Spring Secuirty Oauth2 实现SSO单点登录 ①:建表 ②:授权服务器逻辑 ③:网关逻辑 4. 接口测 ...
基于Spring Security + OAuth2 的SSO单点登录（服务端）
相关技术 spring security: 用于安全控制的权限框架 OAuth2: 用于第三方登录认证授权的协议 JWT:客户端和服务端通信的数据载体传统登录登录web系统后将用户信息保存在ses ...
SpringSecurity前后端分离（包含token和验证码登录）
SpringSecurity前后端分离从上至下操作,直接上手SpringSecurity 文章目录 SpringSecurity前后端分离 1.项目环境 maven依赖数据库表 2.自定义User ...
基于CAS实现SSO单点登录
点击关注公众号,实用技术文章及时了解 1. 概述 1.1. 什么是SSO? 单点登录( Single Sign-On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使 ...
java oauth sso 源码_基于Spring Security Oauth2的SSO单点登录+JWT权限控制实践
概述在前文<基于Spring Security和 JWT的权限系统设计>之中已经讨论过基于 Spring Security和 JWT的权限系统用法和实践,本文则进一步实践一下基于 Sp ...
前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求
自己在闲暇时间里,无聊的我试着做了一个前后台分离的入门demo.在编写代码前通过查询百度,csdn,博学谷等做了一些准备工作,具体还只是做到前台发送的请求能顺利的发送到后端,时间仓促做的也有不足之处, ...
基于cookie的SSO单点登录系统
利用COOKIE实现单点登录功能近期公司要求帮一个项目实现单点登录功能,在综合考量下决定采用cookie实现,大概的流程如下图所: 转载于:https://www.cnblogs.com/bugge ...
若依前后端分离版：增加新的登录接口，用于小程序或者APP获取token，并使用若依的验证方法
LoginController类具体代码 /*** app 登录*/@AnonymousAccess@PostMapping("login")public AjaxResult ...

最新文章

热门文章