How to customize the login page of ASP.NET Core web application with Angular Individual user account authentication?

Question

(Environment: Visual Studio 2019 v16.4.3)

I create a new "ASP.NET Core Web Application" with the following options

1. ASP.Net Core 3.1
2. Angular
3. Authentication of Individual User Account (with "Store user accounts in-app", the only option)

Running the application in Visual Studio and clicking Login in the browser will go to the following page. https://localhost:44343/Identity/Account/Login?returnUrl=%2Fauthentication%2Flogin

I cannot find the page in the Angular or ASP.NET Core code. How to customize the login page?

Answer 1

The template uses ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect. So that you need to Scaffold Identity in ASP.NET Core projects to modify the UI like login , register user ...

If using Visual Studio :

1. From Solution Explorer, right-click on the project > Add > New Scaffolded Item

2. From the left pane of the Add Scaffold dialog, select Identity > Add.

3. Choose Files to override ,For example , login related : Account\Login .

4. Select your data context class : ApplicationDbContext by default .
5. Click Add button.

If using .net core CLI

1. Create project using template : dotnet new angular --auth Individual and build the project .

2. If you have not previously installed the ASP.NET Core scaffolder, install it in terminal in vs code :

   dotnet tool install -g dotnet-aspnet-codegenerator

3. Add required NuGet package references to the project :

   dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer

4. You can list the files that can be scaffolded with dotnet aspnet-codegenerator identity --listFiles

5. Run the Identity scaffolder with the options you want , use --files to scaffold specific files ,use the correct fully qualified name for your DB context:

   dotnet aspnet-codegenerator identity -dc ProjectName.Data.ApplicationDbContext --files "Account.Register;Account.Login"

   If you run the Identity scaffolder without specifying the --files flag or the --useDefaultUI flag, all the available Identity UI pages will be created in your project.

Now if you want to modify the login UI , you can modify relevant page in your project --> Areas-->Identity -->Pages-->Account -->Login.cshtml page .