- 本文我們將來聊一聊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è)簡(jiǎn)單的驗(yàn)證服務(wù)器來處理JWT廊驼，提供API供我們?cè)L問据过。
Getting Started
- 我們首先構(gòu)建一個(gè)服務(wù)器，使用npm來安裝
express庫(kù)到你的系統(tǒng)上面妒挎，只需要簡(jiǎn)單地執(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è)簡(jiǎn)單的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來測(cè)試這個(gè)接口锥忿。如果你沒有postman的話，先安裝postman到你的系統(tǒng)上面
image - 打開postman后怠肋，在地址欄輸入本地的login路由地址敬鬓，然后在body填入以下內(nèi)容。
- 點(diǎn)擊
send發(fā)送后笙各，返回如下response
處理JWTs
- 現(xiàn)在我們有了一個(gè)能處理post钉答、get請(qǐng)求的簡(jiǎn)單服務(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的庫(kù)。
npm install jsonwebtoken
- 安裝完成后颂翼，用
require引入:
const jwt = require("jsonwebtoken");
- 我們將通過這個(gè)庫(kù)來為每一個(gè)合法的用戶晃洒，生成JWT。通過調(diào)用
jsonwebtoken庫(kù)中的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的庫(kù)來解決跨域問題并思。
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è)庫(kù)
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路由就是公開的路由碴卧，任何人都可以訪問弱卡，然后簡(jiǎn)單地返回一個(gè)200狀態(tài)碼。第二個(gè)
/asset/secret路由就是螟深，私密的路由谐宙，將會(huì)被jwtCheck驗(yàn)證烫葬，這個(gè)是由express-jwt中間件庫(kù)實(shí)現(xiàn)的界弧。生成的
jwtCheck函數(shù)，就會(huì)檢查簽名(signature)是否與我們的注冊(cè)服務(wù)器相匹配搭综，再看看注冊(cè)服務(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è)，我們?cè)趐ostman切換到Authentication那一欄府框，然后在type里選擇
Bearer Token吱窝。接著輸入我們?cè)谏弦还?jié)獲取到的token，再點(diǎn)擊發(fā)送迫靖，就能請(qǐng)求成功了院峡。
結(jié)論
- 相比其他的web token比如Simple Web Tokens (SWTs) 或者 Security Assertion Markup Language (SAML)，JWT更加簡(jiǎn)單系宜，因?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í)六水，讓用戶更加簡(jiǎn)單的辨別請(qǐng)求的發(fā)送者，你只需要正確的key就行了辣卒。
