Blazor Wasm多OpenID认证提供商集成问题求助

你的现有代码存在核心问题：两次调用AddOidcAuthentication会覆盖前一次的配置——默认情况下该方法注册的是名为oidc的认证方案，第二次调用会直接替换这个方案的参数，最终只有最后配置的Microsoft登录能生效。要实现多提供商登录，需要为每个身份提供商指定独立的认证方案名称，并在UI中指定对应方案触发登录。

步骤1：修改Program.cs中的认证配置 #

为Google和Microsoft分别注册不同的OIDC认证方案，配置各自的参数：

using BlazorOidcAD;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

public class Program
{
    private static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("#app");
        builder.RootComponents.Add<HeadOutlet>("head::after");
        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        // 注册Google OIDC认证方案
        builder.Services.AddOidcAuthentication("Google", options =>
        {
            options.ProviderOptions.Authority = "https://accounts.google.com/";
            options.ProviderOptions.ClientId = "你的Google客户端ID";
            // 推荐使用Authorization Code Flow with PKCE，更安全
            options.ProviderOptions.ResponseType = "code";
            options.ProviderOptions.ResponseMode = "query";
            options.ProviderOptions.DefaultScopes.Add("openid");
            options.ProviderOptions.DefaultScopes.Add("profile");
            options.ProviderOptions.DefaultScopes.Add("email");
            // 重定向URI需与Google开发者控制台配置一致
            options.ProviderOptions.RedirectUri = $"{builder.HostEnvironment.BaseAddress}authentication/login-callback";
            options.ProviderOptions.PostLogoutRedirectUri = $"{builder.HostEnvironment.BaseAddress}authentication/logout-callback";
        });

        // 注册Microsoft OIDC认证方案
        builder.Services.AddOidcAuthentication("Microsoft", options =>
        {
            // 通用租户允许所有Microsoft账户登录，如需指定租户替换为租户ID
            options.ProviderOptions.Authority = "https://login.microsoftonline.com/common/v2.0/";
            options.ProviderOptions.ClientId = "你的Microsoft客户端ID";
            options.ProviderOptions.ResponseType = "code";
            options.ProviderOptions.DefaultScopes.Add("openid");
            options.ProviderOptions.DefaultScopes.Add("profile");
            options.ProviderOptions.DefaultScopes.Add("email");
            // 重定向URI需与Azure Portal配置一致
            options.ProviderOptions.RedirectUri = $"{builder.HostEnvironment.BaseAddress}authentication/login-callback";
            options.ProviderOptions.PostLogoutRedirectUri = $"{builder.HostEnvironment.BaseAddress}authentication/logout-callback";
        });

        await builder.Build().RunAsync();
    }
}

步骤2：在UI中添加登录按钮并指定对应方案 #

创建登录组件（如Login.razor），注入IAuthenticationService，通过指定认证方案触发对应提供商的登录流程：

@inject IAuthenticationService AuthenticationService

<div class="login-buttons">
    <button class="btn-google" @onclick="LoginWithGoogle">Google 登录</button>
    <button class="btn-microsoft" @onclick="LoginWithMicrosoft">Microsoft 登录</button>
</div>

@code {
    private async Task LoginWithGoogle()
    {
        await AuthenticationService.SignInAsync("Google", new AuthenticationProperties
        {
            RedirectUri = "/" // 登录成功后跳转的页面
        });
    }

    private async Task LoginWithMicrosoft()
    {
        await AuthenticationService.SignInAsync("Microsoft", new AuthenticationProperties
        {
            RedirectUri = "/"
        });
    }
}

关键注意事项 #

• 重定向URI配置：需在Google Cloud Console（API和服务 → 凭据）以及Azure Portal（应用注册 → 身份验证）中，将https://你的应用域名/authentication/login-callback添加到允许的重定向URI列表中。
• 认证方案名称：必须保证两个方案名称（"Google"和"Microsoft"）唯一，且与UI中调用SignInAsync时传入的名称一致。
• 安全规范：优先使用Authorization Code Flow with PKCE（即ResponseType = "code"），避免使用Implicit Flow（token id_token），后者安全性较低。

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