Angular之jwt令牌身份验证的实现

Angular之jwt令牌身份验证

demo https://gitee.com/powersky/jwt

介绍

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密。

起源

在讲 JWT 之前一定要讲讲基于 token 和 session 的区别。

传统的session认证

http 协议本身是一种无状态的协议,就是意味着如果用户向我们的应用提供了用户名和密码来进行用户认证,那么下一次请求时,用户还要再一次进行用户认证才行,因为根据http协议,我们并不能知道是哪个用户发出的请求,所以为了让我们的应用能识别是哪个用户发出的请求,我们只能在服务器存储一份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为 cookie,以便下次请求时发送给我们的应用,这样我们的应用就能识别请求来自哪个用户了,这就是传统的基于 session 认证。

但是这种基于 session 的认证使应用本身很难得到扩展,随着不同客户端用户的增加,独立的服务器已无法承载更多的用户,而这时候基于 session 认证应用的问题就会暴露出来。

工作原理

当 client 通过用户名、密码请求server并通过身份认证后,server就会生成身份认证相关的 session 数据,并且保存在内存或者内存数据库。并将对应的 sesssion_id返回给 client,client会把保存session_id(可以加密签名下防止篡改)在cookie。此后client的所有请求都会附带该session_id(毕竟默认会把cookie传给server),以确定server是否存在对应的session数据以及检验登录状态以及拥有什么权限,如果通过校验就该干嘛干嘛,否则就重新登录。

前端退出的话就清cookie。后端强制前端重新认证的话就清或者修改session。

优点与弊端

优点:

  • 相比JWT,最大的优势就在于可以主动清除session。
  • session保存在服务器端,相对较为安全。
  • 结合cookie使用,较为灵活,兼容性较好。

弊端:

每个用户经过我们的应用认证之后,我们的应用都要在服务端做一次记录,以方便用户下次请求的鉴别,通常而言session都是保存在内存中,而随着认证用户的增多,服务端的开销会明显增大。

用户认证之后,服务端做认证记录,如果认证的记录被保存在内存中的话,这意味着用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源,这样在分布式的应用上,相应的限制了负载均衡器的能力。这也意味着限制了应用的扩展能力。

如果是分布式部署,需要做多机共享session机制,实现方法可将session存储到数据库中或者redis中

容易被CSRF,因为是基于cookie来进行用户识别的, cookie如果被截获,用户就会很容易受到跨站请求伪造的攻击。

cookie + session在跨域场景表现并不好

session、cookie、sessionStorage、localstorage的区别

session:

主要存放在服务器端,相对安全。

cookie:

可设置有效时间,默认是关闭浏览器后失效,主要存放在客户端,并且不是很安全,可存储大小约为4kb。

sessionStorage:

仅在当前会话下有效,关闭页面或浏览器后被清除。

localstorage:

除非被清除,否则永久保存。

基于JWT token的验证机制

JWT基本上由“.”分隔的三部分组成,分别是头部,有效载荷和签名。 一个简单的JWT的例子,如下所示:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySUQiOjEsImlhdCI6MTU4MTMyMjE4MCwiZXhwIjoxNTgxMzI5MzgwfQ.6PVma3dLCbiXYgBJld5McFJ-q-QydCY7YVtrKPBsRi8

这部分字符串实际上是由三部分构成的,重点使用点符号分割的,在JWT中分别代表:Header、Payload、Signature。

Header

JWT 的 Header 通常包含两个字段,分别是:typ(type) 和 alg(algorithm)。

typ: token的类型,这里固定为 JWT。

alg: 加密的算法,通常直接使用 HMAC SHA256

完整的头部声明如下:

{
 'typ': 'JWT',
 'alg': 'HS256'
}

然后将头部进行base64加密(该加密是可以对称解密的),构成了第一部分。

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Playload

载荷就是存放有效信息的地方,这些有效信息包含如下三个部分:

  • 标准注册声明
  • 公共声明
  • 私有声明

标准注册声明

  • iss: jwt签发者
  • sub: jwt所面向的用户
  • aud: 接收jwt的一方
  • exp: jwt的过期时间,这个过期时间必须要大于签发时间。
  • nbf: 定义在什么时间之前,该 JWT 都是不可用的。
  • iat: jwt的签发时间
  • jti: jwt的唯一身份标识,主要用来作为一次性token,从而回避重放攻击。

时间戳一般使用 unix 时间戳表示。

公共声明

公共的声明可以添加任何的信息,一般添加用户的相关信息或其他业务需要的必要信息,但不建议添加敏感信息,因为该部分在客户端可解密。

私有声明

私有声明是提供者和消费者所共同定义的声明,一般不建议存放敏感信息,因为base64是对称解密的,意味着该部分信息可以归类为明文信息。

定义一个简单的 payload,如下:

{
  userID: '1',
  exp: '1581329380',
  iat: '1581322180'
}

然后将其进行base64加密,得到JWT的第二部分。

