Angular 4:使用JWT令牌进行用户身份验证

介绍 本文是关于ASP系列文章的第四篇。网络核心身份: ASP。NET Core标识:启动asp.net CoreNET Core标识:建立一个web项目和标识数据库NET Core标识:用户注册，登录和注销功能使用ASP。asp.net Core mvc asp.net。angular 4:使用JWT令牌进行用户身份验证angular 4:使用外部提供者进行用户身份验证 在上一篇文章中，我们在项目中创建了一个API控制器(TokenController)来生成JWT令牌，以及另一个API控制器(GreetingController)，它支持持有者身份验证方案。在本文中，我们将开发一个Angular 4应用程序来实现基于该API的用户身份验证。 我不会详细介绍这个Angular应用程序，因为互联网上到处都是很棒的Angular教程。因为每天都有更好的教程出现，所以放一些好的Angular教程链接根本不值得。 本文的完整代码可在此回购https://github.com/ra1han/aspnet- coreidentity中的Demo 4文件夹中获得。 准备控制器 我们在上一步创建的API控制器对于我们的Angular应用来说已经很好了。我们唯一要做的就是在。net项目中添加对交叉原点的支持，这样Angular应用就会运行在不同的端口上。 隐藏,复制Code

[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。 该项目有两个组件—用于登录页面的登录组件和用于向经过身份验证的用户显示问候消息的Home组件。 该项目还有两个服务—AuthenticationService用于根据所提供的凭证获取令牌，UserService用于使用令牌获取问候消息。 我还使用RxJS来处理http请求。这是一个很棒的工具，我强烈建议花些时间好好学习它。 整个项目结构是这样的: 准备身份验证服务(Authentication . Service .ts) 该服务有三种方法——登录、注销和isUserLoggedIn。 登录方法向服务器发送post请求并获取jwt令牌。 隐藏,复制Code

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/问候语终点，这是一个安全的终点。为了访问它，我们必须将承载令牌添加到请求头中。 隐藏,复制Code

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应用程序会在用户未登录时加载登录页面。 如果我们放入在上一步中创建的用户的凭据并单击Login按钮，用户将被登录并转发到主页。 本文转载于：http://www.diyabc.com/frontweb/news17311.html