React应用实现SAML认证时如何捕获HTTP POST中的SAML响应

核心原因 #

你当前的对接流程本身不符合SAML协议的常规落地逻辑：Azure AD完成认证后返回的是application/x-www-form-urlencoded类型的原生HTTP POST请求，这类请求直接打到前端React静态页地址时，浏览器会直接触发页面跳转重载，运行在页面上下文里的React JS代码根本没有权限、也没有时机读取这个POST请求的payload内容，和你前端代码怎么写没有关系。

正确落地步骤 #

• 不要将SAML回调地址（ACS，Assertion Consumer Service）配置为前端React路由地址。纯客户端运行的单页应用没有解析原生POST请求体的能力，也不适合处理SAML校验逻辑。
• 将ACS地址配置为你服务端的接口路径，例如/api/auth/saml/acs。由后端服务接收Azure AD POST过来的SAML响应，完成XML签名校验、用户身份映射、登录态签发（比如写入HttpOnly Cookie、生成业务侧登录token）。
• 后端完成所有SAML校验和登录态逻辑后，返回302重定向响应，跳转到前端React应用的登录完成路由。需要同步给前端的非敏感用户信息可以拼接到重定向URL的参数中，敏感登录态直接通过域名下的Cookie透传即可。
• React侧在对应的登录回调路由组件中，直接读取当前域名下的有效Cookie、或者URL携带的参数完成登录态初始化，跳转到应用内对应页面即可，完全不需要接触原始SAML POST的payload。

注意：SAML响应的签名校验必须在服务端完成，绝对不能把原始SAML响应直接透传给前端解析。前端环境无法安全存储IDP公钥证书，跳过服务端校验会直接引发登录伪造的高危安全漏洞。

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