iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
佛心分享-SideProject30

我的時間到底去哪裡了!? – 個人時間數據系統開發挑戰系列 第 8

登入與使用者機制 (Part 1):需求與設計思路

  • 分享至 

  • xImage
  •  

專案需要登入機制,因為作者野心太大
https://ithelp.ithome.com.tw/upload/images/20250920/20160279ptaSdFytCj.png

希望未來系統能繼續開發下去,讓更多人使用,登入機制是必須的。

##但是要怎麼導入登入機制呢?
剛開始想的時候大概有三個方向

A:先自己弄一套 email , password登入機制
B:直接導入google登入
C:AB同時

然後我就在想,我每天開發+寫文章的時間約三到四小時(假設不偷懶)

選A的話還要搞密碼、還要弄個登入的模組、為了這個模組我還要如何如何

再想起後續還要搞密碼安全性問題之類的,該有多煩阿

所以就選B,雖然還要串google的登入API,反正沒串過試試看。


決定要導入Google登入了,那麼要怎麼導入?

經過查資料問AI的結果,大致上有兩種方案,下面是請AI整理過後的內容

Option A — 每次 API 請求都附上 Google ID Token

  • 流程
    1. 前端使用 Google Identity Services(GIS)讓使用者登入,取得 Google ID Token
    2. 每次呼叫後端 API 時,都在 Authorization: Bearer <google_id_token> 中附上該 Token。
    3. 後端在每次請求時驗證 Google Token(簽章、audience、expiry),並找到/建立對應的使用者。
  • 優點
    • 實作最簡單,無需額外 Auth API。
    • 不用管理自己的 JWT 系統。
  • 缺點
    • 效能成本較高:每次 API 請求都要驗證 Google Token(雖然 Google 公鑰會快取,但仍需做外部簽章驗證)。
    • Token 內容與 TTL 由 Google 決定(通常 ~1 小時),無法添加自訂 Claims(如角色、權限)。
    • 難以做到 Token 主動撤銷(revocation),例如使用者違規後立即登出全部裝置。

Option B — 登入後交換成自己的 JWT

  • 流程
    1. 前端使用 GIS 登入取得 Google ID Token。
    2. 前端呼叫 POST /auth/google,將 Google ID Token 傳給後端。
    3. 後端驗證 Google ID Token(一次),找到/建立使用者,並簽發自己的 JWT(例如有效期 30 分鐘)。
    4. 後續所有 API 請求改用 Authorization: Bearer <your_jwt>,後端只驗證自己的 JWT。
  • 優點
    • 驗證成本低:驗證自己的 JWT 只需本地金鑰(HS256 / RS256),不需每次對 Google 公鑰驗簽。
    • 完全掌握 Token TTL 與內容,可加入自訂 Claims(userIdrolesscopes 等)。
    • 可實作 revocation / sessions:例如管理使用者的登入裝置、主動登出、限制多裝置等。
    • 之後容易擴充 Refresh Token 機制,支援長期登入。
  • 缺點
    • 需要多實作一個 Auth API(/auth/google)與 JWT 驗證 Filter。
    • 初期比 Option A 稍微多一點開發量。

這邊選B,主要考量的點是選A的話,每次請求由後端去驗證 Google Token這個點對我來說不太合理
因為需要跑程式 = 出錯機率提高,既然有登入一次就持續使用ID token的機制就不要選風險比較高的方案

這樣下去做分工明確,就算出錯也比較好找問題

流程會是這樣:
https://ithelp.ithome.com.tw/upload/images/20250920/20160279NzXylSv3cD.png

後兩篇會繼續說明

前端登入實作
(Google Oauth , JWT 狀態管理(Context、localStorage、自動清除過期), API 請求如何帶 Token)

後端認證實作
(Spring Security 設定 , 驗證 Google ID Token 流程 , JWT 產生與驗證)

天哪,怎麼那麼多,我寫的完嗎QQ

總之Day8 先到這裡,後續兩篇會一步一步來。

圖片出處:Gatao 2: Rise of the King、自己畫


上一篇
檢討一下,然後分享個小東西
下一篇
前端登入實作:Google OAuth + JWT
系列文
我的時間到底去哪裡了!? – 個人時間數據系統開發挑戰15
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言