## 介紹當開始一個新項目時，你通常無法跳過幾件事情：API、身份驗證 + 授權、身份和終端用戶登錄流程。過去，很難啟動這些事情，因為有許多概念和技術廣泛傳播：RESTful/GraphQL，網頁前端，原生客戶端，將客戶端與 API 連接，身份驗證最佳實踐以平衡安全性和用戶體驗等等。此外，大部分工作都是“重複性”的。我的意思是，幾乎每個項目都需要它們，而且相似，只需稍作調整。聽起來可怕又繁瑣？不要驚慌。今天我們有開源。通過下面的兩個開源項目，事情變得不再棘手： - [Logto](https://github.com/logto-io/logto)：幫助你在幾分鐘內建立登錄、身份驗證和用戶身份。 - [Hasura](https://github.com/hasura/graphql-engine)：為你的資料庫提供快速而即時的 GraphQL API，並具有精細的訪問控制。在本文中，我們將專注於連接 Logto 和 Hasura，這使你能夠毫無障礙地實現身份驗證、授權和 GraphQL API。因此，你可以迅速投入到業務中，而無需學習艱深的技術。 ## 開始 ### 先決條件由於 [Logto](https://docs.logto.io/docs/tutorials/get-started/) 和 [Hasura](https://hasura.io/docs/latest/getting-started/index/) 都有不錯的入門指南，我們假設你已經閱讀過這些指南並有基本的了解。需要運行中的實例。我們假定可訪問的端點是： - Logto：`http://localhost:3001` - Hasura：`http://localhost:8080` 如果你使用 Docker/Docker Compose，為了訪問你的機器（主機）的 `localhost`，你可以使用 Docker 的神奇字符串 `host.docker.internal`。在此情況下，Logto 端點將為 `http://host.docker.internal:3001`。此外，我們假設你有一個平台和框架來構建客戶端應用，例如 React 或 Next.js。 ### 在 Logto 中設置 API 在你的 Logto Admin Console 左側導航欄上，點擊 “API 資源”，你將看到 API 資源管理頁面。接著點擊右上角的 “+ 創建 API 資源” 按鈕。在打開的模式中，輸入 `Hasura` 作為 API 名稱以及 `https://hasura.api` 作為 API 識別符。 Create API modal

我們將在文章的其餘部分使用該 API 標識符。但可以根據偏好更改值。點擊 “創建 API 資源”，將顯示一條消息，指示資源已成功創建。這就是我們在 Logto 中目前需要的所有。 ### 為 Hasura 創建角色為了利用 Hasura 的權限管理，我們將在 Logto 中創建角色，這些角色將映射到 Hasura 的角色。 Create Role

角色名稱必須等於 Hasura“權限”頁面中的角色名稱。記得將角色指派給用戶。 ### 在 Hasura 中啟用 webhook 身份驗證 [Hasura 使用基於角色的訪問管理](https://hasura.io/docs/latest/auth/index/)，來處理授權。因此，我們只需弄清楚身份驗證。它支持兩種方法：Webhook 和 JWT。我們選擇 [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/)，因為它更靈活。要啟用 webhook 身份驗證，你必須設置管理密鑰和身份驗證 hook 端點。 - 管理密鑰是在發送請求時獲得 Hasura 管理員訪問權限的金鑰。在啟用 webhook 身份驗證之前，它是必需的。記得把它放在安全的地方，不要在生產環境中使用它。 - 身份驗證 hook 端點是一個 URL 用於發送身份驗證請求。你可以通過 [環境變數](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode) 來設置它們： ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # 用你自己的密鑰替換 HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 你可能注意到，我們使用在 Logto 中填寫的 API 識別符來構建身份驗證 hook 端點。這確保用戶傳遞的是正確的 bearer token，而不是可能從惡意來源來的一個隨機 token。如果你有不同的 Logto 端點或 API 標識符，需要更新身份驗證 hook 端點。例如，你有 `https://logto.domain.com` 作為 Logto 端點以及 `https://graphql.domain.com` 作為 API 識別符，則它將是： ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 從現在起，對於每個 GraphQL 請求，Hasura 會將所有請求標頭帶到 Logto 身份驗證 hook 端點，Logto 將做出正確的回應。 ## 發送安全的 GraphQL 請求 ### 總結由於我們不會在生產環境中使用 Hasura 管理密鑰，每個 GraphQL 請求都由以下標頭來保護： - `Authorization` 由 Logto 生成的標準 bearer token。 - `Expected-Role` 你希望 Logto 在身份驗證 hook 回應中顯示的角色。如果 `Authorization` 標頭表示的用戶不具有 `Expected-Role`，Logto 將回應 `401 Unauthorized`。 `Authorization` 標頭需要一個有效的 JWT 格式 Access Token 和 Hasura API 標識符作為受眾。慢著——記住並組合這些內容有點困難。幸運的是，我們有 Logto SDK 來簡化這些技術部分。 ### 整合 Logto SDK 遵循 [整合指南](https://docs.logto.io/docs/recipes/integrate-logto/) 在你的客戶端應用中整合 Logto SDK。這不僅能生成用於 GraphQL 請求的有效 Access Token，還能為你的終端用戶提供流暢的登錄體驗。完成指南後，我們需要對 `LogtoConfig` 做一個小修改：將你在 Logto Admin Console 中創建的 API 識別符添加到 `resources`。以 React SDK 為例： ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // 添加此行 }; ``` ### 發送請求最終！用戶登錄後，使用 Logto SDK 中的 `getAccessToken()` 來獲取用於 Hasura GraphQL 請求的 Access Token： ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // 發送請求之前 request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 回顧通過上述努力，我們成功實現了介紹中的所有不可缺少的內容： - 一個基於數據庫模式的 GraphQL API 端點 - 一個基於 OIDC 協議的身份驗證和身份服務 - 完整的終端用戶登錄流程和身份驗證狀態管理 - 基於用戶身份和角色的安全 API 訪問不是很難吧？如果你遇到任何問題，隨時加入 [Logto](https://discord.gg/vRvwuwgpVX) 或 [Hasura](https://discord.gg/hasura) 的 Discord 服務器，與團隊進行即時聊天。