eyJ1c2VySUQiOjEsImlhdCI6MTU4MTMyMjE4MCwiZXhwIjoxNTgxMzI5MzgwfQ

在线base64转换工具 地址

Signature

JWT的第三部分是一个签证信息,这个签证信息由三部分组成:

  • header (base64加密后的)
  • payload (base64加密后的)
  • secret

这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串,然后通过header中声明的加密方式进行和secret组合加密,然后就构成了JWT的第三部分。

例如:

// javascript
var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload);

var signature = HMACSHA256(encodedString, 'secret');

secret是保存在服务器端的,JWT的签发生成也是在服务器端的,secret就是用来进行JWT的签发和JWT的验证,所以,它就是你服务端的私钥,在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发JWT了,那么你的程序将可能会招到攻击。

优点与弊端

优点:

  • 因为json的通用性,所以JWT是可以进行跨语言支持的,像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用。
  • 因为有了payload部分,所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。
  • 便于传输,jwt的构成非常简单,字节占用很小,所以它是非常便于传输的。
  • 它不需要在服务端保存会话信息, 所以它易于应用的扩展。

弊端:

  • 需要设计token续签问题
  • 需要设计用户退出后token依然有效等问题
  • 密码修改后token依然有效等问题
  • 还有很多小问题,但是我觉得是利大于弊吧

一般是在请求头里加入Authorization,并加上Bearer标注:

fetch('api/user/1', {
 headers: {
  'Authorization': 'Bearer ' + token
 }
})

工作原理如图:

Angular中使用JWT进行身份验证

这里使用一TODO案例来进行演示。

设计API

  • /auth POST 提交用户名 username 和密码 password 进行登陆认证,返回 JWT 字符串。
  • /todos GET 返回待办事项清单。
  • /todos/{id} GET 返回指定的待办事项。
  • /users GET 返回用户列表。

程序操作流程简述

首先程序有一个登录界面,用户需要输入用户和用户密码。当提交表单后,前端会将数据发送到后端的 /auth 路径。后端采取合适的查询方式对这个用户进行验证,验证成功后会返回token 字符串。

后端数据声明

// 定义用户
const USERS = [
  { id: 1, username: 'vincent', password: '123456'},
  { id: 2, username: 'bob', password: '123456'},
  { id: 3, username: 'peter', password: '123456'},
];

// 创建TODO列表,json格式
const TODOS = [
  { id: 1, userId: 1, name: "Play LOL", completed: false },
  { id: 2, userId: 1, name: "Do homework", completed: true },
  { id: 3, userId: 2, name: "Play basketball", completed: false },
  { id: 4, userId: 3, name: "Finish Angular JWT", completed: false },
];

密码切记不能放在 payload 中的,因为这样很不安全。

后端代码实现

导入所需要的库

const _ = require('lodash');
const express = require('express')
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const expressJwt = require('express-jwt');

定义函数

// 获取用户相关的所有Todo事项函数
function getTodos(userID) {
  var todos = _.filter(TODOS, ['userId', userID]);
  return todos;
}

// 获取指定id的todo事项
function getTodo(todoID) {
  var todo = _.find(TODOS, (todo) => { return todo.id == todoID; })

  return todo;
}

// 获取所有用户
function getUsers() {
  let users = Array(USERS.length);
  for (let i = 0; i < USERS.length; i++) {
    users[i] = {id: USERS[i].id, username: USERS[i].username};
  }
  return users;
}

使用 expressJwt 生成 token

todo-shared-secret是秘钥字符串,这个注意一定要存储在后端。
具体代码可以到 https://gitee.com/powersky/jwt这里来找。

实现其他的API

前端代码实现

前端主要分为以下几个部分:

服务:

  • user service 用于获取用户数据
  • todo service 用于获取todo数据
  • auth service 用于验证用户获取token
  • auth guard 用于路由守卫,判断是否能够进行路由跳转

组件:

  • user list 用户展示界面
  • todo list 用户展示todo待办事项界面
  • login 用户登录界面

下面依次展示。

user.service.ts

todo.service.ts

auth.service.ts

auth.guard.ts

UserListComponenthtml

TodoListComponenthtml

LoginComponenthtml

AppComponenthtml

AppRoutingModule

为了能够使用代理需要增加一个配置文件:

proxy.conf.json

{
 "/api/*": {
  "target": "http://localhost:4000",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true
 }
}

然后在package.json中加入:

"name": "jwt",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

然后命令行执行下面命令开启前端:

npm start

执行下面命令启动后端:

node server/app.js

