如何使用Angular修改ASP.NET Core WebAPI的ASP.NET Identity用户界面

Question

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

它内置了一些用 Angular 构建的页面，例如计数器和数据获取等，但所有与身份相关的页面（登录、注册等）都是从后端以纯 HTML 的形式返回的。所以，“我的主要关注点是在那个页面上进行一些 UI 更改”。

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

所以我选择了添加新的脚手架项 --> 身份验证。第一次尝试时，我选择了“覆盖所有文件”，第二次尝试时只选择了“account\login”和“account\register”，以及 applicationdbcontext 作为 dbcontext。但不幸的是，两者都没有奏效。

尝试构建代码时，我遇到了以下错误：

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" 扩展名是什么意思，该页面上没有导入语句，还有一些我从未见过的奇怪代码。该页面本身也没有显示任何错误/红色标记。

我想在这里实现两件事：

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

2）在用户登录表单中添加几个字段。并且由于采用了代码优先方法，则最终会对用户 DBSet 进行更改（但我不知道如何在这种情况下进行更改）。

我没有添加任何代码示例，因为这是一个很直接的问题/疑问。要重现此问题，只需创建 .net core 3.0 项目并使用 Angular 8 模板，在登录或注册页面上进行任何与 UI 相关的更改即可。

- Mohammed Khan

---

嘿@Mohammed，我有同样的问题，很好奇你是否找到了将UI与后端分离的解决方案。（在Angular中制作登录和注册页面。）？ - Ehsan

Answer 1

这段文字与默认项目布局无关，但仍然存在，有些让人烦恼。尝试删除该导入项和带有脚手架UI的默认应用程序将正常工作。

我的意图是为登录页面添加一些样式，使其更加有趣。

我做了什么？

+ 使用Angular和身份验证（单个用户帐户）模板（来自Visual Studio 2019）创建了一个ASP.NET Core Web应用程序。 + 添加新的脚手架项 -> Identity + 按照"ScaffoldingReadme.txt"文件中的步骤进行操作（一些步骤已经在正确的位置具有片段，不需要任何添加） + 从"_Layout.cshtml"页面中删除"@inject IWebHostEnvironment Environment"和"Microsoft.AspNetCore.Hosting"行; + 准备好看结果 :)

- mihai

---

谢谢回答；有两点需要注意：首先，只需在 Microsoft.AspNetCore.Hosting 行前添加 using 关键字即可解决注入 IWebHostEnvironment Environment 的问题，无需将其删除。另外，这将把网站分成两个不同的部分：Angular HTML 前端和 cshtml Blade 视图 UI。使用 Angular 作为前端的优点是可以将服务器端代码与 UI 分离，而 UI 可以更加灵活（例如 iOS 应用程序）。虽然混合使用 cshtml 和 Angular，但我不太确定这是否是一个好主意，是否有直接将它们组合或者在 Angular 中进行脚手架构建的方式呢？ - user2617470

有人知道我们如何访问被登录表单所触发的方法/端点/控制器，例如“后端代码”吗？ - Jamie

如何在身份验证页面（如登录、注册）上共享 Angular UI？默认方法是使用 Razor Pages。 - Abdus Salam Azad

Answer 2

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

有一件事情略有不同，那就是Areas.Identity.Pages.Account.Manage.Index.cshtml.cs文件中的public async Task 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}'");
    }
}

- Iman