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

Question

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

使用此命令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，例如 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页面。

Answer 2

Identity Server 和 OIDC 也有类似的问题，但我不确定设置是否完全相同。对我们来说，生成的登录/身份验证页面位于：

（项目）> 区域 > 身份 > 页面 > 帐户

这是一个截图，您也可以尝试在项目中搜索一些文件名。

然而，尽管使用了 React 模板，并且在 React 中做了所有事情，但身份验证组件是 MVC（或 Razor 或其他东西，不记得了）。因此，我们最终构建了自己的客户端页面，设置路由并构建自定义控制器操作以与身份服务器对话。我们最终让它发挥了作用，但老实说，这比原本应该的麻烦多了。