Angular应用使用Duende BFF登录后重定向至BFF的解决方法

以下是关键的配置和代码调整步骤：

1. 修正Duende Identity Server的客户端重定向配置 #

在Duende IS的客户端配置中，必须将Angular应用的合法路径添加到RedirectUris和PostLogoutRedirectUris列表，确保身份服务认可该重定向目标：

new Client
{
    ClientId = "bff-client",
    ClientName = "BFF Client",
    AllowedGrantTypes = GrantTypes.Code,
    ClientSecrets = { new Secret("your-client-secret".Sha256()) },
    
    // 允许Angular应用的根路径或回调路径作为重定向目标
    RedirectUris = { "https://your-angular-app.com/", "https://your-angular-app.com/login-callback" },
    PostLogoutRedirectUris = { "https://your-angular-app.com/logout-callback" },
    
    AllowedScopes = { "openid", "profile", "your-api-scope" },
    RequirePkce = true,
    RequireClientSecret = false,
    AllowOfflineAccess = true
}

2. Angular触发登录时传递当前页面路径 #

Angular发起登录请求时，需将当前路由路径作为returnUrl参数传递给BFF的登录端点，让BFF知道登录完成后要跳转回哪里：

login() {
    const currentRoute = this.router.url;
    // 编码路径避免特殊字符导致解析错误
    const encodedReturnUrl = encodeURIComponent(currentRoute);
    window.location.href = `https://your-bff-domain.com/login?returnUrl=${encodedReturnUrl}`;
}

3. 配置BFF的登录回调逻辑 #

在BFF后端代码中，确保登录端点正确接收并保留returnUrl，在认证完成后重定向到该地址。以Duende BFF NuGet包的配置为例：

services.AddBff()
    .AddRemoteApis();

services.AddAuthentication(options =>
{
    options.DefaultScheme = "cookie";
    options.DefaultChallengeScheme = "oidc";
})
.AddCookie("cookie", options =>
{
    options.Cookie.Name = "__Host-bff";
    options.Cookie.SameSite = SameSiteMode.Strict;
})
.AddOpenIdConnect("oidc", options =>
{
    options.Authority = "https://your-duende-is-domain";
    options.ClientId = "bff-client";
    options.ClientSecret = "your-client-secret";
    options.ResponseType = "code";
    options.Scope.Clear();
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.Scope.Add("your-api-scope");
    options.SaveTokens = true;
    
    // 处理登录成功后的重定向，使用传入的returnUrl
    options.Events = new OpenIdConnectEvents
    {
        OnAuthorizationCodeReceived = context =>
        {
            var returnUrl = context.Request.Query["returnUrl"].FirstOrDefault();
            if (!string.IsNullOrEmpty(returnUrl))
            {
                // 验证returnUrl属于允许的Angular域名（可选但更安全）
                if (returnUrl.StartsWith("/") || returnUrl.StartsWith("https://your-angular-app.com/"))
                {
                    context.Properties.RedirectUri = returnUrl;
                }
            }
            return Task.CompletedTask;
        }
    };
});

4. Angular路由处理登录回调（可选） #

如果使用独立的回调路径（如/login-callback），需在Angular路由中配置对应组件，并在组件内完成最终的页面跳转：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login-callback', component: LoginCallbackComponent },
    // 其他路由配置
];

在LoginCallbackComponent中恢复之前的页面路径：

export class LoginCallbackComponent implements OnInit {
    constructor(private router: Router) {}

    ngOnInit(): void {
        const queryParams = this.router.parseUrl(window.location.href).queryParams;
        const returnUrl = queryParams['returnUrl'] || '/';
        this.router.navigateByUrl(decodeURIComponent(returnUrl));
    }
}

关键注意事项 #

• 必须确保returnUrl指向的域名在Duende IS的RedirectUris列表中，否则身份服务会拒绝重定向。
• 始终对returnUrl进行编码/解码，避免路径中的特殊字符引发解析错误。
• BFF的Cookie配置需设置正确的SameSite和Domain属性，避免跨域Cookie问题导致的登录状态丢失。

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