在SPA应用中利用JWT进行身份验证
在SPA应用中利用JWT进行身份验证
- 2018.3.21
- 版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。
SPA
SPA即Single Page Application,单页应用程序,是一种Web应用程序或网站,通过动态地重写当前的页面,而不是从服务器端加载一个新网页与用户交互。此方法避免了连续页面之间的用户体验的中断,使应用程序更像是桌面应用程序。在SPA中,所有必需的代码(HTML,JavaScript和CSS)都是通过单页加载来检索的,或者适当的资源是动态加载的并根据需要添加到页面中,通常是响应用户操作。尽管可以使用位置散列或HTML5 History API来提供应用程序中单独的逻辑页面的感知和导航性,但页面在该过程的任何时间点都不会重新加载,也不会将控件转移到另一个页面。与单页面应用程序的交互通常涉及在后台与Web服务器的动态通信。像Angular.js、Ember.js、Meteor.js、ExtJS、React等JS框架都采用了SPA原则。
JWT
JWT即JSON Web Token,是一个基于JSON的开放标准(RFC-7519),它用于创建访问令牌以判断权利要求。例如,服务器可能会生成一个令牌,其中声明“以管理员身份登录”并将其提供给客户端。然后客户端可以使用该令牌来证明它以管理员身份登录。令牌由服务器密钥签名,因此客户端和服务器都能够验证令牌是否合法。JWT令牌被设计成紧凑的、URL-safe的、尤其适合在Web浏览器单点登录SSO的上下文。JWT声明通常可用于传递身份提供者与服务提供者之间的身份验证用户身份,或业务流程所要求的任何其他类型的声明。JWT令牌还可以被认证和加密。JWT标准还依赖于其它基于JSON的标准,比如RFC-7515的JWS(JSON Web Signature)、RFC-7516的JWE(JSON Web Encryption)。
一个成功的令牌认证系统要求用户了解安全细节和其他认证凭证。SPA应用通常与Restful API紧密联系在一起,将UI与所需数据进行绑定,并为UI带来更好的外观和感觉。但问题是,怎样以安全的方式实现API访问?
一个这样的SPA框架是Angular。我们可以借助基于JSON Web Token的身份验证来验证我们的Angular应用程序。因此,当创建Angular应用程序时,一个大问题是,您如何知道您的用户是谁以及他们可以访问哪些内容?
针对所有这些问题的答案以及针对API的认证和授权问题的解决方案是JWT认证系统,它正在取代传统的基于cookie的认证。这给你一个很好的方式来声明一个用户及其在应用程序中的访问权限。它为您提供了一个加密报头作为令牌,以保护经身份验证的用户对应用程序的访问,并为您的前端和后端构建访问控制逻辑。
让我们通过在您的Angular应用程序(版本2+)中查看几个验证代码来深入了解它。
前端工作
当用户发出登录请求时,我们通过我们的身份验证服务调用后端,如下所示:
login(username: string, password: string): Observable < boolean > {return this.http.post('/api/authenticate', JSON.stringify({username: username,password: password})).map((response: Response) => {// login successful if there's a jwt token in the responselet token = response.json() && response.json().token;if (token) {// set token propertythis.token = token;// store username and jwt token in local storage to keep user logged in between page refresheslocalStorage.setItem('currentUser', JSON.stringify({username: username,token: token}));// return true to indicate successful loginreturn true;} else {// return false to indicate failed loginreturn false;}});
}
服务器端工作
当用户尝试使用用户名和密码登录应用程序时,服务器端将:
- 验证用户
- 生成令牌
- 将令牌发送给用户
后端可以是任何像Node.js这样的服务器端框架,Node.js使用npm的jsonwebtoken模块来签署和验证JSON Web令牌。以下是一些示例代码:
模块
var jwt = require("jsonwebtoken");
var bcrypt = require("bcryptjs");
登录功能
login: function (req, res) {// this is param checking if they are provided if (!_.has(req.body, 'email') || !_.has(req.body, 'password')) {return res.serverError("No field should be empty.");}// check if the username matches any email or phoneNumberUser.findOne({email: req.body.email}).exec(function callback(err, user) {if (err) return res.serverError(err);if (!user) return res.serverError("User not found, please sign up.");//check passwordbcrypt.compare(req.body.password, user.password, function (error, matched) {if (error) return res.serverError(error);if (!matched) return res.serverError("Invalid password.");//save the date the token was generated for already inside toJSON()var token = jwt.sign(user.toJSON(), "this is my secret key", {expiresIn: '10m'});//return the token hereres.ok(token);});});
}
令牌返回如何工作
用户使用其凭据成功登录后,会返回一个Web令牌,它以本地存储方式进行保存。现在,无论何时用户想要访问受保护的路由,都应该在请求报头中携带授权报头项发送JWT。报头的内容如下所示:
Authorization: Bearer
因此,JWT将被用于认证和授权API,这些API将授予访问其受保护的路由和资源的权限。
使用Angular处理Web令牌
由于JWT现在保存在本地存储中,我们可以使用它来防止未经身份验证的用户访问受限制的路由。它用于路由模块到任何受保护的路由。为此,我们使用Angular 2中的AuthGuard。AuthGuard使用了来自@angular/router的CanActivate方法。
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {constructor(private router: Router) { }canActivate() {if (localStorage.getItem('currentUser')) {// logged in so return truereturn true;}// not logged in so redirect to login pagethis.router.navigate(['/login']);return false;}
}
因此,可以像这样在路由模块中保护路由:
{ path: '', component: SomeComponent, canActivate: [AuthGuard] }
接下来,我们使用此令牌来获取SPA应用所需的数据。它可以访问用户的API端点。此端点将以SPA为用户需要的数据作出响应。我们可以使用用户服务,如下所示。
getUsers(): Observable<User[]> {// add authorization header with jwt tokenlet headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });let options = new RequestOptions({ headers: headers });// get users from apireturn this.http.get('/api/users', options).map((response: Response) => response.json());
}
注意我们通过使用RequestOptions实现了在报头Header中携带了上面讨论的Authorization Bearer项。为此,可以使用npm中的另一个模块,即’angular2-jwt’。它是帮助构建Angular 2应用程序的辅助工具库。当从应用程序发出HTTP请求时,它会自动将JWT作为授权报头附加。它使用AuthHttp类发送一个JWT请求,从而有条件地允许基于JWT状态的路由导航。它可以按照如下所示进行安装。
npm install angular2-jwt
AuthHTTP可以在调用用户API时使用,如下所示:
// get users from api
return this.authHttp.get('/api/users').map((response: Response) => response.json());
最后
本文的主旨是提供一个关于JWT的概述,以及如何使用JWT来保护单页应用程序。
在SPA应用中利用JWT进行身份验证相关推荐
- php 完全前后端分离使用jwt,前后端分离,在 angular 8 中利用 JWT 进行身份认证
最近项目项目中用angular8进行前端开发,所以近期会收集整理angular相关的文章发出来,中间遇到的坑也会发出来.本文原文是angular6的,不过angular8同样适用. JWT 是什么,为 ...
- Pulsar 中使用 JWT 进行身份认证
Pulsar 中使用 JWT 进行身份认证 欢迎阅读 Pulsar 开源书籍<Pulsar入门与实践> 更好的阅读体验,请参考在线版本<使用 JWT 进行身份认证> Pulsa ...
- 什么是 JWT? 如何基于 JWT 进行身份验证?
什么是 JWT? JWT (JSON Web Token) 是目前最流行的跨域认证解决方案,是一种基于 Token 的认证授权机制.从 JWT 的全称可以看出,JWT 本身也是 Token,一种规范化 ...
- 【SpringBoot】44、SpringBoot中整合JWT实现Token验证(整合篇)
什么是JWT? Json web token (JWT),是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准((RFC 7519),该 token 被设计为紧凑且安全的,特别适用于分 ...
- ASP.NET的MVC中使用Cookie做身份验证(附代码下载)
场景 ASP.NET的MVC中使用Session做身份验证(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1071 ...
- 如何使用Java和XML Config在Spring Security中启用HTTP基本身份验证
在上一篇文章中,我向您展示了如何在Java应用程序中启用Spring安全性 ,今天我们将讨论如何使用Spring Security 在Java Web应用程序中启用Basic HTTP身份验证 . 如 ...
- 如何使用Google Authenticator在ASP.NET Core中设置两因素身份验证
介绍 (Introduction) In this article, we are going to learn how to perform two-factor authentication in ...
- Angular之jwt令牌身份验证
Angular之jwt令牌身份验证 demo https://gitee.com/powersky/jwt 介绍 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种 ...
- aws rds监控慢sql_AWS RDS SQL Server中的初始Windows身份验证配置
aws rds监控慢sql In this article, we will be exploring the process of enabling Windows authentication i ...
最新文章
- XSD标准架构-----xsd:element 元素详解
- winpython使用教程-Win系统PyQt5安装和使用教程
- Robot Framework--环境搭建
- SharePoint 2013 开启訪问请求
- 来潮汕,这些食物不吃后悔一辈子...
- 【机器学习】机器学习从零到掌握之九 -- 教你使用K近邻算法形成完整系统
- Java限流之 —— Sentinel初识
- 留言送书丨《Oracle高性能系统实战大全》包邮到家
- 专业英语笔记(Line Feed and Type Conversion)
- 开课吧:人工智能技术会如何影响青年就业
- L1-8 估值一亿的AI核心代码 (20 分)
- [教程] ios 4 以上安装mobile terminal的最简单方法
- 网络处理器(NP)与图形处理器(GPU)
- ecshop微信登录php代码,Ecshop实现微信第三方授权扫码登录
- PPT动态文字制作过程
- oracle dbms_lob trim,DBMS_LOB包基础应用
- 追思“光纤之父”,物理学诺贝尔奖得主高锟自述
- ubuntu打开摄像头测试
- 苹果退款_苹果充值退款什么意思
- 面试28k职位,老乡面试官从HashCode到HashMap给我讲了一下午!「回家赶忙整理出1.6万字的面试材料」