How to Customize IdentityServer views in Blazor?

Question

I Have Project with Blazor Web assembly and Asp.Net Core Hosted with Individual user account (Authentication). but I have two problems. First I want Customization Register and log in View (relate to identity server 4), but I can't find views. in the server project (blazor server) in _LoginPartial.cshtml view, we can see many pages: asp-area="Identity" asp-page="/Account/Manage/Index" andasp-area="Identity" asp-page="/Account/Logout" , asp-area="Identity" asp-page="/Account/Register" and so on ... but Identity folder is empty ! also in blazor client we have LoginDisplay.razor page :

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

and in Pages folder we have Authentication.razor Component :

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

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

Authentication.razor Component calling IdentityServer4 indirectly.

How can I find identity server 4 views and change it?

and the second problem is when I want to use a custom identity models in startup file blazor server.

default code is :

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

and when i change to:

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

when I run project and click on login or register buttons (Authentication.razor) call IdentityServer (ex:https://localhost:5001/Identity/Account/Register?returnUrl=%2Fauthentication%2Flogin), take me an error :

Sorry, there's nothing at this address.

and I don't no why.

Answer 1

I just know how to custom the texts "You are logged out", "checking login state" and so on.

According to the doc, you can change the render fragment to anything you want by set the parameter of RemoteAuthenticatorView component.

There is 9 different render fragment you can customize:

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

For example, if you want to change the text while you are logging in, just do this:

// 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>

Answer 2

In Server project, Add New Scaffolded Item dialog, select Identity > Add.