Skip to content

SSO 模块

SSO 模块功能定义： 用户通过使用sso模块，可以方便的完成自行登录。

oauth标准解释

oauth协议中，主要定义了4个部分：

  • 客户设备，或者称为客户端
  • oauth消费端
  • oauth提供端
  • 实际需要被协作分享的资源 比如，一张图片、一篇文章、一个直播间等

但是，在此部分，使用中，我们将oauth的资源分享部分简化了，只需要用到oauth的用户鉴权部分。由sso保证用户的信息登录有效，同时，也可以再次二次桥接外部qq、微信，方便用户快速登录并使用网站系统。

实际sso作为client登录外部社交账号流程截图

当前是拿gitea模拟的外部社交账号，本身oauth作为一个标准的协议，任何网站都可以作为oauth客户端，任何网站也都可以成为oauth的服务端。

解释：

  1. 用户进入sso需要登录
  2. 获取当前支持的外部sso系统
  3. 选择使用gitea(实际可以理解为qq)快速登录 /login/oauth/authorize?client_id=xxx&redirect_uri=https://sso.eagleplan.fun/oauth/callback/gitea&response_type=code
  4. 在gitea检查无法直接登录，需要 username+pswd
  5. post /login 成功
  6. 重新转送 /login/oauth/authorize?client_id=xxx&redirect_uri=https://sso.eagleplan.fun/oauth/callback/gitea&response_type=code
  7. 从gitea回到sso并携带会code
  8. 用临时code去获取 access_token
  9. （图中无）使用 access_token 从gitea获取用户信息 实际系统中，是api模块在后台传递，前台看不出

用户登录流程图

sequenceDiagram

participant bussness1 as 业务系统1
participant sso as sso
participant oauth(qq/wechat)

bussness1 ->> bussness1: 进入业务系统（比如直播间）
bussness1 ->> bussness1: 提示需要登录，转送sso进行鉴权
bussness1->>sso: 302 GET /oauth/authorize?redirect_url=bussness1/oauth/back
sso->>sso: not_logined -> redirect_url=bussness1并302到/login
sso->>sso: POST /login 完成登录
sso-->>bussness1: 302 GET /oauth/back?code=AAAA
bussness1->>sso: GET access_token?code=AAAA
sso-->>bussness1: code_ok -> access_token=BBBB
bussness1->>sso: /profile?access_token=BBBB

sso登录外部系统

sso登录qq/wechat实际上是同理的，只是，外部系统一般比较规范，相对实现的接口也会更复杂一些。

此处，业务系统的token获取和设置，相对简化了很多。

sequenceDiagram

participant bussness1 as 业务系统1
participant sso as sso
participant oauth as (qq/wechat)

bussness1 ->> bussness1: 进入业务系统（比如直播间）
bussness1 ->> bussness1: 提示需要登录，转送sso进行鉴权
bussness1->>sso: 302 GET /oauth/authorize?redirect_url=bussness1/oauth/back&client_id=bussness1
sso->>sso: not_logined -> redirect_url=bussness1并302到/login
sso->>sso: POST /login 完成登录
sso->>oauth: 302 GET /oauth/authorize?client_id=sso
oauth-->>oauth: /quick_auth
oauth-->>sso: 302 GET /oauth/back?code=CCCC
sso->>oauth: GET access_token?code=CCCC
oauth-->>sso: code_ok -> access_token=DDDD
sso->>oauth: /userinfo?access_token=DDDD
sso-->>sso: 记录access_token
oauth-->>sso: {name:'John',age:3,email:'s',avator:'x.png'}
sso-->>sso: new token EEEE
sso-->bussness1: 302 GET /oauth/back?token=EEEE
bussness1-->>bussness1: localStorage.token=token

建设后可以达到的效果

graph TD;
  live[应用产品线]
  sso[SSO单点登录]
  qq[qq oauth]
  wechat[微信oauth]

live --> sso
sso --> live

sso --> qq
sso --> wechat
qq --> sso
wechat --> sso

SSO作为系统中的单点登录，能够同时提供多种登录方式：

  • user/pswd登录
  • 作为客户端向第三方qq/微信等请求并完成oauth登录

登录后的用户中心

infoq 用户中心示例

image-20220327132928186