Angular 4：使用 JWT Token 进行用户身份验证

引言

这是关于 ASP.NET Core Identity 的系列文章的第四篇文章

• ASP.NET Core Identity：入门
• ASP.NET Core Identity：设置 Web 项目和 Identity 数据库
• ASP.NET Core Identity：使用 ASP.NET Core MVC 实现用户注册、登录和注销功能
• ASP.NET Core Identity：支持用于用户身份验证的 JWT Token
• Angular 4：使用 JWT Token 进行用户身份验证
• ASP.NET Core Identity：支持来自外部提供程序的 OAuth 2.0 凭据
• Angular 4：使用外部提供程序进行用户身份验证

在上一篇文章中，我们在项目中创建了一个 API 控制器（TokenController）来生成 JWT token，以及另一个支持 bearer 身份验证方案的 API 控制器（GreetingController）。 在本文中，我们将开发一个 Angular 4 应用，以基于该 API 实现用户身份验证。

我不会深入探讨 Angular 应用的细节，因为互联网上充斥着优秀的 Angular 教程。 每天都有更好的教程出现，所以提供一些好的 Angular 教程链接甚至不值得。

本文的完整代码可在该 repo 的 Demo 4 文件夹中找到 https://github.com/ra1han/aspnet-core-identity。

准备控制器

我们在上一步创建的 API 控制器对于我们的 Angular 应用来说已经足够好了。 我们唯一需要做的就是添加跨域支持，因为 .NET 项目和 Angular 应用在不同的端口上运行。

[EnableCors("CORSPolicy")]
[Route("api/[controller]")]
public class TokenController : Controller
{
.....
.....
}

[EnableCors("CORSPolicy")]
[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
[Route("api/[controller]")]
public class GreetingController : Controller
{
.....
.....
}

准备 Angular 应用

我们在此项目中使用 Angular 4。

该项目有两个组件 - Login 组件用于登录页面，以及一个 Home 组件用于向已身份验证的用户显示问候消息。

该项目还有两个服务 - AuthenticationService 用于根据提供的凭据获取 token，以及 UserService 用于使用 token 获取问候消息。

我还在使用 RxJS 来处理 http 请求。 它是一个很棒的工具，我强烈建议花一些时间好好学习它。

整体项目结构如下

准备身份验证服务 (authentication.service.ts)

此服务具有三种方法 - login、logout 和 isUserLoggedIn。

login 方法向服务器发送 post 请求并获取 jwt token。

login(username: string, password: string): Observable<boolean> {

    var headers = new Headers();
    headers.append('Content-Type', 'application/json; charset=utf-8');

    return this.http.post(
      Constant.ApiRoot + Constant.TokenService,
      { Email: username, Password: password },
      { headers: headers })
      .map((response: Response) => {
        let token = response.json() && response.json().token;
        if (token) {
          this.token = token;
          return true;
        }
        else {
          return false;
        }
      });
  }

准备用户服务 (user.service.ts)

此服务只有一种方法 - getGreeting。

这里有一点很重要，此方法访问 .../api/Greeting 端点，这是一个受保护的端点。 要访问它，我们必须将 bearer token 添加到请求头。

getGreeting(): Observable<string> {
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.auhenticationService.token });
    let options = new RequestOptions({ headers: headers });

    return this.http.
      get(Constant.ApiRoot + Constant.GreetingService, options).
      map((response: Response) => response.text());
  }

使用应用程序

要使用该应用程序，首先运行 .NET 应用程序，然后运行 Angular 应用。 要运行 Angular 应用，只需在命令提示符中转到 Angular 项目文件夹并运行 npm start。

由于用户未登录，Angular 应用将加载登录页面。

如果我们输入在上一步中创建的用户凭据并点击 登录 按钮，用户将被登录并转发到主页。