如何使用 Angular 个人用户帐户身份验证自定义 ASP.NET Core Web 应用程序的登录页面？

Question

（环境：Visual Studio 2019 v16.4.3）

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

1. ASP.NET 核心 3.1
2. 角
3. 个人用户账户认证（使用“在应用内存储用户账户”，唯一选项）

在 Visual Studio 中运行应用程序并在浏览器中单击登录将转到以下页面。 https://localhost:44343/Identity/Account/Login?returnUrl=%2Fauthentication%2Flogin

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

Answer 1

该模板使用 ASP.NET Core Identity 进行用户身份验证和存储，结合 IdentityServer 以实现 Open ID Connect。这样你就需要在 ASP.NET Core 项目中使用 Scaffold Identity来修改 UI，比如登录、注册用户...

如果使用 Visual Studio ：

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

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

3. 选择要覆盖的文件，例如与登录相关的：帐户\登录。

4. 选择您的数据上下文类：ApplicationDbContext默认情况下。
5. 单击Add按钮。

如果使用 .net 核心 CLI

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

2. 如果您之前没有安装过 ASP.NET Core 脚手架，请在终端的 vs 代码中安装：

   dotnet tool install -g dotnet-aspnet-codegenerator

3. 向项目添加所需的 NuGet 包引用：

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

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer

4. 您可以列出可以搭建脚手架的文件 dotnet aspnet-codegenerator identity --listFiles

5. 使用您想要的选项运行身份脚手架，--files用于构建特定文件，为您的数据库上下文使用正确的完全限定名称：

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

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

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