OAuth 2.0 - Authorization Code Flow

前言

OAuth是”Open Authorization”,它讓使用者在授權伺服器上，同意 Client App 代表使用者去存取資源。
使用者會在授權伺服器上驗證帳密，將 Access Token 交給 Client App，所以 Client App 並不會拿到 使用者的帳密。

以上圖來說，當使用者使用 Web App 需要輸入帳密時，應該是網頁轉到 Security Token Service(Authorization Server) 輸入使用者的帳密，而 Web App 從 Token Service 取得 Token 去存取 API。

基本概念

OAuth 2.0 主要有4個參與交換的合作對象:

• Resources: 使用 Authorization Server 保護的資料或是API，每個 Resource 有一個唯一的名稱， Client 用這些名稱指定要存取的 Resource。
• Clients: 跟 Authorization Server 註冊過的 App (會取得 client id 及 client secret)，例如 Web 應用程式, 手機 App, 桌面應用程式, SPA, Server Processes 等等。
• Users: Resource Owner，具有允許 Client 存取 Protected Resource 的能力。
• Authorization Server: 也稱為身份識別提供者(identity provider)，包含以下功能
  • 保護 Resources
  • 驗證 User
  • Single sign-on
  • 管理及驗證 Client
  • 發行 Token 給 Client
  • 驗證 Token

了解這些合作對象後，接下來透過這些對象的合作，有那些的 OAuth flow 及它們的適用情境。

以下使用OAuth 2.0 Playground來演示。

OAuth flow

開始之前需要註冊 Client

Authorization Code Flow

1.組出跟 Authorization Server 取回 Code 的 URL(authorize)，
response_type的值為code(表示我們要取回授權碼)，client_id, redirect_uri為 Client 註冊的資訊，
state為防止 XSRF 準備的值，當 Authorization Server 回 Call 時，也會把接收到的 state 回傳回來，
scope 則為要求的 Resources，這裡給的值為 photo 及 offline_access ，這裡是用 **+**，有些是使用 空白 分隔。

https://authorization-server.com/authorize?
  response_type=code
  &client_id=kPfE4R0EH5HRw4oR-DxbckSB
  &redirect_uri=https://www.oauth.com/playground/authorization-code.html
  &scope=photo+offline_access
  &state=ClJTpXOaXdN-0ER4

2.轉址到上述建立的 URL(Authorization Server 的 Authorization endpoint)，在 Authorization Server系統中，輸入使用者帳號及密碼

3.顯示同意 Client 存取要求的 scope 權限(consent 畫面可以設定顯示與否)。

4.當使用者同意後，Authorization Server 會把產生的 code (授權碼)及剛才傳過去的 state 一併傳回來給 redirect_uri 的網址(authorization-code.html)去驗證 state 值是否正確。

註:參數透過 QueryString ，所以 response_mode=query

5.組出要透過 Code 來跟 Authorization Server 取回 AccessToken 的 URL(token)，
grant_type為authorization_code，code為剛才從 Authorization Server 取回的 授權碼

POST https://authorization-server.com/token

grant_type=authorization_code
&client_id=kPfE4R0EH5HRw4oR-DxbckSB
&client_secret=x60IAq1A5sG090NlY3ANlCpOAnhajIFJbP7lCrF_Vr2Sr8Ij
&redirect_uri=https://www.oauth.com/playground/authorization-code.html
&code=P8Er2eBWUngJcc2m6VB4wNOodXMQiNO5Qtrycn2g4hI9bzhg

6.Post後就會得到 AccessToken

{
  "token_type": "Bearer",
  "expires_in": 86400,
  "access_token": "C3QQyQycfCT4UMrh8K4GCMnvlHCxHrdlXQf6SFoPDWjRxpG3cDlNjPPHPLHOpeHgeWdg84aQ",
  "scope": "photo offline_access",
  "refresh_token": "ckWvTKpkiLANJ67Ktzd6f3PA"
}

要呼叫 API 時，加入 access_token 就可以了

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", access_token);

註: 因為 scope 有 offline_access，所以 refresh_token 會一併回傳

適用情境

因為在取得 AccessToken 時，需要傳遞 client_secret ，所以適用於 Server Site 的 App。
Public App 請參考 OAuth 2.0 - Authorization Code Flow With PKCE 或是 OAuth 2.0 - Implicit Flow

參考資料

What is OAuth 2.0?
Microsoft 身分識別平臺上的 OAuth 2.0 和 OpenID Connect 通訊協定
OAuth 2.0 Playground
Authorization Code Grant

• 註:本文有些圖片引用自 https://identityserver4.readthedocs.io 網站