更新.NET核心身份登录页的默认前端设计

Question

我正在开发一个带有身份登录的.NET核心应用程序，它在/ Identity /Account/Login页面中提供了一个引导表单。

我已经在www.root/lib文件夹中导入了物化CSS 文件，并希望使用物化css更改登录页面的设计。

问题是项目结构中不存在/Identity/Account/Login页面。那我该如何解决这个问题呢？

Answer 1

一种方法是将脚手架登录页面添加到您的项目结构中。这样你就可以做任何你想做的改变了。您必须执行以下操作(从我提供的链接)：

• 在解决方案资源管理器中，右键单击项目>添加>新建支架项目。
• 在Add Scaffold对话框的左窗格中，选择Identity > ADD。
• 在ADD Identity对话框中，选择您想要的选项(在您的例子中是Login)。
  • 选择现有的布局页面，否则布局文件将被不正确的标记覆盖。当选择现有的_Layout.cshtml文件时，它是而不是覆盖。

​

例如，~/Pages/Shared/_Layout.cshtml用于Razor页面，~/Views/Shared/_Layout.cshtml用于MVC项目

• 若要使用现有数据上下文，请至少选择一个要重写的文件。必须至少选择一个文件才能添加数据上下文。
  • 选择数据上下文类。
  • 选择添加。

​

• 若要创建新的用户上下文并可能为标识创建自定义用户类，请执行以下操作：
  • 选择+按钮来创建一个新的数据上下文类。
  • 选择添加。

​

注意:如果要创建新的用户上下文，则不必选择要覆盖的文件。

另一种方法是查看登录页源代码并查看元素的ids和类。然后，您可以通过编写比默认CSS更具体的CSS来覆盖默认CSS。

Answer 2

在Asp.net Core2.1中，标识UI代码不包含在项目结构中。

您可以在StartUp文件->方法ConfigureServices中看到这一行代码。

services.AddDefaultIdentity<IdentityUser>()
            .AddDefaultUI(UIFramework.Bootstrap4)

如果要自定义UI，则必须通过以下两种方式生成这组代码：

1. 使用Visual :右键单击项目->，添加->、新的散列项、->标识、->并选择要生成的内容。
2. 使用CLI:从项目目录中运行以下命令行

dotnet aspnet-codegenerator identity -dc WebApplication.Data.ApplicationDbContext

Answer 3

您看到的默认Identity页面是从项目中的这个dll幕后生成的：

Microsoft.AspNetCore.Identity.UI.Views.V3.dll

--就在这里--

Dependencies >> SDK >> Microsoft.AspNetCore.App(2.2.0)。

按照@Marko Papic一步一步的指令生成Identity页面(或部分)，您希望用您的材料css覆盖这些页面。在这些(现在是可查看的页面)中包含了对Identity类、方法、属性等的所有逻辑和命名引用，您需要构建自己的自定义页面。

此外，您不需要坚持默认的Areas/Identity/Pages/Account...文件位置或剃刀语法。如果愿意，您可以创建您自己的MVC版本，或者以您喜欢的任何文件结构/表示形式创建vue.js。

我将一个项目保持在覆盖所有Identity UI页面的一侧(复选框Override all files作为一个方便的参考，在这里我可以带来我需要的东西。

@Marko Papic给了你一个很好的答案，我建议你选择他的答案作为正确的答案。