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

How to Customize IdentityServer views in Blazor?

我有项目使用 Blazor Web 程序集和 Asp.Net 使用个人用户帐户(身份验证)托管的核心。 但我有两个问题。首先我想自定义注册并登录View(涉及到identity server 4),但是找不到view。在 _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" 等等......但身份文件夹是空的!同样在 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) 时,给我一个错误:

Sorry, there's nothing at this address.

我不知道为什么。

在服务器项目中,添加新脚手架项对话框,select标识 > 添加。

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

根据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>