- 本文我們將來聊一聊JSON Web Token是什么。
- 先介紹一下他的基本概念，再來看看它的結(jié)構(gòu)、最后創(chuàng)建一個(gè)服務(wù)器來獲取一些數(shù)據(jù)然后插入到一個(gè)JWT中。
什么是JSON Web Token？為什么我們需要它？
- JSON Web Token(JWT)是一種安全的、輕量的、完備的一種在多方之間傳輸數(shù)據(jù)的方式，它使用的JSON對(duì)象格式。
- 舉個(gè)例子：你想要登錄一個(gè)App，比如Tinder。Tinder允許用戶使用FaceBook賬號(hào)來登錄。所以當(dāng)你選擇使用Facebook賬號(hào)登錄時(shí)，App就會(huì)帶上認(rèn)證信息(用戶名和密碼)訪問Facebook的驗(yàn)證服務(wù)器。
- 當(dāng)Facebook驗(yàn)證完畢賬號(hào)和密碼后，會(huì)向發(fā)送請(qǐng)求的App返回一個(gè)JWT，App拿到這個(gè)JWT后就會(huì)允許用戶訪問它的賬號(hào)數(shù)據(jù)
JWT的結(jié)構(gòu)
- 一個(gè)JWT由三部分組成，他們之間通過一個(gè)點(diǎn)號(hào)"."分隔：
- 頭部Header
- 載體Payload
- 簽名Signature
- header通常由兩部分組成：token的類型，以及所使用的hash算法：
{
"alg": "HS256",
"typ": "JWT"
}
-
載體(payload)部分是我們真值想要發(fā)送的數(shù)據(jù)所在，下面是一個(gè)載體的示例，真正的載體一般會(huì)更為復(fù)雜，以確保更好的安全性。
{
"sub": "65165751325",
"name": "Rajat S",
"admin": true
}
-
簽名(Signature)用于驗(yàn)證數(shù)據(jù)在到達(dá)目的地之前未被更改。通常使用的私鑰。 - 這三部分通常放一起編碼為base64格式，并以"."分隔。想要了解更多關(guān)于
JWT的內(nèi)容，請(qǐng)參考https://jwt.io/。 - 現(xiàn)在我們對(duì)JWT有個(gè)基本的了解了，接下來看看如何搭建一個(gè)簡單的驗(yàn)證服務(wù)器來處理JWT，提供API供我們訪問。
Getting Started
- 我們首先構(gòu)建一個(gè)服務(wù)器，使用npm來安裝
express庫到你的系統(tǒng)上面，只需要簡單地執(zhí)行下面命令：
$ npm install express
- 接下來創(chuàng)建一個(gè)
jwt-auth的文件夾，當(dāng)然你也可以取其他名字。
$ mkdir jwt-auth
$ cd jwt-auth
- 進(jìn)入到文件夾里面后，新建一個(gè)
index.js，寫下以下代碼(原文中對(duì)下面代碼的解釋過于基礎(chǔ)，這里就不廢話了)
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}.`);
});
- 這是一個(gè)簡單的node express搭建的服務(wù)器，路由只有一個(gè)
/time返回當(dāng)前時(shí)間、其他地址均返回404
實(shí)現(xiàn)一個(gè)登陸的路由
- 既然文章是關(guān)于JWT認(rèn)證的，那么接下來要實(shí)現(xiàn)一個(gè)登陸的路由
/login，需要使用post方法訪問。并且要使用一個(gè)中間件body-parser，來解析參數(shù)，讀取請(qǐng)求的body。
$ npm install body-parser
- 首先安裝好
body-parser然后再通過require引入，再使用.use方法使用該方法。
let bodyParser = require('body-parser')
app.use(bodyParser.json({limit: '2000kb'}))
-
接下來我們啟動(dòng)服務(wù)器，然后需要通過postman來測試這個(gè)接口。如果你沒有postman的話，先安裝postman到你的系統(tǒng)上面
image - 打開postman后，在地址欄輸入本地的login路由地址，然后在body填入以下內(nèi)容。
- 點(diǎn)擊
send發(fā)送后，返回如下response
處理JWTs
- 現(xiàn)在我們有了一個(gè)能處理post、get請(qǐng)求的簡單服務(wù)器了，接下來構(gòu)造一個(gè)JWT的處理器。
- 我們新建一個(gè)名為
users的數(shù)組，它包含了一對(duì)用戶信息，包括密碼用戶名：
const users = [
{id: 1, username: "clarkKent", password: "superman"},
{id: 2, username: "bruceWayne", password: "batman"}
];
- 接下來重寫
route路由，增加一個(gè)參數(shù)校驗(yàn)，如果提交的請(qǐng)求中缺少username或者password，那么服務(wù)器應(yīng)該返回一個(gè)400狀態(tài)碼。
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;
}
- 接著如果通過了校驗(yàn)，再判斷request中的user信息是否出現(xiàn)在我們的
users數(shù)組里面，代碼如下：
const user = users.find((u) => {
return u.username === req.body.username && u.password === req.body.password;
});
- 如果提交的user信息不包含在
users數(shù)組里，我們同樣需要返回一個(gè)401狀態(tài)碼給客戶端。 - 接下來需要安裝另一個(gè)名為
jsonwebtoken的庫。
npm install jsonwebtoken
- 安裝完成后，用
require引入:
const jwt = require("jsonwebtoken");
- 我們將通過這個(gè)庫來為每一個(gè)合法的用戶，生成JWT。通過調(diào)用
jsonwebtoken庫中的sign方法。注意這些代碼仍然是寫在route路由的函數(shù)內(nèi)部。
const token = jwt.sign({
sub: user.id,
username: user.username
}, "mykey", {expiresIn: "3 hours"});
res.status(200).send({access_token: token})
- 接下來到postman，以下面的參數(shù)發(fā)送一個(gè)post請(qǐng)求:
{
"username": "clarkKent",
"password": "superman",
}
-
返回的json web token 結(jié)果如下：
image
跨域問題--CORS
- 在一些情況下，你的應(yīng)用訪問的API可能部署在不同的服務(wù)器上面，涉及到跨域問題，可能就會(huì)報(bào)錯(cuò)。這個(gè)時(shí)候，為了防止出錯(cuò)，可以安裝另一個(gè)名為
cors的庫來解決跨域問題。
npm install cors
- 類似于使用
body-parser中間件一樣，調(diào)用use方法：
const cors = require("cors");
app.use(cors());
使用JWT給提供用戶一個(gè)API的訪問權(quán)限
- 接下來創(chuàng)造另一個(gè)服務(wù)器，帶有兩個(gè)API路由，第一個(gè)路由是公開的，而第二個(gè)路由需要通過JWT驗(yàn)證過了的用戶才能訪問。
- 需要安裝另一個(gè)庫
express-jwt：
npm install express-jwt
- 新建一個(gè)
jwt-auth文件夾，在里面新建一個(gè)api.js。在這個(gè)文件里，寫下下面的代碼：
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}.`);
});
- 而因?yàn)?888端口被另一個(gè)服務(wù)器占用了，我們可以在命令行輸入以下，定義好一個(gè)環(huán)境變量
API_PORT為5555，新的服務(wù)器就會(huì)使用這個(gè)端口。
export API_PORT=5555
/asset路由就是公開的路由，任何人都可以訪問，然后簡單地返回一個(gè)200狀態(tài)碼。第二個(gè)
/asset/secret路由就是，私密的路由，將會(huì)被jwtCheck驗(yàn)證，這個(gè)是由express-jwt中間件庫實(shí)現(xiàn)的。生成的
jwtCheck函數(shù)，就會(huì)檢查簽名(signature)是否與我們的注冊服務(wù)器相匹配，再看看注冊服務(wù)器的代碼，調(diào)用sign的方法，第二個(gè)參數(shù)傳的也是mykey(應(yīng)該就是一個(gè)用于加密的密鑰字符串)。-
好了，現(xiàn)在
node api.js啟動(dòng)第二個(gè)服務(wù)器，然后在postman上看看效果。用get請(qǐng)求localhost:5000/asset地址，能夠返回信息，但是請(qǐng)求localhost:5000/asset/secret，就會(huì)得到一大堆錯(cuò)誤代碼，如下：
image.png 為了解決這個(gè)，我們在postman切換到Authentication那一欄，然后在type里選擇
Bearer Token。接著輸入我們在上一節(jié)獲取到的token，再點(diǎn)擊發(fā)送，就能請(qǐng)求成功了。
結(jié)論
- 相比其他的web token比如Simple Web Tokens (SWTs) 或者 Security Assertion Markup Language (SAML)，JWT更加簡單，因?yàn)樗腔贘SON格式，比XML更容易理解。
- 如果我們編碼JSON，生成的體積會(huì)比SAML更加小，在HTML和HTTP環(huán)境里傳輸更快。
- 安全方面JWTs使用的單一key，而SAML和JWT都是使用的由一個(gè)公鑰一個(gè)私鑰組成的密鑰對(duì)，從而進(jìn)行更安全的驗(yàn)證。
- 除了認(rèn)證問題，JWT是一個(gè)強(qiáng)大的安全的在多方之間傳遞數(shù)據(jù)的方式。JWT擁有簽名的事實(shí)，讓用戶更加簡單的辨別請(qǐng)求的發(fā)送者，你只需要正確的key就行了。
