如何在 Blazor 中自定义 IdentityServer 视图？

Question

我有使用个人用户帐户（身份验证）托管的 Blazor Web 程序集和 Asp.Net Core 项目。 但我有两个问题。首先我想要自定义注册并登录视图（与身份服务器 4 相关），但我找不到视图。在_LoginPartial.cshtml 视图的服务器项目（blazor 服务器）中，我们可以看到很多页面：asp-area="Identity" asp-page="/Account/Manage/Index" 和asp-area="Identity" asp-page="/Account/Logout" 、asp-area="Identity" asp-page="/Account/Register" 等等...但是Identity 文件夹是空的！同样在 blazor 客户端中，我们有 LoginDisplay.razor 页面：

<NotAuthorized>
    <a href="authentication/register">Register</a>
    <a href="authentication/login">Log in</a>
</NotAuthorized>

在 Pages 文件夹中，我们有 Authentication.razor 组件：

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string Action { get; set; }
}

Authentication.razor 组件间接调用 IdentityServer4。

如何找到身份服务器 4 个视图并进行更改？

第二个问题是当我想在启动文件 blazor 服务器中使用自定义身份模型时。

默认代码是：

services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
                .AddEntityFrameworkStores<ApplicationDbContext>();

当我更改为：

services.AddIdentity<ApplicationUser,Role>(options => options.SignIn.RequireConfirmedAccount = true)
                .AddEntityFrameworkStores<ApplicationDbContext>();

当我运行项目并单击登录或注册按钮 (Authentication.razor) 调用 IdentityServer (ex:https://localhost:5001/Identity/Account/Register?returnUrl=%2Fauthentication%2Flogin) 时，给我一个错误：

抱歉，这个地址什么都没有。

我不知道为什么。

Answer 1

在 Server 项目的 Add New Scaffolded Item 对话框中，选择 Identity > Add。

Answer 2

我只知道如何自定义“您已注销”、“检查登录状态”等文本。

根据the doc，您可以通过设置RemoteAuthenticatorView组件的参数将渲染片段更改为您想要的任何内容。

您可以自定义 9 种不同的渲染片段：

1. CompletingLoggingIn
2. CompletingLogOut
3. LoggingIn
4. LogInFailed
5. LogOut
6. LogOutFailed
7. LogOutSucceeded
8. Registering
9. UserProfile

例如，如果您想在登录时更改文本，只需这样做：

// BlazorApp.Client.Pages.Authentication.razor

@page "/authentication/{Action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" >
    <LoggingIn>
        I'm Logging in!!          // here
        <img src="/loading.gif /> // and more!
    </LoggingIn>
</RemoteAuthenticatorView>