# JWT 流程圖解
###### tags: `Javascript` `note` `JWT`

## sign

對 header payload 作 base64 encode

flowchart LR
	A(header) -- base64 encode --> B(Encoded header)
	C(payload) -- base64 encode --> D(Encoded payload)

建立 signature

合併 encoded 過的 header 跟 payload

flowchart TB
	A(Encoded header) --> B("{header}.{payload}")
	C(Encoded payload) --> B

function base64Encode(str){
	const buf = Buffer.from(str, 'utf-8');
	const base64 = buf.toString('base64url');
	return base64;
}

使用 crypto 跟我們的 `{header}.{payload}` 與 `secret key` 作加密

flowchart LR
	A("HMACSHA256({header}.{payload}, secret key)") --> B(signature)

const hmac = crypto.createHmac('sha256', 'test');
const signature = (hmac.update(`${header}.${payload}`), hmac.digest('base64url'));

建立完整的 token

flowchart LR
   A("{header}.{payload}.{signature}")

## verify

將 token 分割成兩部分，`{header}.{payload}` 跟 `signature`。

使用 `{header}.{payload}` 與 `secret key` 重新建立一個新的 `signature`　

flowchart LR
	A("HMACSHA256({header}.{payload}, secret key)") --> B(newSignature)

將 token 原本的 `signature` 與新建立的 `signature` 作比對，完成驗證。