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

Question

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

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

在 Pages 文件夹中我们有Authentication.razorComponent ：

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

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

Authentication.razor组件间接调用 IdentityServer4。

如何找到 Identity Server 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（例如https://localhost:5001/Identity/Account/Register?returnUrl=%2Fauthentication%2Flogin：）时，出现错误：

抱歉，该地址没有任何内容。

我不知道为什么。

Answer 1

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

根据文档，您可以通过设置组件的参数将渲染片段更改为您想要的任何内容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>