如何使用角度修改 asp.net 核心 WebAPI 的 asp.net 身份 UI

Posted 2023-03-27

【中文标题】如何使用角度修改 asp.net 核心 WebAPI 的 asp.net 身份 UI

【英文标题】：How to modify asp.net Identity UI for asp.net core WebAPI with angular

【发布时间】：2020-02-05 04:46:25

【问题描述】：

几天前我开始学习 .net core，作为开始，我创建了一个带有内置 angular 8 模板的 .netcore 项目。

它有几个内置的 Angular 页面，例如计数器和获取数据等，但所有与身份相关的页面（登录、注册等）都是从后端以纯 html 形式出现的。因此，“我的主要关注点是在该页面中进行一些 UI 更改”。

我发现标识已添加到类库中，因此在后端代码中不可见。为了对其进行更改，我需要首先通过脚手架重新生成将其添加到代码中。这将覆盖以前的库代码，并且可以根据需要进行修改。

所以我选择了添加新的脚手架项目 --> 身份。并在第一次尝试中选择“覆盖所有文件”，在第二次尝试中选择“account\login”和“account\register”，并为 dbcontext 选择 applicationdbcontext。但不幸的是，它们都不适合我。

当我尝试构建代码时出现此错误

Error   CS0246  The type or namespace name 'IWebHostEnvironment' could not be found (are you missing a using directive or an assembly reference?)   

C:\Users\MyUserName\source\repos\MyProjectName\obj\Debug\netcoreapp3.0\Razor\Pages\Shared\_Layout.cshtml.g.cs   448

我真的不知道 .g.cs 扩展名是什么，该页面上没有 import 语句以及一些我以前从未见过的奇怪代码。页面本身也没有显示任何错误/红色标记。

我这里主要是想实现两件事，

1) 完全使用 .net 核心应用程序作为 API，我想在 Angular 中为所有与登录相关的内容构建 UI，而不是从后端获取 HTML。

2) 在用户登录表单中添加更多字段。并且由于它是代码优先方法，因此最终会更改用户 DBSet（在这种情况下我不知道该怎么做）。

我没有添加任何代码示例，因为它是一种直截了当的问题/问题。要重现该问题，只需在 .net core 3.0 中创建一个项目并采用 Angular 8 模板。现在尝试在登录或注册页面上进行任何与 UI 相关的更改。

【问题讨论】：

嘿@Mohammed，如果您找到将 ui 与后端分开的解决方案，我也有同样的问题，而且真的很烦人。 （以角度制作登录和注册页面。）？

【参考方案1】：

令人讨厌的是，默认项目的布局中不需要的这个部分存在于那里。 尝试删除该导入，具有脚手架 UI 的默认应用程序将正常工作。

我的目的是为登录页面添加一些样式，这有点无聊。

我做了什么？ + 使用 Angular 和身份验证（个人用户帐户）模板（来自 Visual Studio 2019）创建了一个 ASP.NET Core Web 应用程序。 + 添加新的脚手架项目 -> Identity + 遵循ScaffoldingReadme.txt 文件中的步骤（某些步骤已经在正确的位置进行了 sn-ps，不需要任何添加） + 从_Layout.cshtml 页面中删除@inject IWebHostEnvironment Environment 和Microsoft.AspNetCore.Hosting 行； + 准备好看看结果 :)

【讨论】：

感谢您的回答 ;-) 这里有两件事：首先只需在 Microsoft.AspNetCore.Hosting 行之前添加一个 using 即可修复注入 IWebHostEnvironment 环境问题，无需删除它。其次，这会将这个网站分成两个不同的逻辑：angular HTML前端和cshtml刀片视图UI，使用angular作为前端的一点是我们可以将服务器端代码分离为服务器端代码，而UI可以灵活（即ios应用程序）。将 cshtml 与 angluar 混合，我不太确定这是否是一个好主意，是否有直接将组合或脚手架加载到 angluar 中？

有谁知道我们如何访问例如被登录表单击中的方法/端点/控制器？ - “后端代码”？

如何在登录、注册等身份页面上共享 Angular 用户界面？默认使用 Razor 页面

【参考方案2】：

只需查看https://devblogs.microsoft.com/aspnet/aspnetcore-2-1-identity-ui/ 的指南，它也适用于新的核心 3 角 8 模板项目，该项目也支持 Angular 身份验证。

有点不同的是 Areas.Identity.Pages.Account.Manage.Index.cshtml.cs 文件上的公共异步任务 OnPostAsync() 方法，该方法用于支持更新其配置文件中的用户名称。

因此，将您的脚手架模板与以下示例进行比较可能有助于使用 UpdateAsync 而不是之前简单的单个 SetPhoneNumberAsync 调用。

if (Input.PhoneNumber != phoneNumber || Input.Name != user.FullName)

    user.FullName = Input.Name;
    user.PhoneNumber = Input.PhoneNumber;

    var updateProfileResult = await _userManager.UpdateAsync(user);
    if (!updateProfileResult.Succeeded)
    
        throw new InvalidOperationException($"Unexpected error ocurred updating the profile for user with ID 'user.Id'");