理解JSON Web Token【译】

原文

• 本文我们将来聊一聊JSON Web Token是什么。
• 先介绍一下他的基本概念，再来看看它的结构、最后创建一个服务器来获取一些数据然后插入到一个JWT中。

什么是JSON Web Token？为什么我们需要它？

• JSON Web Token(JWT)是一种安全的、轻量的、完备的一种在多方之间传输数据的方式，它使用的JSON对象格式。
• 举个例子：你想要登录一个App，比如Tinder。Tinder允许用户使用FaceBook账号来登录。所以当你选择使用Facebook账号登录时，App就会带上认证信息(用户名和密码)访问Facebook的验证服务器。
• 当Facebook验证完毕账号和密码后，会向发送请求的App返回一个JWT，App拿到这个JWT后就会允许用户访问它的账号数据

JWT的结构

• 一个JWT由三部分组成，他们之间通过一个点号"."分隔：
  • 头部Header
  • 载体Payload
  • 签名Signature
• header通常由两部分组成：token的类型，以及所使用的hash算法：

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

• 载体(payload)部分是我们真值想要发送的数据所在，下面是一个载体的示例，真正的载体一般会更为复杂，以确保更好的安全性。

{
  "sub": "65165751325",
  "name": "Rajat S",
  "admin": true
}

• 签名(Signature)用于验证数据在到达目的地之前未被更改。通常使用的私钥。
• 这三部分通常放一起编码为base64格式，并以"."分隔。想要了解更多关于JWT的内容，请参考https://jwt.io/。
• 现在我们对JWT有个基本的了解了，接下来看看如何搭建一个简单的验证服务器来处理JWT，提供API供我们访问。

Getting Started

• 我们首先构建一个服务器，使用npm来安装express库到你的系统上面，只需要简单地执行下面命令：

$ npm install express

• 接下来创建一个jwt-auth的文件夹，当然你也可以取其他名字。

$ mkdir jwt-auth
$ cd jwt-auth

• 进入到文件夹里面后，新建一个index.js，写下以下代码(原文中对下面代码的解释过于基础，这里就不废话了)

const express = require("express");
const app = express();
const PORT = 8888;
app.get('/time', (req, res) => {
  const time = (new Date()).toLocaleTimeString();
  res.status(200).send(`The Time is ${time}`);
});
app.get("*", (req, res) => {
  res.sendStatus(404);
});
app.listen(PORT, () => {     
  console.log(`Server is running on port ${PORT}.`); 
});

• 这是一个简单的node express搭建的服务器，路由只有一个/time返回当前时间、其他地址均返回404

实现一个登陆的路由

• 既然文章是关于JWT认证的，那么接下来要实现一个登陆的路由/login，需要使用post方法访问。并且要使用一个中间件body-parser，来解析参数，读取请求的body。

$ npm install body-parser

• 首先安装好body-parser然后再通过require引入，再使用.use方法使用该方法。

let bodyParser = require('body-parser')
app.use(bodyParser.json({limit: '2000kb'}))

• 接下来我们启动服务器，然后需要通过postman来测试这个接口。如果你没有postman的话，先安装postman到你的系统上面

  
  
  image
• 打开postman后，在地址栏输入本地的login路由地址，然后在body填入以下内容。

