reactjs - 使用 .net 核心反应模板修改 oidc-client 的登录/登录 UI

Question

使用带有.net core 3.1的vscode或VS2019，我创建了带有身份验证个人的新项目

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

有什么方法可以更改或修改登录、注册或用户个人资料 UI 吗？

标签： reactjsasp.net-coreidentityserver4.net-core-3.1oidc-client

Answer 1

该模板使用 ASP.NET Core Identity 来验证和存储用户，并结合 IdentityServer 来实现 Open ID Connect。这样您就需要在 ASP.NET Core 项目中使用 Scaffold Identity来修改 UI，例如 login 、 register user ...

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

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

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