前后端的身份认证
Web开发模式
目前主流的web开发模式有两种,分别是:
- 基于服务端渲染的传统web开发模式
- 基于前后端分离的新型web开发模式
- 服务端渲染的web开发模式
服务端渲染的概念:服务器发送给客户端的html页面是在服务器通过字符串的拼接,动态生成的。因此客户端不需要使用ajax这样的技术来请求页面的数据。代码示例如下:
app.get('/index.html',(req,res)=>{
//1.要渲染的数据
const user={ name:'zs',age:20 }
//2.服务器端通过字符串的拼接,动态生成html内容
const html=`<h1>姓名:${user.name},年龄:${user.age}</h1>`
//3.把生成好的页面内容响应给客户端。因此,客户端拿到的是带有真实数据的html页面
res.send(html)
})
- 服务端渲染的优缺点
优点:
- 前端耗时少。因为服务器负责动态生成html内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
- 有利于SEO。因为服务器端相应的是完整的html页面内容,所以爬虫更容易爬取获得信息,更有利于SEO。
缺点: - 占用服务器端资源。即服务器完成html页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
- 不利于前后端分离,开发效率低。使用服务器渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。
- 前后端分离的web开发模式
前后端分离的概念:前后端分离的开发模式,依赖于ajax技术的广发应用。就是后端只负责提供API接口,前端使用ajax调用接口的开发模式。 - 前后端分离的优缺点
优点:
- 开发体验好。前端专注于UI页面的开发,后端专注于api的开发,且前端有更多的选择性。
- 用户体验好。ajax技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
- 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成。
缺点: - 不利于SEO。因为完整的html页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方案:利于Vue、React等前端框架的SSR(server side render)技术能够很好的解决SEO问题!)
- 如何选择web开发模式
- 比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这是需要使用服务器端渲染
- 类似后台管理项目,交互性比较强,不需要考虑SEO,那么就可以使用前后端分离的开发模式。
另外,为了同时兼顾首页的渲染速度和前后端分离的开发效率,可以采用首屏服务端渲染+其他页面前后端分离。
身份认证
- 什么是身份认证
身份认证(Authentication)又称身份验证、鉴权,是指通过一定的手段,完成对用户身份的确认。比如,手机验证码登录、邮箱密码登录、二维码登录。 - 为什么需要身份认证
身份认证的目的,是为了确认当前所声称为某种身份的用户,确实是所声称的用户。 - 不同开发模式下的身份认证
- 服务端渲染推荐使用Session认证机制
- 前后端分离推荐使用JWT认证机制
Session认证机制
- HTTP协议的无状态性
指的是客户端的每次HTTP请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次HTTP请求的状态。例如:超市收银员不会记住哪个客户是不是VIP。 - 如何突破HTTP无状态的限制
按照上面的例子,可以给每个VIP客户发一个会员卡,通过会员卡来辨别用户的身份,web开发中的专业术语叫做Cookie。 - 什么是Cookie
Cookie是存储在用户浏览器中一段不超过4KB的字符串。它由一个名称(Name)、一个值(Value)和其他几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。
不同域名下的Cookie各自独立,每当客户端发起请求时,会自动把当前域名下所有未过期的Cookie一同发送到服务器。
Cookie的几大特性:
- 自动发送
- 域名独立
- 过期时限
- 4KB限制
- Cookie在身份认证中的作用
客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的Cookie,客户端会自动将Cookie保存在浏览器中。随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的Cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份。(编码时不需要为此做什么) - Cookie不具有安全性
由于Cookie是存储在浏览器中的,而且浏览器也提供了读写Cookie的API,因此Cookie很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过Cookie的形式发送给浏览器。例如:如果超市通过会员卡辨别用户的VIP身份,那么客户可以伪造会员卡,从而造成潮湿的损失。 - 提高身份认证的安全性
为了防止客户伪造会员卡,收银员在拿到客户出示的会员卡之后,可以在收银机上进行刷卡认证。只有收银机确认存在的会员卡,才能被正常使用。这种“会员卡+刷卡认证”的设计理念就是Session认证机制的精髓。 - Session的工作原理
首先,客户端浏览器提交账号密码到服务器。接着,服务器验证账号密码。然后,把登陆成功后的用户信息存储到服务器的内存中,同时生成相应的Cookie字符串并响应给客户端。客户端浏览器自动把Cookie存储到当前域名下。当客户端再次发起请求时,通过请求头自动把当前域名下的所有可用的Cookie发送给服务器。服务器根据请求头中的Cookie从内存中查找对应的用户信息,用户的身份认证成功后,服务器针对当前用户生成特定的响应内容,响应给浏览器。
在Express中使用Session认证
- 安装express-session中间件
在Express项目中,只需要安装express-session中间件就可以使用Session认证:
npm install express-session
- 配置express-session中间件
中间件安装成功后,需要通过app.use()来注册session中间件,示例代码如下:
//1.导入session中间件
var session=require('express-session')
//2.配置Session中间件
app.use(session({//为session中间件提供一个配置对象:三个配置属性
secret:'keyboard cat',//用于对session数据进行加密的密钥,secret属性的值可以为任意字符串,负责对session进行加密
resave:false,//固定写法,表示是否在每次请求时强制重新保存session,这里设置为false,表示不强制重新保存
saveUninialized:true//固定写法,表示是否在未初始化的情况下保存session,这里设置为true,表示保存未初始化的session。
}))
- 向session中存数据
当express-session中间件配置成功后,req会多一个session属性,可以通过req.session来访问和使用session对象,从而存储用户的关键信息:
app.post('/api/login',(req,res)=>{
//判断用户提交的信息是否正确
if(req.body.username!=='admin'||req.body.password!=='000000'){
return res.send({status:1,msg:'登录失败'})
}
req.session.user=req.body //将用户的信息存储到session中
req.session.islogin=true //将用户的登陆状态存储到session中
res.send({status:0,msg:'登录成功'})
})
注意:上面代码中的req.session.user也可以用其他的属性名,是自定义的,也可以用userinfo。
- 从session中取数据
可以直接从req.session对象上直接获取之前存储的数据,示例代码如下:
//获取用户姓名的接口
app.get('api/username'(req,res)=>{
//判断用户是否登录
if(!req.session.islogin){
return res.send({status:1,msg:'fail'})
}
res.send({status:0,msg:'success',username:req.session.user.username})
})
- 清空session
调用req.session.destory()函数,即可清空服务器保存的session信息,只会清空当前用户的session不会清空其他用户的session。(一般退出登录时要用到)
//退出登录的接口
app.post('/api/logout',(req,res)=>{
//清空当前客户端对应的session信息
req.session.destory()
res.send({
status:0,
msg:'退出登录成功'
})
})
JWT认证机制
- 了解Session认证的局限性
Session认证机制需要配合Cookie才能实现。由于Cookie默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域Session认证。
注意:
- 当前端请求后端接口不存在跨域问题的时候,推荐使用Session身份认证机制。
- 当前端需要跨域请求后端接口的时候,不推荐使用Session身份认证机制,推荐使用JWT认真机制。
- 什么是JWT
JWT(JSON Web Token)是目前最流行的跨域认证解决方案。 - JWT的工作原理
首先,在客户端浏览器提交账号和密码到服务器。然后,服务器验证账号和密码,验证通过之后,把用户信息对象经过加密之后生成Token字符串。然后,服务器把生成的token字符串发送给客户端浏览器。客户端浏览器将token存储到localStorage或SessionStorage中。当客户端再次发起请求的时候,通过请求头的Suthorization字段,将token发送给服务器。然后,服务器把token字符串还原成用户信息对象,并验证用户的身份,用户身份认证成功后,服务器会针对当前用户生成特定的响应内容,并响应给浏览器。
总结:用户的信息通过token字符串的形式,保存在客户端浏览器中。服务器通过还原token字符串的形式来认证用户的身份。
注意:在session中用户信息保存在服务器中,在jwt中用户信息被保存在浏览器中。 - JWT的组成部分
JWT通常由三部分组成,分别是Header(头部)、Payload(有效荷载)、Signature(签名)。三者之间使用英文的"."分隔,格式如下:
Header.Payload.Signature
- JWT的三个部分各自代表的含义:
从前往后分别是Header、Payload、Signature。
- Payload部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。
- Header和Signature是安全性相关的部分,只是为了保证Token的安全性。
- JWT的使用方式
客户端收到服务器返回的JWT之后,通常会把它储存在localStorage或sessionStorage中。此后,客户端每次与服务器通信,都要带上这个jwt的字符串,从而进行身份认证。推荐做法是把jwt放在http请求头的Authorization字段中,格式如下:
Authorization: Bearer <token>
在Express中使用JWT
- 安装JWT相关的包
npm install jsonwebtoken express-jwt
其中:
- jsonwebtoken用于生成JWT字符串,将用户信息转为jwt字符串
- express-jwt用于将jwt字符串解析还原成json对象,服务器接收到jwt字符串要解析成json对象
- 导入JWT相关的包
使用require()函数,分别导入JWT相关的两个包:
//1.导入用于生成jwt字符串的包
const jwt=require('jsonwebtoken')
//2.导入用户将客户端发送过来的jwt字符串,解析还原成json对象的包
const expressJWT=require('express-jwt')
//高版本的express-jwt要改成这样的写法导入
const{expressjwt:expressJWT}=require('express-jwt')
- 定义secret密钥
为了保证JWT字符串的安全性,防止JWT字符串在网络传输过程中被别人破解,我们需要专门定义一个用于加密和解密的secret密钥:
- 当生成JWT字符串的时候,需要使用secret密钥对用户的信息进行加密,最终得到加密好的JWT字符串
- 当把JWT字符串解析还原成JSON对象的时候,需要使用secret密钥进行解密
//3.secret密钥的本质:就是一个字符串
const secretKey='hoshi No1 ^_^'
- 在登陆成功后生成JWT字符串
调用jsonwebtoken包提供的sign()方法,将用户的信息加密成JWT字符串,响应给客户端:
//登录接口
app.post('/api/login',function(req,res){
//省略登陆失败的情况代码
//登陆成功后,生成JWT字符串,通过token属性响应给客户端
res.send({
status:200,
message:'登陆成功',
//调用jwt.sign()生成jwt字符串,三个参数分别是:用户信息对象、加密密钥、配置对象:可以配置当前token的有效期
token:jwt.sign({username:userinfo.username},secretKey,{expiresIn:'30s'})//30s后就失效无法进行身份的认证
})
})
- 将JWT字符串还原成JSON对象
客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的Authorization字段,将token字符串发送到服务器进行身份认证。
此时,服务器可以通过express-jwt这个中间件,自动将客户端发送过来的Token解析还原成JSON对象:
//使用app.use()来注册中间件
//expressJWT({secret:secretKey})就是用来解析Token的中间件
//.unless({path:[/^\/api\//]})用来指定哪些接口不需要访问权限
app.use(expressJWT({secret:secretKEy}).unless({path:[/^\/api\//]}))
//高版本的express-jwt要改成这样的方法注册
app.use(expressJWT({ secret: secretKey,algorithms:["HS256"]}).unless({path:[/^\/api\//]}))
//只对/api需要验证token(高版本)
app.use('/api',expressJWT({secret:secretKey,algorithms:["HS256"]}))
扩展:
这个正则表达式 [/^/api//] 代表匹配以 /api/ 开头的路径。
解释:
/: 正则表达式的开始和结束符号,表示整个匹配模式。
^: 匹配字符串的开头。
/api/: 匹配字符 /api/。
//: 匹配任意数量的 / 字符,因为在路径中可能存在多个 /。
例子:
/api/users: 匹配
/api/products: 匹配
/api/v1/users: 匹配
/api/: 匹配
/foo/bar: 不匹配
注意:
这个正则表达式匹配了 /api/ 后面的所有字符,所以会匹配到任意以 /api/ 开头的路径,无论路径有多长。如果想匹配一个特定的路径,例如 /api/users,可以修改正则表达式为 [/^/api/users$/]。
- 使用req.user获取用户信息
当express-jwt这个中间件配置成功之后,即可在那些有权限的接口中,使用req.user对象,来访问从JWT字符串中解析出来的用户信息了,示例代码如下:
// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
// TODO_05:使用 req.user 获取用户信息,并使用 data 属性将用户信息发送给客户端
console.log(req.user);
res.send({
status: 200,
message: '获取用户信息成功!',
data:req.auth // 要发送给客户端的用户信息
//data: req.user // 要发送给客户端的用户信息
})
})
注意:正常情况下,req是不包含user属性的,是配置express-jwt中间件之后,自动将解析出来的用户信息挂载到req.user属性上的,req.user上包含哪些信息是由自己决定的,比如登录成功后,jwt.sign({username:userinfo.username},secretKey,{expiresIn:'30s'})
加密的用户信息对象中包含username,那么解析出来的user就只包含username属性。
记住!:千万不要把密码加密到token字符串中。
注意:在用postman测试访问这个有权限的接口时,要在header中加上Authorization,值为Bearer+空格+login返回的token
,也可以直接在代码中
//把
res.send({
status: 200,
message: '登录成功!',
token: tokenStr // 要发送给客户端的 token 字符串
})
//改成
res.send({
status: 200,
message: '登录成功!',
token: "Bearer "+tokenStr // 要发送给客户端的 token 字符串,注意Bearer后面有空格
})
记:弹幕中又说req.user无法访问的,新版换成了req.auth。
结果是这样的, data: req.user // 要发送给客户端的用户信息
这个没有返回数据,要改成data:req.auth
- 捕获解析JWT失败后产生的错误
当使用express-jwt解析token字符串时,如果客户端发送过来的Token字符串过期或不合法,会产生一个解析失败的错误,影响项目的正常允许。我们可以通过Express的错误中间件,捕获这个错误并进行相关的处理,示例代码如下:
// TODO_06:使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
//token解析失败导致的错误
if (err.name === 'UnauthorizedError') {
return res.send({ status: 401, message: '无效的token' })
}
//其他原因的错误
res.send({ status: 500, message: '未知错误' })
})
完整代码:
// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
// TODO_01:安装并导入 JWT 相关的两个包,分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
// const expressJWT = require('express-jwt')
//高版本的express-jwt
const { expressjwt: expressJWT } = require('express-jwt')
// 允许跨域资源共享
const cors = require('cors')
app.use(cors())
// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
// TODO_02:定义 secret 密钥,建议将密钥命名为 secretKey
const secretKey = 'hoshi No1 ^_^'
// TODO_04:注册将 JWT 字符串解析还原成 JSON 对象的中间件
//unless是不需要访问权限的接口
// app.use(expressJWT({ secret: secretKey}).unless({path:[/^\/api\//]}))
//高版本的express-jwt
app.use(expressJWT({ secret: secretKey, algorithms: ["HS256"] }).unless({ path: [/^\/api\//] }))
//只对/api需要验证token
// app.use('/api',expressJWT({secret:secretKey,algorithms:["HS256"]}))
// 登录接口
app.post('/api/login', function (req, res) {
// 将 req.body 请求体中的数据,转存为 userinfo 常量
const userinfo = req.body
// 登录失败
if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
// 登录成功,生成 JWT Token
// const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' });
// 将 Token 添加到响应头部的 Authorization 中
// res.setHeader('Authorization', `Bearer ${tokenStr}`);
return res.send({
status: 400,
message: '登录失败!'
})
}
// 登录成功
// TODO_03:在登录成功之后,调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
// res.setHeader('Authorization', `Bearer ${tokenStr}`);
res.send({
status: 200,
message: '登录成功!',
token: tokenStr // 要发送给客户端的 token 字符串
})
})
// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
// TODO_05:使用 req.user 获取用户信息,并使用 data 属性将用户信息发送给客户端
console.log(req.auth);
res.send({
status: 200,
message: '获取用户信息成功!',
data: req.auth // 要发送给客户端的用户信息
})
})
// TODO_06:使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
//token解析失败导致的错误
if (err.name === 'UnauthorizedError') {
return res.send({ status: 401, message: '无效的token' })
}
//其他原因的错误
res.send({ status: 500, message: '未知错误' })
})
// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(8888, function () {
console.log('Express server running at http://127.0.0.1:8888')
})