如何实现Django后端搭配React前端的ADFS SSO单点登录功能

当前你已经完成了Django后端和Azure AD ADFS的SSO适配，现在对接React前端做统一SSO，有两种成熟的落地方案，可根据你的项目实际情况选择：

• 前端主导鉴权：由React直接对接Azure AD完成登录流程，向后端传递令牌鉴权，更符合前后端分离架构的设计规范，后续扩展其他端应用也更灵活
• 后端主导鉴权：复用现有Django的SSO逻辑，前端仅配合做跳转适配，改动量最小，适合快速上线的场景

方案一：前端主导鉴权（推荐） #

• 首先在Azure AD的原有应用注册配置中，新增单页应用(SPA)类型的重定向URI，填写你React应用的登录回调地址，比如http://localhost:3000/sso/redirect，不需要额外新增应用注册
• React侧安装MSAL.js库，配置租户ID、应用客户端ID、重定向URI等参数，和你Django用的是同一个客户端ID即可
• 给React路由加全局鉴权拦截，未登录用户访问任意需要鉴权的页面时，直接调用MSAL的登录跳转方法，走Azure AD的SSO认证流程，登录成功后MSAL会返回id_token和access_token
• React向后端发接口请求时，统一在请求头携带Authorization: Bearer ${access_token}
• Django侧新增JWT校验中间件，校验前端传递的access_token的签名、签发方、受众信息，校验通过后直接关联对应用户权限，返回接口数据；可兼容原有Django的session鉴权逻辑，两种鉴权方式并行不冲突

方案二：后端主导鉴权（最小改动） #

• React侧新增全局响应拦截，检测到Django接口返回401未登录状态时，直接跳转到Django的ADFS登录入口地址，比如http://your-django-domain.com/adfs/login
• 修改Django侧的SSO配置，将登录成功后的默认重定向地址改为React前端的页面地址，而不是原有的Django模板页面
• 登录态传递可二选一：
  1. 若前后端部署在同根域名下，Django登录成功后将session cookie的domain设置为根域名，前端请求时自动携带，无需额外修改
  2. 若前后端跨域部署，Django登录成功后跳回React时将令牌放在URL参数中传递给前端，前端存储到localStorage后，后续请求统一携带在请求头中
• Django侧原有鉴权逻辑基本不用修改，仅需加对应的跨域CORS配置，允许前端域名携带凭证即可

踩坑提示：如果选择后端主导方案且前后端跨域，需要在React的请求库中开启withCredentials配置，同时Django的CORS配置要开启CORS_ALLOW_CREDENTIALS = True，否则cookie无法正常传递

内容的提问来源于stack exchange，提问作者josh