如何配置 Blazor 客户端以使用外部 IdentityServer4 服务器执行身份验证答案

【问题标题】：How to configure Blazor client to perform authentication using external IdentityServer4 server如何配置 Blazor 客户端以使用外部 IdentityServer4 服务器执行身份验证
【发布时间】：2020-02-09 01:05:57
【问题描述】：

我们正在开发一种新产品，该产品由 Blazor 服务器（针对 .NET Core 3 并使用 ElectronNET.API 5.22.14）和 Blazor 客户端（针对 .NET Standard 2.1）组成。

我们不想在 Blazor 服务器中托管身份服务器，因为我们有一个现有的 IdentityServer4 服务器。

是否可以在通过 IdentityServer4 服务器进行身份验证的 Blazor 客户端中显示带有登录/注册选项的登录页面（例如，身份服务器中的本地数据库登录）？ - 我在网上找到的所有示例都将身份服务器托管在 Blazor 服务器中。

在线文档中是否有示例或部分概述了 Blazor 客户端的正确设置？例如。如何配置Startup.cs。

【问题讨论】：

您找到解决方案了吗？我也有同样的情况。

标签： identityserver4 blazor-client-side

【解决方案1】：

这可能有效。我正在创建一个没有任何外部插件的简单令牌传递模式。我敢肯定有某种方式它不会那么好，但它可以在没有外部依赖的情况下完成工作。不过，这种方法看起来很可靠。

https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/

【讨论】：

【解决方案2】：

这是完全可能的。对于 Blazor Web 程序集（前端托管模式），我们可以执行以下操作。

假设我们在 https://localhost:5001 上运行 IdentityServer 4，在 https://localhost:5003 上运行带有 Blazor Web Assembly 的客户端 SPA 应用程序

让我们为 Identity Server 配置一个新客户端。

new Client
{
    ClientId = "spa",
    ClientUri = "https://localhost:5003",
    AllowedGrantTypes = GrantTypes.Code,

    RequireClientSecret = false, // for auth code flow there is no secret required as it couldn't be securely stored in the front-end anyway

    // where to redirect to after login
    RedirectUris = { "https://localhost:5003/authentication/login-callback" },
    
    // where to redirect to after logout
    PostLogoutRedirectUris = { "https://localhost:5003/signout-callback-oidc" },

    // CORS
    AllowedCorsOrigins =     { "https://localhost:5003" },

    AllowedScopes = new List<string>
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        "api1"
    }
}

对于 Blazor 应用，假设我们创建了一个默认应用并选择了身份验证 Store user accounts in-app，以便它为登录功能创建样板并添加包

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="3.2.1" />

现在我们必须在 Program.cs 中配置 Blazor 客户端应用的 OpenId Connect 设置。

请注意，默认情况下可以使用builder.Configuration.Bind("Local", options.ProviderOptions); 读取 appsettings.json，为简单起见，我们可以手动硬编码设置。

builder.Services.AddOidcAuthentication(
    options =>
    {
        //let's hardcode the values for now. We can enable reading from settings later.
        //builder.Configuration.Bind("Local", options.ProviderOptions);

        options.ProviderOptions.Authority = "https://localhost:5001";
        options.ProviderOptions.ClientId = "spa";
        options.ProviderOptions.DefaultScopes.Add("openid");
        options.ProviderOptions.DefaultScopes.Add("profile");
        options.ProviderOptions.DefaultScopes.Add("api1");
        options.ProviderOptions.PostLogoutRedirectUri = "https://localhost:5003/counter";
        options.ProviderOptions.RedirectUri = "https://localhost:5003/authentication/login-callback";
        options.ProviderOptions.ResponseType = "code";
    });

该配置应该足以让 blazor 应用重定向到 Identity Server 以询问凭据并在用户通过身份验证后存储令牌。

【讨论】：