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

一、说明

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

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

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

二、实现差异

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

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

三、实现架构

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

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

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

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

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

四、完整的demo下载地址

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