React结合.NET7集成Okta SAML遇跳转无限循环问题求助

核心问题原因 #

• React端调用/auth/check时未携带后端SAML认证生成的会话Cookie，导致[Authorize]判定未认证，返回null触发重定向，形成循环。
• 登录重定向时未传递React前端的目标URL作为RelayState，导致认证完成后无法正确回到前端页面，重复触发登录检测。
• 前端同时使用JWT和后端Cookie会话，认证逻辑混淆。

分步解决方案 #

1. 修正React端的登录重定向与API调用配置 #

• 发起登录时传递当前前端URL作为RelayState，确保认证后跳转回正确页面：

const RedirectToLogin = () => {
    // 把当前React页面的URL作为relayState传递给后端登录接口
    const currentUrl = window.location.href;
    const encodedUrl = encodeURIComponent(currentUrl);
    window.location.replace(`https://localhost:5001/auth/login?relayState=${encodedUrl}`);
}

• 配置Axios携带Cookie（因为后端SAML会话基于Cookie），确保/auth/check能识别已认证会话：

// 在axiosInterceptorClient初始化时添加配置
axiosInterceptorClient.defaults.withCredentials = true;

• 调整useEffect逻辑，避免不必要的重定向：

useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const jwtToken = urlParams.get('jwt');

    if (jwtToken) {
        localStorage.setItem('token', jwtToken);
        // 清除URL中的jwt参数，避免刷新页面重复处理
        window.history.replaceState({}, document.title, window.location.pathname);
    }

    // 先检查localStorage中的JWT，再调用check接口
    const storedToken = localStorage.getItem('token');
    if (storedToken) {
        axiosInterceptorClient.get("/auth/check")
            .then((response) => {
                if (response.data?.User) {
                    setEmail(response.data.User);
                    setLoading(false);
                } else {
                    RedirectToLogin();
                }
            })
            .catch(() => {
                RedirectToLogin();
            });
    } else {
        RedirectToLogin();
    }
}, []);

2. 修正后端RelayState处理逻辑 #

• 确保/auth/login接口接收并传递RelayState到Okta的SAML请求中（假设使用Sustainsys.Saml2库）：

[HttpGet("login")]
public IActionResult Login(string relayState = null)
{
    var saml2AuthnRequest = new Saml2AuthnRequest(config);
    var binding = new Saml2RedirectBinding();
    var requestUrl = binding.Bind(saml2AuthnRequest, relayState ?? Url.Content("~/"));
    return Redirect(requestUrl.ToString());
}

• 修正AssertionConsumerService中的RelayState解析，确保跳回前端URL：

var relayStateQuery = binding.GetRelayStateQuery();
// 优先使用登录时传递的relayState， fallback到前端默认地址
var returnUrl = relayStateQuery.ContainsKey("relayState") 
    ? relayStateQuery["relayState"] 
    : "https://localhost:3000"; // 替换为你的React前端地址
return Redirect($"{returnUrl}?jwt={jwt}");

3. 统一认证策略（二选一） #

选项A：让API接口支持JWT认证（推荐SPA场景）

• 在后端添加JWT认证配置，同时保留SAML认证：

// Program.cs中添加JWT认证
builder.Services.AddAuthentication()
    .AddSaml2(options => { /* 你的SAML配置 */ })
    .AddJwtBearer(options => {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = "Issuer",
            ValidAudience = "Audience",
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes("YourSecretKey123456"))
        };
    });

// 为API控制器添加授权策略，支持两种认证方式
builder.Services.AddAuthorization(options => {
    options.DefaultPolicy = new AuthorizationPolicyBuilder()
        .AddAuthenticationSchemes(Saml2Defaults.Scheme, JwtBearerDefaults.AuthenticationScheme)
        .RequireAuthenticatedUser()
        .Build();
});

• React端调用API时在请求头携带JWT：

// axios拦截器添加JWT头
axiosInterceptorClient.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

选项B：依赖Cookie会话（适合前后端同域场景）

• 确保前后端处于同域，或者配置CORS允许携带Cookie：

// Program.cs配置CORS
builder.Services.AddCors(options => {
    options.AddPolicy("AllowReact", policy => {
        policy.WithOrigins("https://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 允许携带Cookie
    });
});

app.UseCors("AllowReact");

验证步骤 #

1. 启动后端和React前端。
2. 访问React页面，会重定向到Okta登录。
3. 登录完成后跳回React页面，URL携带JWT参数。
4. 前端存储JWT并调用/auth/check，成功获取用户信息，不再触发重定向。

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