![image](https://user-images.githubusercontent.com/25222844/48989977-88921280-f167-11e8-8afe-9cd62aa5bc49.png)

• 点击send发送后，返回如下response

![image](https://user-images.githubusercontent.com/25222844/48990025-bf682880-f167-11e8-8ed9-4261d59e1ce1.png)

处理JWTs

• 现在我们有了一个能处理post、get请求的简单服务器了，接下来构造一个JWT的处理器。
• 我们新建一个名为users的数组，它包含了一对用户信息，包括密码用户名：

const users = [
  {id: 1, username: "clarkKent", password: "superman"},
  {id: 2, username: "bruceWayne", password: "batman"}
];

• 接下来重写route路由，增加一个参数校验，如果提交的请求中缺少username或者password，那么服务器应该返回一个400状态码。

app.post("/login", (req, res) => {
  if (!req.body.username || !req.body.password) {
    res.status(400).send("Error. Please enter the correct username and password");
    return;
  }

• 接着如果通过了校验，再判断request中的user信息是否出现在我们的users数组里面，代码如下：

const user = users.find((u) => {
  return u.username === req.body.username && u.password === req.body.password;
});

• 如果提交的user信息不包含在users数组里，我们同样需要返回一个401状态码给客户端。
• 接下来需要安装另一个名为jsonwebtoken的库。

npm install jsonwebtoken

• 安装完成后，用require引入:

const jwt = require("jsonwebtoken");

• 我们将通过这个库来为每一个合法的用户，生成JWT。通过调用jsonwebtoken库中的sign方法。注意这些代码仍然是写在route路由的函数内部。

const token = jwt.sign({
  sub: user.id,
  username: user.username
}, "mykey", {expiresIn: "3 hours"});
res.status(200).send({access_token: token})

• 接下来到postman，以下面的参数发送一个post请求:

{
  "username": "clarkKent",
  "password": "superman",
}

• 返回的json web token 结果如下：

  
  
  image

跨域问题--CORS

• 在一些情况下，你的应用访问的API可能部署在不同的服务器上面，涉及到跨域问题，可能就会报错。这个时候，为了防止出错，可以安装另一个名为cors的库来解决跨域问题。

npm install cors

• 类似于使用body-parser中间件一样，调用use方法：

const cors = require("cors");
app.use(cors());

使用JWT给提供用户一个API的访问权限

• 接下来创造另一个服务器，带有两个API路由，第一个路由是公开的，而第二个路由需要通过JWT验证过了的用户才能访问。
• 需要安装另一个库express-jwt：

npm install express-jwt

• 新建一个jwt-auth文件夹，在里面新建一个api.js。在这个文件里，写下下面的代码：

const express = require("express")
const bodyParser = require("body-parser")
const expressjwt = require("express-jwt")
const app = express();
const PORT = process.env.API_PORT || 8888;

const jwtCheck = expressjwt({    
  secret: "mykey"
});

app.use(bodyParser.json());  

app.get("*", (req, res) => {    
  res.sendStatus(404);
}); 

app.get("/asset", (req, res) => {
  res.status(200).send("Everybody can see this");
});

app.get("/asset/secret", jwtCheck, (req, res) => {
  res.status(200).send("Only logged in people can see me");
});

app.listen(PORT, () => {    
  console.log(`Server is running on port ${PORT}.`);
});

• 而因为8888端口被另一个服务器占用了，我们可以在命令行输入以下，定义好一个环境变量API_PORT为5555，新的服务器就会使用这个端口。

export API_PORT=5555

• /asset路由就是公开的路由，任何人都可以访问，然后简单地返回一个200状态码。

• 第二个/asset/secret路由就是，私密的路由，将会被jwtCheck验证，这个是由express-jwt中间件库实现的。

• 生成的jwtCheck函数，就会检查签名(signature)是否与我们的注册服务器相匹配，再看看注册服务器的代码，调用sign的方法，第二个参数传的也是mykey(应该就是一个用于加密的密钥字符串)。

• 好了，现在node api.js启动第二个服务器，然后在postman上看看效果。用get请求localhost:5000/asset地址，能够返回信息，但是请求localhost:5000/asset/secret，就会得到一大堆错误代码，如下：
  

  image.png

• 为了解决这个，我们在postman切换到Authentication那一栏，然后在type里选择Bearer Token。接着输入我们在上一节获取到的token，再点击发送，就能请求成功了。

结论

• 相比其他的web token比如Simple Web Tokens (SWTs) 或者 Security Assertion Markup Language (SAML)，JWT更加简单，因为它是基于JSON格式，比XML更容易理解。
• 如果我们编码JSON，生成的体积会比SAML更加小，在HTML和HTTP环境里传输更快。
• 安全方面JWTs使用的单一key，而SAML和JWT都是使用的由一个公钥一个私钥组成的密钥对，从而进行更安全的验证。
• 除了认证问题，JWT是一个强大的安全的在多方之间传递数据的方式。JWT拥有签名的事实，让用户更加简单的辨别请求的发送者，你只需要正确的key就行了。