能否使用ReactJS与.NET 5/.NET Core实现基于SAML的SSO？

后端适配调整 #

你已经完成的.NET 5侧SAML认证逻辑不需要做大的改动，只需要补充以下适配逻辑即可对接前端：

• SAML认证通过后，不要直接返回服务端视图，生成短期有效的JWT身份令牌，将用户ID、角色、权限等身份信息加密进令牌，令牌有效期建议设置在60秒以内
• 修改SAML断言消费服务（ACS）的回调逻辑，认证完成后通过302重定向到React前端的回调路由，将生成的短期令牌作为query参数传递，示例重定向地址格式：https://你的前端域名/sso/callback?token=生成的短期令牌
• 新增/api/auth/validate接口，接收前端传递的令牌，校验有效性后返回明文用户信息，同时给前端写入HttpOnly属性的刷新令牌Cookie，降低短期令牌泄露风险
• 调整CORS配置，放开React前端域名的访问权限，允许请求携带Credentials

React前端实现逻辑 #

前端不需要处理任何SAML协议相关的解析逻辑，全部SAML交互都由后端和IdP完成，只需要做以下适配：

• 应用登录入口直接跳转后端SAML触发接口/api/auth/saml/login，不需要额外封装SAML请求逻辑
• 新增/sso/callback路由对应的回调组件，组件挂载时执行以下逻辑：
  • 从URL query参数中提取token字段，提取完成后立刻调用window.history.replaceState清除URL中的令牌参数，避免令牌留在浏览器历史记录中
  • 将令牌暂存在React Context、Redux等状态管理的内存中，不要存入localStorage、sessionStorage等持久化存储
  • 携带令牌调用后端/api/auth/validate接口，校验通过后拿到用户信息，初始化全局登录状态，跳转至应用首页
• 封装Axios/fetch全局请求拦截器，所有向后端发送的业务请求都在请求头中带上Authorization: Bearer ${你的令牌}，后端校验该请求头即可完成身份校验
• 全局路由守卫增加登录状态判断，未检测到有效令牌时直接跳转触发后端SAML登录流程

常见问题排查 #

• 若出现SAML认证后跳转前端的跨域问题，优先检查后端CORS配置是否放行前端域名，同时确认IdP侧配置的ACS回调地址和后端接收地址完全一致
• 退出登录逻辑需要同时清除前端内存中的身份状态，调用后端退出接口，由后端负责清除SAML会话和IdP侧的登录状态
• 如果需要支持多身份源登录，只需要在前端登录页增加不同登录源的跳转入口，分别对应后端不同身份源的触发接口即可

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