如何为ASP.NET 6.0的Duende IdentityServer自定义SPA登录页

1. 调整IdentityServer宿主配置 #

• 先添加CORS策略，放行SPA域名的跨域请求：

builder.Services.AddCors(options =>
{
    options.AddPolicy("SpaUiPolicy", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 替换为你的SPA实际访问地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

• 配置IdentityServer时替换默认页面路由：

builder.Services.AddIdentityServer(options =>
{
    // 自定义交互端点，后续会重定向到SPA页面
    options.UserInteraction.LoginUrl = "/api/account/login";
    options.UserInteraction.LogoutUrl = "/api/account/logout";
    options.UserInteraction.ErrorUrl = "/api/account/error";
})
// 保留你原有的IdentityServer配置，比如资源、客户端、AspNetIdentity集成等
.AddInMemoryIdentityResources(Config.IdentityResources)
.AddInMemoryApiScopes(Config.ApiScopes)
.AddInMemoryClients(Config.Clients)
.AddAspNetIdentity<IdentityUser>();

• 调整中间件顺序，CORS要放在IdentityServer之前：

app.UseCors("SpaUiPolicy");
app.UseIdentityServer();
// 若你把SPA打包后托管在IdentityServer同域名下，添加以下配置
// app.UseStaticFiles();
// app.MapFallbackToFile("index.html");

2. 实现自定义跳转接口 #

新增AccountController处理登录跳转逻辑：

[ApiController]
[Route("api/account")]
public class AccountController : ControllerBase
{
    private readonly IIdentityServerInteractionService _interaction;

    public AccountController(IIdentityServerInteractionService interaction)
    {
        _interaction = interaction;
    }

    [HttpGet("login")]
    public IActionResult Login(string returnUrl)
    {
        // 验证returnUrl为IdentityServer合法回调地址，避免开放重定向漏洞
        var isValid = _interaction.IsValidReturnUrl(returnUrl);
        if (!isValid) return BadRequest("非法回调地址");
        // 重定向到SPA登录页，把转义后的returnUrl作为参数传递
        return Redirect($"http://localhost:3000/login?returnUrl={Uri.EscapeDataString(returnUrl)}");
    }
}

3. 前后端登录校验逻辑实现 #

• 后端新增登录校验接口，验证账号密码后签发IdentityServer可识别的认证Cookie：

[HttpPost("login")]
public async Task<IActionResult> Login([FromBody] LoginRequest request)
{
    var user = await _userManager.FindByNameAsync(request.Username);
    if (user == null || !await _userManager.CheckPasswordAsync(user, request.Password))
    {
        return BadRequest("用户名或密码错误");
    }
    // 签发认证Cookie
    var authProps = new AuthenticationProperties
    {
        IsPersistent = request.RememberMe,
        ExpiresUtc = DateTimeOffset.UtcNow.AddDays(7)
    };
    await HttpContext.SignInAsync(user.Id, user.UserName, authProps);
    return Ok(new { returnUrl = request.ReturnUrl });
}

// 登录请求实体
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
    public bool RememberMe { get; set; }
    public string ReturnUrl { get; set; }
}

• SPA端逻辑：
  1. 登录页加载时从url参数中获取returnUrl存储
  2. 用户提交账号密码后调用上述登录校验接口
  3. 接口返回成功后，直接跳转到返回的returnUrl地址，IdentityServer会自动完成后续授权码发放、回调到客户端的完整流程

4. 客户端配置注意事项 #

• SPA客户端在IdentityServer的配置中要开启PKCE，关闭客户端秘钥校验：

new Client
{
    ClientId = "spa_client",
    ClientName = "自定义SPA客户端",
    AllowedGrantTypes = GrantTypes.Code,
    RequirePkce = true,
    RequireClientSecret = false,
    RedirectUris = { "http://localhost:3000/callback" }, // 替换为你的SPA回调地址
    PostLogoutRedirectUris = { "http://localhost:3000" },
    AllowedScopes = { "openid", "profile", "your_api_scope" }
}

• SPA端的OAuth库（React用oidc-client-ts、Angular用angular-oauth2-oidc）不需要修改授权端点，仍填写IdentityServer的/connect/authorize地址即可。

常见问题排查 #

• 若SPA和IdentityServer部署在不同域名，需要将认证Cookie的SameSite属性设为None，且必须启用HTTPS
• 禁止直接在SPA端调用/connect/token用密码模式获取令牌，必须走Authorization Code + PKCE流程才符合规范
• 所有跳转传递的returnUrl必须做合法性校验，避免被利用做钓鱼跳转

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