Next.js/Next-Auth/Apollo/GraphQL 设置

Question

我正在寻找有关如何处理使用 Apollo 和 GraphQL 访问 PostgreSQL 数据库的 next.js 前端的建议。我认为将前端和后端分开是有意义的，但我意识到存在权衡。 Next.js 和 NextAuth.js 在使用 Next.js API 功能时似乎设计得很好。

几个要求：

1. 需要根据用户（公共、内部、管理员）限制数据。
2. 使用 Google OAuth 登录

考虑到这一点，如果您希望后端了解用户的访问权限，NextAuth.js 会变得更加复杂。

但是，如果我的 apollo/graphql 后端是独立的，那么肯定会有以下好处：

1. 如果需要，我可以更换前端，因此具有一定的灵活性
2. 代码和依赖项可能比组合的前端/后端更简单

我目前面临的挑战是 NextAuth.js 在 Next.js 应用程序中工作，但我还没有弄清楚如何控制数据访问。到目前为止，我得到的最好的想法是某种将 NextAuth.js 和我的后端混合在一起的令牌管理。这似乎不是 NextAuth.js 的设计方式，所以我正在重新考虑整个架构并寻找建议。

谢谢！

我在这里找到了对类似问题的非常简短的讨论，但我很想听听其他人会如何处理这个问题。 How to forward user sessions in Next.js + Graphql decoupled architecture?

Answer 1

我将尽力给出一个相当通用的答案，使用 JWT 进行授权，但我将不得不做出一些假设，因为我对 Google OAuth 和相关的 Google 不是非常熟悉系统。

首先，也是最重要的一点，重要的是要明确身份验证或“你是谁”与授权或“你能做什么”之间的区别。

到目前为止，我的最佳想法是将 NextAuth.js 和我的后端混合在一起的某种令牌管理。这似乎不是 NextAuth.js 的设计方式，所以我正在重新考虑整个架构并寻找建议。

NextAuth 是一个身份验证库，是 NextAuth 创建的 JWT 的 doesn't support external validation，因此您不希望将 NextAuth 与后端混合使用是正确的。当有人登录 NextAuth 时，会创建一个 NextAuth 特定的 JWT（一个 ID 令牌），它将在 Client 和 Next Server 之间传递。它告诉你用户是谁，并证明他们已经登录。除非你使用数据库会话，我没有使用过，所以无法交谈。

需要额外的工作来实现授权，以便您拥有一个 JWT，该 JWT 还描述了用户拥有的访问权限，您可以将其传递给您的后端。

理想情况下，您将能够为此利用 Google OAuth，假设是这种情况，我会这样做：

对于架构

• 我对 GraphQL/Apollo 不是很熟悉，但那里的分离似乎很好。不过，重要的是要注意，不分离也可能没问题。任何方法都需要权衡取舍，因此您必须评估哪种方法最适合您的情况。
• 每当您调用后端时，您都会将 JWT 与调用一起作为 Authorization 标头以Bearer <token> 的形式传递。
• 然后，您在后端验证每个传入呼叫的​​令牌，并根据需要允许呼叫继续（或不继续）。

This is the relevant info 我在 Apollo 文档中找到。

为了令牌

在您的 NextAuth 提供程序配置中，您可以在 jwt callback 中向 NextAuth JWT 添加信息。

理想情况下，您的 Google OAuth 也 为您提供 JWT（访问令牌）。这应该是 relatively easy to validate on the backend，这是您想要用于授权的东西。

您可以在用户首次登录时将此 Google OAuth JWT（访问令牌）内存储在 NextAuth JWT（id 令牌）中，然后在您创建之前在 Next.js 服务器上检索它调用 GraphQL 后端。看起来像这样：

// [...nextauth].js
const options = {
  // ... other configuration
  callbacks: {
    jwt: async (token, user, account, profile, isNewUser) => {
      const isSignIn = !!user

      if (isSignIn) {
        token.b2c = {
          accessToken: account.accessToken,
          refreshToken: account.refreshToken,
          iat: profile.iat,
          exp: profile.exp,
        }
      }

      return Promise.resolve(token)

    }
  }
}

这是我使用的配置的简化示例。我的配置适用于 Azure AD B2C，但它与您正在寻找的一般流程相同。 You can see my full config here 显示了我用来根据需要处理刷新访问令牌的一些附加代码。

如果您没有可从 Google OAuth 流程中使用的东西，这会变得更加复杂，您必须构建一些自定义的东西。