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令牌。

隐藏,复制Codelogin(username: string, password: string): Observable {

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

隐藏,复制CodegetGreeting(): Observable {
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

Angular 4:使用JWT令牌进行用户身份验证相关推荐

Springboot token令牌验证解决方案在SpringBoot实现基于Token的用户身份验证
Springboot token令牌验证解决方案在SpringBoot实现基于Token的用户身份验证参考文章: (1)Springboot token令牌验证解决方案在SpringBoot实现 ...
用户身份验证配置需考虑的因素
你现在要建立一个系统.无论系统的功能如何,用户身份验证都是始终存在的一个功能.实现它看起来应该很简单--只需"拖动"一些现成的身份验证模块,或使用一些基本选项(例如 Spring ...
使用JWT进行跨域身份验证
传统用户身份验证 Internet服务无法与用户身份验证分开.一般过程如下: 用户向服务器发送用户名和密码. 验证服务器后,相关数据(如用户角色,登录时间等)将保存在当前会话中. 服务器向用户返回se ...
用户身份验证最佳做法清单
用户身份验证是每个Web应用程序共享的功能. 我们已经实现了很多次,所以很早以前就应该完善它. 然而,错误无时无刻不在发生. 造成这种情况的部分原因是,可能出问题的清单很长. 您可能会错误地存储密码, ...
身份证验证校验码_用户身份验证最佳做法清单
身份证验证校验码用户身份验证是每个Web应用程序共享的功能. 我们已经实施了很多次了,所以早就应该完善它了. 然而,错误无时无刻不在. 造成这种情况的部分原因是,可能出错的事情列表很长. 您可能会 ...
springSecurity-oauth2默认用户身份验证转换器( 方法上的注解权限authorities)
springSecurity-oauth2默认用户身份验证转换器 package com.xy.tasty.mgr.security;import com.xy.common.verify.Asser ...
使用token进行用户身份验证
使用token进行用户身份验证参考文章:https://blog.csdn.net/u014799292/article/details/88365086 写的很详细,具体讲解了token的原理. ...
php路由器怎么登录认证,PHP用户身份验证,如路由器登录
当我们尝试登录路由器时,如何在php中创建用户身份验证. 当我输入网址,例如www.example.com/portal时,应该有一个提示,如上面的图像询问用户名和密码. 这是什么类型的身份验证.如何 ...
IdentityServer4 使用OpenID Connect添加用户身份验证
使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.I ...

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

Angular 4:使用JWT令牌进行用户身份验证相关推荐

最新文章

热门文章