到此这个案例就结束了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Angular开发中的登陆与身份验证

    前言 由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面. 本篇文章中的身份验证,指的是如何确定用户是否已经登陆,并确保在每次与服务器的通信中,都能够满足服务器的验证需求.注意,并不包括对具体是否具有某一个权限的判断. 对于登陆,主要是接受用户的用户名密码输入,提交到服务器进行验证,处理验证响应,在浏览器端构建身份验证数据. 实现身份验证的两种方式 目前,实现身份验证的方法,主要有两个大类: Co

  • AngularJS身份验证的方法

    权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们需要额外多做一些事

  • Angular之jwt令牌身份验证的实现

    Angular之jwt令牌身份验证 demo https://gitee.com/powersky/jwt 介绍 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景.JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被

  • SpringBoot 使用jwt进行身份验证的方法示例

    这里只供参考,比较使用jwt方式进行身份验证感觉不好,最不行的就是不能退出 登陆时设定多长过期时间,只能等这个时间过了以后才算退出,服务端只能验证请求过来的token是否通过验证 Code: /** * Created by qhong on 2018/6/7 15:34 * 标注该注解的,就不需要登录 **/ @Target({ElementType.METHOD,ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) @Documente

  • asp.net基于JWT的web api身份验证及跨域调用实践

    随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的做法有所不同,除了面临跨域提交cookie的烦人问题外,更重要的是,有些终端可能根本不支持cookie. Json Web Token(jwt)是一种不错的身份验证及授权方案,简单的说就是调用端调用api时,附带上一个由api端颁发的token,以此来验证调用者的授权信息. 但由于时间关系,不对jw

  • Golang基于JWT与Casbin身份验证授权实例详解

    目录 JWT Header Payload Signature JWT的优势 JWT的使用场景 Casbin Casbin可以做什么 Casbin不可以做什么 Casbin的工作原理 实践 登录接口请求 Token实现 使用Redis存储Token信息 用Casbin做授权管理 实现Casbin的策略 创建Todo JWT JSON Web Toekn(JWT)是一个开放标准RFC 7519,以JSON的方式进行通信,是目前最流行的一种身份验证方式之一. eyJhbGciOiJIUzI1NiIs

  • 如何使用会话Cookie和Java实现JWT身份验证

    HTTP是无状态协议,用于传输数据.它启用了客户端和服务器端>之间的通信.它最初是为了在Web浏览器和Web服务器之间建立连接而建立的.比如在网上购物,我们添加一些商品,例如.耳机到我们的购物车,然后,我们继续寻找其他项目,在此期间,我们希望在执行任何其他任务是存储购物车项目的状态且不丢失它们.这意味着我们希望在整个购物过程中记住我们的状态.由于HTTP是无状态协议,因此要克服问题,我们可以使用会话或者令牌 1.基于会话的身份验证 在JSON Web令牌出现之前,我们主要使用这种身份验证.在这种

  • Django中的JWT身份验证的实现

    1.认证与授权 1.验证:身份验证是验证个人或设备标识的过程.身份验证过程之一是登录过程.注册网站后,您的信息(ID,密码,名称,电子邮件等)将存储在其数据库中.之后,您无需创建帐户即可提供信息.相反,您只需要提供用户名和密码来验证您的身份,网站就会自动知道您正在访问. 2.授权:授权是用于确定用户特权或访问级别的安全机制.在许多社区网站上,只有上传帖子和管理员的人才能删除它.当其他人尝试删除帖子时,网站应该抛出错误(但是在许多情况下,他们甚至看不到删除按钮).因此,对于每个请求,用户都需要证明

  • asp.net core3.1cookie和jwt混合认证授权实现多种身份验证方案

    目录 认证授权 身份认证 授权 默认授权 选择授权 总结 开发了一个公司内部系统,使用asp.net core 3.1.在开发用户认证授权使用的是简单的cookie认证方式,然后开发好了要写几个接口给其它系统调用数据.并且只是几个简单的接口不准备再重新部署一个站点,所以就直接在MVC的项目里面加了一个API区域用来写接口.这时候因为是接口所以就不能用cookie方式进行认证,得加一个jwt认证,采用多种身份验证方案来进行认证授权. 认证授权 身份验证是确定用户身份的过程. 授权是确定用户是否有权

  • Java JWT实现跨域身份验证方法详解

    目录 1.JWT简介 2.JWT的结构 2.1 头部(header) 2.2 载荷(payload) 2.3 签证(signature) 3.JWT的原则 4.JWT的用法 5.JWT的问题和趋势 6.整合JWT令牌 6.1 在模块中添加jwt工具依赖 6.2 创建JWT工具类 1.JWT简介 JWT(JSON Web Token)是目前流行的跨域认证解决方案,是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信

  • 基于Token的身份验证之JWT基础教程

    前言 初次了解JWT,很基础,高手勿喷. 基于Token的身份验证用来替代传统的cookie+session身份验证方法中的session. token应用流程为: 1.初次登录:用户初次登录,输入用户名密码. 2.密码验证:服务器从数据库取出用户名和密码进行验证. 3.生成JWT:服务器端验证通过,根据从数据库返回的信息,以及预设规则,生成JWT. 4.返还JWT:服务器的HTTP RESPONSE中将JWT返还. 5.带JWT的请求:以后客户端发起请求,HTTP REQUEST HEADER

随机推荐