如何使用Angular个人用户帐户身份验证自定义ASP.NET Core Web应用程序的登录页面? [英] How to customize the login page of ASP.NET Core web application with Angular Individual user account authentication?

问题描述

(环境:Visual Studio 2019 v16.4.3)

(Environment: Visual Studio 2019 v16.4.3)

我使用以下选项创建一个新的"ASP.NET Core Web应用程序"

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

1. ASP.Net Core 3.1
2. 角度
3. 个人用户帐户的身份验证(只有在应用内存储用户帐户"选项)

在Visual Studio中运行该应用程序，然后在浏览器中单击登录"将转到下一页. https://localhost:44343/Identity/Account/Login?returnUrl =％2Fauthentication ％2Flogin

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

我在Angular或ASP.NET Core代码中找不到该页面.如何自定义登录页面?

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

推荐答案

模板使用ASP.NET Core Identity进行身份验证和存储用户，并与IdentityServer结合使用，以实现Open ID Connect.因此您需要

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

如果使用的是Visual Studio:

1. 在解决方案资源管理器中，右键单击project > Add > New Scaffolded Item

2. 从添加脚手架"对话框的左窗格中，选择Identity > Add.

选择要覆盖的文件，例如，与登录相关的帐户:Account \ Login.

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

如果使用.net核心CLI

1. 使用模板创建项目:dotnet new angular --auth Individual并构建项目.

如果您以前尚未安装ASP.NET Core脚手架，请在vs代码中将其安装在终端中:

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

向项目添加所需的NuGet包引用:

Add required NuGet package references to the project :

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

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

您可以列出可以用dotnet aspnet-codegenerator identity --listFiles

使用所需的选项运行身份支架，使用--files支架特定文件，为数据库上下文使用正确的完全限定名称:

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"

如果在未指定--files标志或--useDefaultUI标志的情况下运行Identity scaffolder，则将在您的项目中创建所有可用的Identity UI页面.

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.

现在，如果要修改登录UI，则可以在your project --> Areas-->Identity -->Pages-->Account -->Login.cshtml页面中修改相关页面.

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

这篇关于如何使用Angular个人用户帐户身份验证自定义ASP.NET Core Web应用程序的登录页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！