---
tags: Node.js 直播班 - 2023 春季班
---
# 第六堂講義：JWT 身份驗證機制

* 錄影
* [線上範例程式碼](https://github.com/gonsakon/express-week4-sample)
* [Adobe XD 設計稿](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/grid)
## 補充內容
* [線上範例程式碼](https://github.com/gonsakon/express-week4-sample)
* [JWT 官網](https://jwt.io/)
* [JWT 圖解](https://whimsical.com/jwt-UKUY1rj1vfoN6uyic7e4Sm@2Ux7TurymNEtgWEBxMsZ)
* [base64 解碼](https://www.convertstring.com/zh_TW/EncodeDecode/Base64Decode)

## 使用到的 NPM
* [bcryptjs](https://www.npmjs.com/package/bcryptjs)：密碼加解密
* [validator](https://www.npmjs.com/package/validator)：使用者資料驗證
* [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken#jwtsignpayload-secretorprivatekey-options-callback)：JWT 產生與驗證

<!-- 密碼加密 -->
bcrypt.hash(password,12)
<!-- 密碼比較是否一致 -->
bcrypt.compare(password1, password1)

<!-- 密碼是否有大於 8 碼 -->
validator.isLength(password,{min:8})

<!-- 是否為 Email 格式 -->
validator.isEmail(email)

<!-- 產生 JWT token：payload、secret、option -->
jwt.sign({id:user._id},secret,{
    expiresIn: "90d"
  })
// output：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyNDk0NzUzMzI4OTMzMDM0NmYxMDkyNCIsImlhdCI6MTY0ODk2OTU1NSwiZXhwIjoxNzEyMDQxNTU1fQ.bjUj8QgQao6pgFE1MMzZeiD4q0d-VJN0a5CznJr4ZnE

<!-- 解密 JWT -->
jwt.verify(token, secretOrPublicKey, [options, callback])

// output
{
  "id": "6249368f98f7f965568ad019",
  "iat": 1648968184,
  "exp": 1712040184
}

## 中場休息

## 流程
1. 建立 user model
2. 簡易取得、新增 user 流程
3. 密碼加密
4. 建立 sign_up 註冊、產生 JWT 流程
5. 登入流程
6. 設計 isAuth 的 middleware
7. 觀看 get 個人資訊，並加入 isAuth 的 middleware
8. 更新個人密碼
9. 抽出 auth.js 的 js module

## 第六堂作業

### 加入以下 API 設計

- `POST：{url}/users/sign_up`：[註冊](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/1fc65740-4d7f-4df7-ac4d-8cf0d573f4e2)
- `POST：{url}/users/sign_in`：[登入](https://discord.com/channels/801807326054055996/1096280981633249320/1096281004903235584)
- `POST：{url}/users/updatePassword`: [重設密碼](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/3a7ed05f-8c2a-42c8-9b60-b73fcddb8822)
- `GET：{url}/users/profile`: [取得個人資料](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/112f9990-41f0-4c0d-8704-67279a52a49c)，需設計 `isAuth` middleware。
- `PATCH：{url}/users/profile`: [更新個人資料](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/112f9990-41f0-4c0d-8704-67279a52a49c)，需設計 `isAuth` middleware
- `POST：{url}/posts/`：[張貼個人動態](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/dfc7891e-63fd-4141-989a-8776ee7ea9f0)
- `GET：{url}/posts/`：[觀看所有動態](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/5b6bb2a0-f0f3-4b39-841f-8cf3a0ed9707)

* 請提供 GitHub Repo，並提交到 [Discord](https://discord.com/channels/801807326054055996/1073411249926324234/1091329503038541896) 每日任務