如何将用户身份验证添加到.NET Core 2.1 Angular应用程序?

Question

由于 Angular 模板中的 Individual User Account 选项已禁用，我正在使用 Visual Studio 2017。我想知道如何向它添加用户身份验证？ 我刚开始使用 VS 2017 和 .Net Core 2.1，所以我在搜索网络上的文档，但是我找不到任何说明。

我看到一个答案，只需要在命令提示符中输入 dotnet new angular --auth Individual，但由于我使用的是 Windows 8.1，该命令适用于 .Net Core 3 和 VS 2019，因此我无法使用它。

我已经阅读了所有关于此主题的谷歌搜索结果，但没有任何帮助。 我甚至使用其他搜索引擎希望能够获得更好的结果，但还是没有。

- Len

---

首先，您不需要VS 2019来安装.NET Core 3。.NET Core SDK是一个命令行应用程序，独立于VS 2019。但是，如果您想从UI中创建模板，则需要使用VS 2019（以及某些调试/构建功能）。另外，VS Code也可以使用。除此之外，在没有模板的情况下向Angular应用程序添加身份验证需要更多的工作，您需要一个外部身份验证提供程序，例如IdentiyServer4（在较新的模板中支持）。 - Tseng

@Tseng，所以 dotnet new angular --auth Individual 在 VS 2017 中可以工作，我只需要将它更新到 .Net Core 3.0，是这样吗？ - Len

创建项目的命令是在VS2017之外执行的，因此可以使用。但我不确定是否可以在VS 2017中创建或构建该项目，因为我从未尝试过。最新的Visual Studio Code IDE应该可以使用。 - Tseng

@Tseng 我本来想下载.Net Core 3.0，但在下载页面上它说支持Visual Studio 2019（v16.3，最新预览版）。感谢您的建议，但我想使用Visual Studio，因为我需要调试功能。 - Len

Visual Studio Code 也适用于 ASP.NET Core 场景的 Web 开发（并可在 MacOS 和 Linux 上运行），支持调试和构建场景，如果您无法升级到 VS2019，则它是一个可行的解决方案。调试功能仅适用于 .NET Core 3 和 VS 2017 组合，而不适用于 VS Code。 - Tseng

我会研究一下VS Code。谢谢。 - Len

Answer 1

使用Dotnet Core 3.0与Entityframework Core 3.0和Identityserver4，您可以拥有一个以Angular为前端和Asp.net Core 3.0为后端的应用程序。请参见此链接：

SPAs的身份验证和授权

首先，您需要从此处下载Dotnet Core 3.0 SDK。

然后打开命令提示符并使用：

dotnet new angular -o <output_directory_name> -au Individual

这将为您创建项目。

现在在 Visual Studio 中，转到“工具”>“选项”>“环境”>“预览功能”，并勾选：

使用 .NET Core SDK 预览（需要重新启动）

并重新启动 Visual Studio。

之后在项目目录中打开 .csProj 文件并保存。这将要求您保存解决方案文件，该文件刚刚在 Visual Studio 中打开项目时创建。

将 .sln 文件保存在与 .csproj 相同的目录中，然后清理解决方案并重新构建解决方案。

现在，您将拥有使用 Asp.net core 作为后端的 Angular 应用程序，并提供了开箱即用的身份验证和授权功能。

以下是完成所有步骤后应用程序的示例截图。

在项目目录中，您会有一个app.db文件，在startup.cs的ConfigureServices方法中也会看到这个文件。

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));

该模板默认使用Sqlite，您可以通过安装Microsoft.EntityFrameworkCore.SqlServer NuGet包并在startup.cs文件中更改此设置来将其更改为Sql Server。

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));

to

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

并确保您在appsettings.json文件中更新您的连接字符串。

- Hamza Khanzada

---

你是从VS中执行“调试/开始调试”（F5）还是从控制台运行dotnet run？我真的很想让“调试/开始调试”正常工作，但它会在https://localhost:44330/上打开一个浏览器并一直旋转。 - granadaCoder

@granadaCoder 我正在使用VS进行“调试/开始调试”（F5）。因为它还会内部启动Angular CLI和ng serve，所以加载Angular应用程序需要一些时间。 - Hamza Khanzada

谢谢。我现在明白了。是的，如果我稍等一下，我就会看到ng serve出现在调试器输出中。谢谢HK。（对于未来的读者，在“输出”窗口和“显示来源：DEBUG”中，我可以看到：Microsoft.AspNetCore.SpaServices:信息:> myfirstangular @0.0.0 start C:\MyPath\MyFirstAngular\ClientApp> ng serve“--port”“57591”） - granadaCoder

PS. http://localhost:57591/ 在Chrome中可以正常工作。在工作中，由于SSO（单点登录）的原因（与此问题或答案无关），我们必须将IE11保持为“默认浏览器”。但是IE11不喜欢ng serve提供的angular。Chrome / Firefox在这个Visual Studio模板中运行良好。 - granadaCoder

Answer 2

首先，安装.NET Core 3不需要VS 2019。

.NET Core SDK是一个命令行应用程序，独立于VS 2019。但是，如果您想要从UI中创建模板，则需要使用VS 2019（对于某些调试/构建功能可能需要）。另外，VS Code也可以使用。

常规的ASP.NET Core Identity（不要与IdentityServer 4混淆，后者是一个不同的开源项目）不太适合SPA身份验证。ASP.NET Core Identity仅支持cookie身份验证，这意味着像在MVC应用程序中登录并保护SPA和视图免受未经授权的访问（即加载SPA应用程序的Index页面）。

只要SPA和WebAPI托管在同一域和同一应用程序中，就可以无需任何其他设置而正常工作。如果您将Angular应用程序和WebApi / Rest服务拆分为多个项目，则可能无法很好地工作，并且需要OpenIDConnect流程进行授权。

需要记住的是：您需要采取额外的措施来保护您的Api免受XSRF（跨站请求伪造）攻击。过去这很棘手，但现在有了新的机制（即 HttpOnly， Secure cookie标志和 SameSite）。

您也可以自己添加认证，这需要更多的工作。对于SPAs（如Angular和React），您需要一个OpenID提供者，如OpenIddict或IdentityServer 4，具有隐式OpenID Connect流和使用 oidc-client JavaScript库来执行它，通常设置一个客户端与IdSrv4并设置回调URL，在登录后将用户重定向到该URL。

IdSrv4有一些示例，例如在JavaScript客户端上实现它的JavaScript客户端示例，该示例基于IdSrv4文档中的Quickstart 6: JavaScript教程。

一旦您获得了令牌，您可以将其与每个请求一起通过Authorize头传递到您的WebAPI中。

- Tseng