OAuth 登入流程(時序圖)

圖解工程 · 驗證設計由一則提示生成
唯讀預覽

原始提示

繪製我們應用程式的 OAuth 登入流程

做一份自己的版本

關於框架

追蹤成功的登入交換流程

這個時序圖透過 12 則訊息,呈現 User、Browser、Backend API、OAuth Provider 與 DB 之間的互動。流程從「使用 Google 登入」開始,經過授權與同意,再將授權碼回傳至瀏覽器。瀏覽器向 /auth/callback 發送請求,後端則以授權碼交換存取 Token 與 ID Token。

最後幾則訊息會 Upsert 使用者記錄、回傳使用者物件、設定工作階段 Cookie,並重新導向至控制面板。這是一份成功路徑的草圖,範例未包含拒絕、驗證失敗或工作階段過期等分支。

請依照實作調整參與者名稱與回呼訊息。需要明確討論的檢查項目與失敗情況,也請一併補上,不要將這張簡短的互動圖視為完整的驗證規格。

包含內容

你會得到

  • 涵蓋使用者、瀏覽器、後端、提供者與資料庫的五個參與者
  • 從 Google 登入到重新導向至控制面板的十二則訊息
  • 回傳存取 Token 與 ID Token 的授權碼交換流程
  • 使用者記錄 Upsert 與工作階段 Cookie 訊息
圖解

OAuth 登入流程(時序圖)

authoauthsequencetechnicalbackend

✦ Free preview · Sign in to use

常見問題

常見問題

這個範例有呈現登入失敗的情況嗎?

不會。這個範例只呈現從點選登入到進入控制面板的一次成功登入流程。請針對實作會處理的特定錯誤,要求加入涵蓋其他分支的流程。

使用者記錄在哪裡建立或更新?

Token 回應後,Backend API 會傳送 Upsert 使用者記錄訊息給 DB。DB 回傳使用者物件後,API 才會設定瀏覽器的工作階段 Cookie。

這是否列出了所有驗證檢查?

不會。這些訊息省略了實作細節與驗證步驟。使用這張圖進行工程審查前,請依照應用程式的驗證設計補上相關內容。

OAuth 登入流程(時序圖)

免費開始,無需信用卡。

Free preview · Sign in to use