如何在使用 Bearer 令牌作為授權標頭調用資源 API 時在客戶端/瀏覽器中保存 OAuth2 訪問令牌

Question

我有一個 Angular 應用程序，我在其中使用Keycloak (OAuth2 provider) Login Page 。 在登錄頁面中使用用戶名和密碼登錄后，我將獲得授權代碼，並使用該代碼調用 Keycloak Token Generator API http://localhost:8080/realms/CloudBrokerRealm/protocol/openid-connect/token並獲得訪問權限令牌和刷新令牌成功。 在獲得令牌之前沒有問題。

現在我需要在客戶端存儲訪問和刷新令牌，以便我可以在授權標頭中發送承載訪問令牌以調用我的后端 Rest API（使用 Java、Spring Boot、Spring Security 創建的資源 API ）。

在互聯網上搜索許多鏈接后，我可以看到有些人建議將令牌存儲在 httpOnly cookie 中，而不是瀏覽器上的本地存儲或會話存儲。 但是我無法將令牌存儲在 httpOnly cookie 中，因為 Keycloak 在 Response Body 中發送令牌，而不是在調用上述 Keycloak Token Generator API 時作為 cookie。 從響應正文中提取令牌后，我無法從 javascript/angular 設置 cookie (httpOnly)，因為這是不可能的。

所以我的問題是：

1. 如何在客戶端存儲 OAuth2 訪問和刷新令牌，這將需要調用一些后端 Rest API（資源 API），並將 Bearer Token 作為“授權”標頭。
2. 如果我們將它存儲在 httpOnly cookie 中，我們將如何將令牌作為“授權”標頭發送，因為我們的 Rest API 將需要該強制標頭。

Answer 1

OAuth 2.0 for Browser Based Apps中描述了當前的最佳實踐。 6.2 節描述了 cookie 到令牌的轉換通常是如何通過前端的后端完成的。

令牌不能完全安全地存儲在瀏覽器中。 人們可能認為在 Javascript 中使用令牌的應用程序具有更大的安全問題，例如攔截和泄露令牌的方法。

SPA 的 cookie 實現通常涉及管理 cookie 和令牌之間轉換的 API 網關。 不過，它是一個額外的部署層，因此需要進行設計和規划。

網址

一種選擇是在這樣的 URL 上使用 Web 后端作為 OAuth 客戶端並發布 cookie。 這確實是一個網站，但有些人覺得這個選項最簡單：

• https://www.example.com （網絡后端）

將 Web 和 API 問題分開的 SPA 解決方案可以改為使用三個這樣的 URL，它們都托管在 API 網關后面：

• https://www.example.com （靜態內容）
• https://www.example.com/api（API路由）
• https://www.example.com/oauth （發布 cookie 的 OAuth 客戶端）

Answer 2

不要自己實現授權代碼（使用 PKCE）流程。 使用經過認證的 OIDC 客戶端庫。

我最喜歡的 Angular 是angular-auth-oidc-client 。

它會處理

• 重定向到授權服務器
• 交換令牌的授權碼
• 靜默令牌在到期前刷新
• 使用 Angular 路由守衛自動登錄
• 使用 HTTP 攔截器請求授權（請求標頭中的位置訪問令牌）
• ...

所有這一切只需一點點確認。