## 介紹談到一個新專案，你通常無法避免幾件事情：API、驗證 + 授權、身份識別以及最終用戶的登錄流程。以前很難啟動這些事情，因為有許多概念和技術廣泛分佈：RESTful/GraphQL、網頁前端、原生客戶端、將客戶端與 API 連接、平衡安全性和用戶體驗的最佳實踐等。而且，大多數工作都是“重複”的。我的意思是，這些事情幾乎在每個專案中都是必需的和類似的，只需稍作調整即可。聽起來很可怕也很單調？別擔心。今天我們有開源。使用下面的兩個開源專案，事情變得不再複雜： - [Logto](https://github.com/logto-io/logto)：幫助你在幾分鐘內構建登錄、驗證和用戶身份。 - [Hasura](https://github.com/hasura/graphql-engine)：在你的資料庫上快速、即時的 GraphQL APIs，具有細粒度的訪問控制。在這篇文章中，我們將專注於連接 Logto 和 Hasura，讓你能夠輕鬆實現驗證、授權和 GraphQL APIs。因此，你可以快速進入商業應用，而不必進行艱深的學習。 ## 開始 ### 先決條件由於 [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 的 magic string `host.docker.internal`。在這種情況下，Logto 的端點將是 `http://host.docker.internal:3001`。並且，我們假設你有一個首選的平台和框架來構建客戶端應用，如 React 或 Next.js。 ### 在 Logto 設置 API 在你的 Logto 管理控制台的左側導航側邊欄中，點擊 “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 驗證，你必須設置管理者密碼和驗證鉤子端點。 - 管理者密碼是在發送請求時擁有 Hasura 管理訪問的密鑰。它是在開啟 webhook 驗證之前所需的。記得妥善保管，不要在生產環境中使用。 - 驗證鉤子端點是一個用於發送驗證請求的 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 標識符來構建驗證鉤子端點。這可確保用戶通過正確的持有者令牌而不是可能的惡意來源的隨機令牌。如果你有不同的 Logto 端點或 API 指示符，需要更新驗證鉤子端點。假設你有 `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 驗證鉤子端點，並且 Logto 將會正確回應。 ## 發送安全的 GraphQL 請求 ### 總結由於我們不會在生產環境中使用 Hasura 管理者密鑰，每個 GraphQL 請求都是由以下標頭保護的： - `Authorization` Logto 生成的標準持有者令牌。 - `Expected-Role` 你希望 Logto 在驗證鉤子回應中顯示的角色。如果 `Authorization` 標頭所指的用戶沒有 `Expected-Role`，Logto 將回應 `401 Unauthorized`。 `Authorization` 標頭需要一個有效的訪問令牌，它是以 JWT 格式的，並且 Hasura API 指示符為受眾。等等——記住和組合所有這些內容有點困難。幸運的是，我們有 Logto SDKs 可以簡化技術部分。 ### 整合 Logto SDK 按照[整合指南](https://docs.logto.io/docs/recipes/integrate-logto/)在你的客戶端應用中整合 Logto SDK。它不僅能夠生成對 GraphQL 請求的有效訪問令牌，還提供流暢的最後用戶登錄體驗。完成指南後，我們需要對 `LogtoConfig` 進行一個小修改：將你在 Logto 管理控制台中創建的 API 指示符添加到 `resources`。以下是 React SDK 的示例： ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // 添加這一行 }; ``` ### 發送請求最後！用戶登錄後，使用 Logto SDK 中的 `getAccessToken()` 來獲取 Hasura GraphQL 的訪問令牌： ```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 服務器，與團隊進行即時聊天。