如何在注册于Azure Active Directory的ASP.NET Core+React Web应用中实现登录后重定向至原URL

这个问题的核心在于React哈希路由的#部分不会被发送到服务器，导致服务器端无法获取完整的原始URL，所以需要前端和后端配合来保存并恢复原始路径。以下是具体的实现步骤：

1. 服务器端（ASP.NET Core）配置调整 #

如果使用ASP.NET Core的OpenID Connect中间件处理Azure AD登录，需要确保中间件能正确传递和处理重定向状态：

配置OIDC中间件 #

在Program.cs中更新认证配置，添加自定义逻辑来接收前端传递的重定向路径：

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddOpenIdConnect(options =>
{
    options.ClientId = builder.Configuration["AzureAd:ClientId"];
    options.ClientSecret = builder.Configuration["AzureAd:ClientSecret"];
    options.Authority = $"https://login.microsoftonline.com/{builder.Configuration["AzureAd:TenantId"]}/v2.0";
    options.ResponseType = OpenIdConnectResponseType.Code;
    options.Scope.Add("user.read");
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.SaveTokens = true;
    options.UseTokenLifetime = true;
    // 确保回调路径和Azure AD应用注册中的重定向URI一致
    options.CallbackPath = "/signin-oidc";

    // 重定向到Azure AD时，将前端传递的重定向URL存入state
    options.OnRedirectToIdentityProvider = context =>
    {
        if (context.HttpContext.Request.Query.TryGetValue("redirectUrl", out var redirectUrl))
        {
            // 编码后存入state，避免特殊字符问题
            context.ProtocolMessage.State = Uri.EscapeDataString(redirectUrl);
        }
        return Task.CompletedTask;
    };

    // 登录回调后，重定向到前端传递的原始URL
    options.OnAuthorizationCodeReceived = context =>
    {
        if (!string.IsNullOrEmpty(context.ProtocolMessage.State))
        {
            var redirectUrl = Uri.UnescapeDataString(context.ProtocolMessage.State);
            context.Response.Redirect(redirectUrl);
            context.HandleResponse();
        }
        return Task.CompletedTask;
    };
});

// 确保启用认证中间件
app.UseAuthentication();
app.UseAuthorization();

Azure AD应用注册验证 #

确保应用注册中的重定向URI包含你配置的CallbackPath（比如https://myapp.azurewebsites.net/signin-oidc），同时删除不需要的URI避免冲突。

2. 前端（React）逻辑处理 #

前端需要在未登录时保存当前路径，登录完成后恢复路径：

路由守卫中保存原始路径 #

使用React Router的私有路由组件，当用户未登录时保存当前完整URL到localStorage：

import { Navigate, useLocation } from 'react-router-dom';

const PrivateRoute = ({ children }) => {
    // 根据实际情况判断用户是否已登录（比如检查token或cookie）
    const isAuthenticated = !!localStorage.getItem('accessToken');
    const location = useLocation();

    if (!isAuthenticated) {
        // 保存当前完整URL（包括哈希部分）
        localStorage.setItem('redirectPath', window.location.href);
        // 跳转到后端登录端点，传递保存的路径
        return <Navigate to={`/login?redirectUrl=${encodeURIComponent(window.location.href)}`} replace />;
    }

    return children;
};

export default PrivateRoute;

登录完成后恢复路径 #

在React应用的入口组件（比如App.jsx）中，检查localStorage中的重定向路径，登录完成后自动跳转：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
    const navigate = useNavigate();

    useEffect(() => {
        const redirectPath = localStorage.getItem('redirectPath');
        if (redirectPath) {
            // 提取哈希路由部分（React Router使用的路径）
            const hashRoute = redirectPath.split('#')[1] || '/';
            // 跳转到原始路由
            navigate(`/${hashRoute}`);
            // 清除保存的路径，避免重复跳转
            localStorage.removeItem('redirectPath');
        }
    }, [navigate]);

    return (
        <div className="app">
            {/* 你的应用路由和组件 */}
        </div>
    );
}

export default App;

登录触发逻辑 #

在登录页面或按钮中，直接跳转到后端的登录端点，确保传递redirectUrl参数：

const handleLogin = () => {
    const redirectUrl = localStorage.getItem('redirectPath') || window.location.origin;
    window.location.href = `/Account/Login?redirectUrl=${encodeURIComponent(redirectUrl)}`;
};

3. 特殊情况：使用Azure App Service Easy Auth #

如果你使用的是App Service内置的Easy Auth（即.auth/login/aad/callback），可以按以下方式调整：

• 在App Service的认证设置中，将“登录后重定向URL”设置为你的应用根路径（比如https://myapp.azurewebsites.net/）。
• 前端逻辑保持上述的localStorage保存和恢复路径的代码即可，因为Easy Auth登录后会回到根路径，前端再自行跳转到原始哈希路由。

这样配置后，用户访问带哈希的链接时，会先保存路径，登录完成后自动跳转到原始页面，而不是首页。

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