基于JWT标准的用户认证接口实现
2018-06-24 01:53:01来源：未知 阅读 ()
前面的话
实现用户登录认证的方式常见的有两种：一种是基于 cookie 的认证，另外一种是基于 token 的认证 。本文以基于cookie的认证为参照，详细介绍JWT标准，并实现基于该标签的用户认证接口
cookie认证
传统的基于 cookie 的认证方式基本有下面几个步骤：
1、用户输入用户名和密码，发送给服务器
2、服务器验证用户名和密码，正确的话就创建一个会话（ session ），同时会把这个会话的 ID 保存到客户端浏览器中，因为保存的地方是浏览器的 cookie ，所以这种认证方式叫做基于 cookie 的认证方式
3、后续的请求中，浏览器会发送会话 ID 到服务器，服务器上如果能找到对应 ID 的会话，那么服务器就会返回需要的数据给浏览器
4、当用户退出登录，会话会同时在客户端和服务器端被销毁
这种认证方式的不足之处有两点
1、服务器端要为每个用户保留 session 信息，连接用户多了，服务器内存压力巨大
2、适合单一域名，不适合第三方请求
cookie认证的后端典型代码如下所示
const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })); const session = require('express-session') const pug = require('pug'); app.set('view engine', 'pug'); app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true })) app.get('/', function(req, res){ let currentUser = req.session.username; res.render('index', {currentUser}); }) app.get('/login', function(req, res){ res.sendFile('login.html', {root: 'public'}); }) app.post('/login', function(req, res){ let username = req.body.username; req.session.username = username; res.redirect('/'); }) app.get('/logout', function(req, res){ req.session.destroy(); res.redirect('/'); }) app.listen(3006, function(){ console.log('running on port 3006...'); })
token认证
下面来介绍token认证。详细认证过程如下
1、用户输入用户名密码，发送给服务器
2、服务器验证用户名和密码，正确的话就返回一个签名过的 token（ token 可以认为就是个长长的字符串），客户端浏览器拿到这个 token
3、后续每次请求中，浏览器会把 token 作为 http header 发送给服务器，服务器可以验证一下签名是否有效，如果有效那么认证就成功了，可以返回客户端需要的数据
4、一旦用户退出登录，只需要客户端销毁一下 token 即可，服务器端不需要有任何操作
这种方式的特点就是客户端的 token 中自己保留有大量信息，服务器没有存储这些信息，而只负责验证，不必进行数据库查询，执行效率大大提高
JWT
上面介绍的token-based 认证过程是通过 JWT 标准来完成的
JWT 是 JSON Web Token 的简写，它定义了一种在客户端和服务器端安全传输数据的规范。通过 JSON 格式 来传递信息
让我们来假想一下一个场景。在A用户关注了B用户的时候，系统发邮件给B用户，并且附有一个链接“点此关注A用户”。链接的地址可以是这样的
https://your.awesome-app.com/make-friend/?from_user=B&target_user=A
上面这样做有一个弊端，那就是要求用户B一定要先登录。可不可以简化这个流程，让B用户不用登录就可以完成这个操作。JWT允许我们做到这点
【组成】
一个JWT实际上就是一个字符串，它由三部分组成，第一段是 header （头部），第二段是 payload （主体信息或称为载荷），第三段是 signature（数字签名）
aaaaaaaaaa.bbbbbbbbbbb.cccccccccccc
头部用于描述关于该JWT的最基本的信息，例如其类型以及签名所用的算法等。这可以被表示成一个JSON对象
{ "typ": "JWT", "alg": "HS256" }
将上面的添加好友的操作描述成一个JSON对象。其中添加了一些其他的信息，帮助今后收到这个JWT的服务器理解这个JWT
{ "iss": "John Wu JWT", "iat": 1441593502, "exp": 1441594722, "aud": "www.example.com", "sub": "jrocket@example.com", "from_user": "B", "target_user": "A" }
将上面的JSON对象进行[base64编码]可以得到下面的字符串。这个字符串称作JWT的Payload（载荷）
eyJpc3MiOiJKb2huIFd1IEpXVCIsImlhdCI6MTQ0MTU5MzUwMiwiZXhwIjoxNDQxNTk0NzIyLCJhdWQiOiJ3d3cuZXhhbXBsZS5jb20iLCJzdWIiOiJqcm9ja2V0QGV4YW1wbGUuY29tIiwiZnJvbV91c2VyIjoiQiIsInRhcmdldF91c2VyIjoiQSJ9
将上面的两个编码后的字符串都用句号.连接在一起（头部在前）
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0
最后，我们将上面拼接完的字符串用HS256算法进行加密。在加密的时候，我们还需要提供一个密钥（secret）。如果我们用mystar作为密钥的话，那么就可以得到我们加密后的内容。这一部分叫做签名
rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM
最后将这一部分签名也拼接在被签名的字符串后面，我们就得到了完整的JWT
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0.rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM
于是，我们就可以将邮件中的URL改成
https://your.awesome-app.com/make-friend/?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0.rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM
再强调一下数字签名的运算过程
var encodedString = base64UrlEncode(header) + "." + base64UrlEncode(payload); HMACSHA256(encodedString, 'secret');
签名是由服务器完成的，secret 是服务器上存储的密钥，信息签名后整个 token 会发送给浏览器，每次浏览器 发送请求中都包含 secret。所以可以跟服务器达成互信，完成认证过程
认证接口
新建 server/routes.js 文件，导入 User 模型并赋值给 User 变量：
let User = require('./models/user')
接下来定义用户认证接口，将实现的接口名称为 /auth/login：
module.exports = app => { app.post('/auth/login', (req, res) => { User.findOne({ username: req.body.username }, (err, user) => { if (err) return console.log(err) if (!user) return res.status(403).json({ error: '用户名不存在！' }) user.comparePassword(req.body.password, (err, isMatch) => { if (err) return console.log(err) if (!isMatch) return res.status(403).json({ error: '密码无效！' }) return res.json({ token: generateToken({ name: user.username }), user: { name: user.username } }) }) }) }) }
用户从客户端向服务器提交用户名和密码，服务器端通过body-parser中间件把客户端传送过的数据抽取出来并存放到 req.body 中，这样就可以通过 req.body.username 获取到用户名。然后在 MongoDB 数据库中查找这个用户，若查找过程中出错，则打印错误信息到终端；若数据库中不存在这个用户，则向客户端响应错误信息；若数据库中存在这个用户，则验证客户端提交的密码 req.body.password 是否与用户保存在数据库中的密码匹配。若密码不匹配，则向客户端返回错误信息；若密码匹配，则给客户端返回用户信息
使用NPM安装jsonwebtoken包，jsonwebtoken 包可以生成、验证和解码 JWT 认证码
npm install --save jsonwebtoken
打开 server/routes.js 文件，导入 jsonwebtoken 模块：
let jwt = require('jsonwebtoken')
然后，定义生成 JWT 的 generateToken 方法
let generateToken = (user) => { return jwt.sign(user, 'xiaohuochai', { expiresIn: 3000 }) }
调用 jsonwebtoken 模块提供的 sign() 接口生成 JWT。 其中，xiaohuochai 是生成 JWT 认证码的秘钥，为了安全，最好把秘钥放到配置文件中。 user 是要传递给前端的信息，前端可以利用工具解码 JWT 认证码，从而得到 user 数据。 expiresIn 选项用来指定认证码自生成到失效的时间间隔（过期间隔），上述代码中数字 3000 的单位是秒，意思说这个认证码自生成后，再过50分钟就失效了。认证码失效之后，客户端就不能使用失效的认证码访问服务器端的受保护资源了
完整代码如下
let User = require('./models/user') let jwt = require('jsonwebtoken') let secret = require('./config.js').secret let generateToken = (user) => { return jwt.sign(user, secret, { expiresIn: 3000 }) } module.exports = app => { app.post('/auth/login', (req, res) => { User.findOne({ username: req.body.username }, (err, user) => { if (err) return console.log(err) if (!user) return res.status(403).json({ error: '用户名不存在！' }) user.comparePassword(req.body.password, (err, isMatch) => { if (err) return console.log(err) if (!isMatch) return res.status(403).json({ error: '密码无效！' }) return res.json({ token: generateToken({ name: user.username }), user: { name: user.username } }) }) }) }) }
最后在index.js中引入并使用routes
let routes = require('./routes.js') routes(app)
使用postman来测试接口，已经在数据库中存了用户名为admin，密码为123456的用户。测试结果如下
最后
JWT适合于应用在『无状态的REST API』，也就是说适用于Android/iOS等移动端，或前后端分离的WEB前端。关于JWT的更多资源移步官网
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：JS学习笔记（一）
- 基于JQuery的多标签实现代码 2020-03-29
- 基于 Lerna 管理 packages 的 Monorepo 项目最佳实践 2019-08-14
- JS实现在线ps功能 2019-08-14
- koa2服务端使用jwt进行鉴权及路由权限分发 2019-08-14
- ES6——箭头函数与普通函数的区别 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
