使用 .net core React 模板修改 oidc-client 的登录/登录 UI

Question

使用 vscode 或 VS2019 与 .net core 3.1，我使用身份验证人员创建了新项目

使用此命令dotnet new react --auth Individual 需要更改登录屏幕 UI 我找不到登录组件 UI 的任何 UI

有什么方法可以更改或修改登录、注册或用户配置文件 UI 吗？

Answer 1

该模板使用 ASP.NET Core Identity 来验证和存储用户，并结合 IdentityServer 来实现 Open ID Connect。因此，您需要在 ASP.NET Core 项目中使用 Scaffold Identity来修改 UI，例如登录、注册用户......

请尝试按照以下步骤操作：

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

2. 如果您之前尚未安装 ASP.NET Core 脚手架，请在 VS Code 的终端中安装它：

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

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