## 介绍当涉及到一个新项目时，你通常无法跳过几个事情：API、认证 + 授权、身份和终端用户登录流程。过去，这些东西很难启动，因为有很多概念和技术广泛传播：RESTful/GraphQL、Web 前端、本地客户端、连接客户端与 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 管理控制台的左侧导航栏中，点击“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 SDK 来简化这些技术性工作。 ### 集成 Logto SDK 按照 [集成指南](https://docs.logto.io/docs/recipes/integrate-logto/) 将 Logto SDK 集成到你的客户端应用中。它不仅能够生成针对 GraphQL 请求的有效访问令牌，还能为你的终端用户提供流畅的登录体验。完成指南后，我们需要对 `LogtoConfig` 进行一个小修改：在 `resources` 中添加你在 Logto 管理控制台创建的 API 指标。以 React SDK 为例： ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '<你的应用程序 ID>', 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 服务器，与团队进行实时聊天。