为你的 Auth.js (Next Auth) 应用添加认证 (Authentication)

本指南将向你展示如何将 Logto 集成到你的使用 Auth.js 的 Next.js 应用中，Auth.js 之前被称为 Next Auth。

提示:

在本指南中，我们假设你已经在你的 Next.js 项目中设置了 Next Auth。如果没有，请查看 Next Auth 文档以开始使用。

前提条件

一个 Logto Cloud 账户或一个自托管 Logto。
一个已创建的 Logto 传统应用。
一个带有 Auth.js 的 Next.js 项目，查看 Auth.js 文档。

安装

通过你喜欢的包管理器安装 Auth.js：

npm
pnpm
yarn

npm i next-auth@beta

pnpm add next-auth@beta

yarn add next-auth@beta

查看 Auth.js 文档以获取更多详细信息。

集成

设置 Auth.js 提供商

提示:

你可以在管理控制台的应用详情页面找到并复制“应用密钥”：

修改 Auth.js 的 API 路由配置，添加 Logto 作为 OIDC 提供商：

Auth.js v5
Next Auth v4

设置环境变量：

AUTH_LOGTO_ISSUER=https://xxxx.logto.app/oidc
AUTH_LOGTO_ID=your-logto-app-id
AUTH_LOGTO_SECRET=your-logto-app-secret

./app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Logto],
});

然后你还可以添加一个可选的 Middleware 来保持会话活跃：

./middleware.ts
export { auth as middleware } from '@/auth';

app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';

const handler = NextAuth({
  providers: [
    {
      id: 'logto',
      name: 'Logto',
      type: 'oauth',
      // 你可以从 Logto 应用详情页面获取 well-known URL，
      // 在“OpenID Provider configuration endpoint”字段中
      wellKnown: 'https://xxxx.logto.app/oidc/.well-known/openid-configuration',
      authorization: { params: { scope: 'openid offline_access profile email' } },
      clientId: '<logto-app-id>',
      clientSecret: '<logto-app-secret>',
      client: {
        id_token_signed_response_alg: 'ES384',
      },
      profile(profile) {
        // 你可以在这里自定义用户资料映射
        return {
          id: profile.sub,
          name: profile.name ?? profile.username,
          email: profile.email,
          image: profile.picture,
        };
      },
    },
  ],
});

export { handler as GET, handler as POST };

将 wellKnown URL 替换为你的 Logto 应用的“OpenID Provider configuration endpoint”。
将 clientId 和 clientSecret 替换为你的 Logto 应用的 ID 和密钥。
自定义 profile 函数以将用户资料映射到 Next Auth 用户对象，示例中显示了默认映射。
记得将 id_token_signed_response_alg 设置为 ES384。

你可以在 Auth.js 文档中找到更多详细信息。

在我们深入细节之前，这里是终端用户体验的快速概述。登录过程可以简化如下：

你的应用调用登录方法。
用户被重定向到 Logto 登录页面。对于原生应用，将打开系统浏览器。
用户登录并被重定向回你的应用（配置为重定向 URI）。

此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议，Logto 强制执行严格的安全措施以保护用户登录。
如果你有多个应用程序，可以使用相同的身份提供商 (IdP)（日志 (Logto)）。一旦用户登录到一个应用程序，当用户访问另一个应用程序时，Logto 将自动完成登录过程。

要了解有关基于重定向的登录的原理和好处的更多信息，请参阅 Logto 登录体验解释。

备注:

在以下代码片段中，我们假设你的应用程序运行在 http://localhost:3000/。

让我们切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/api/auth/callback/logto 并点击“保存更改”。

app/components/sign-in.tsx
import { signIn } from '@/auth';

export default function SignIn() {
  return (
    <form
      action={async () => {
        'use server';
        await signIn('logto');
      }}
    >
      <button type="submit">Sign In</button>
    </form>
  );
}

app/components/sign-out.tsx
import { signOut } from '@/auth';

export function SignOut() {
  return (
    <form
      action={async () => {
        'use server';
        await signOut();
      }}
    >
      <button type="submit">Sign Out</button>
    </form>
  );
}

app/page.tsx
import SignIn from './components/sign-in';
import SignOut from './components/sign-out';
import { auth } from '@/auth';

export default function Home() {
  const session = await auth();

  return <div>{session?.user ? <SignOut /> : <SignIn />}</div>;
}

以上是一个简单的示例，你可以查看 Auth.js 文档以获取更多详细信息。

检查点

现在，你可以测试你的应用程序，看看认证 (Authentication) 是否按预期工作。

获取用户信息

显示用户信息

当用户登录后，auth() 的返回值将是一个包含用户信息的对象。你可以在你的应用中显示这些信息：

app/page.tsx
import { auth } from '@/auth';

export default async function Home() {
  const session = await auth();

  return (
    <main>
      {session?.user && (
        <div>
          <h2>声明 (Claims):</h2>
          <table>
            <thead>
              <tr>
                <th>名称</th>
                <th>值</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(session.user).map(([key, value]) => (
                <tr key={key}>
                  <td>{key}</td>
                  <td>{String(value)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </main>
  );
}

请求额外的声明 (Claims)

你可能会发现从 auth() 返回的对象中缺少一些用户信息。这是因为 OAuth 2.0 和 OpenID Connect (OIDC) 的设计遵循最小权限原则 (PoLP)，而 Logto 是基于这些标准构建的。

默认情况下，返回的声明（Claim）是有限的。如果你需要更多信息，可以请求额外的权限（Scope）以访问更多的声明（Claim）。

信息:

“声明（Claim）”是关于主体的断言；“权限（Scope）”是一组声明。在当前情况下，声明是关于用户的一条信息。

以下是权限（Scope）与声明（Claim）关系的非规范性示例：

提示:

“sub” 声明（Claim）表示“主体（Subject）”，即用户的唯一标识符（例如用户 ID）。

Logto SDK 将始终请求三个权限（Scope）：openid、profile 和 offline_access。

要请求额外的权限 (Scopes)，你可以配置 Logto 提供者的参数：

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Logto({
      // ...
      authorization: {
        params: {
          scope: 'openid offline_access profile email',
        },
      },
      // ...
    }),
  ],
});

需要网络请求的声明 (Claims)

为了防止 ID 令牌 (ID token) 过大，某些声明 (Claims) 需要通过网络请求获取。例如，即使在权限 (Scopes) 中请求了 custom_data 声明 (Claim)，它也不会包含在用户对象中。要访问这些声明 (Claims)，你需要进行网络请求以获取用户信息。

获取访问令牌 (Access token)

更新 NextAuth 配置，以便我们可以获取访问令牌 (Access token)：

./auth.ts
export const { handlers, signIn, signOut, auth } = NextAuth({
  // ...
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      // 将访问令牌 (Access token) 注入到会话对象中
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

获取用户信息

现在使用访问令牌 (Access token) 访问 OIDC 用户信息端点：

./app/page.tsx
// ...

export default async function Home() {
  const session = await auth();
  // 将 URL 替换为你的 Logto 端点，应该以 `/oidc/me` 结尾
  const response = await fetch('https://xxx.logto.app/oidc/me', {
    headers: {
      Authorization: `Bearer ${session?.accessToken}`,
    },
  });
  const user = await response.json();
  console.log(user);

  // ...
}

以上是一个简单的示例。记得处理错误情况。

访问令牌 (Access token) 刷新

访问令牌 (Access token) 的有效期很短。默认情况下，Next.js 只会在会话创建时获取一次。要实现自动访问令牌 (Access token) 刷新，请参阅刷新令牌 (Refresh token) 轮换。

权限 (Scopes) 和声明 (Claims)

Logto 使用 OIDC 权限和声明约定来定义从 ID 令牌和 OIDC 用户信息端点检索用户信息的权限和声明。“权限”和“声明”都是 OAuth 2.0 和 OpenID Connect (OIDC) 规范中的术语。

以下是支持的权限 (Scopes) 列表及相应的声明 (Claims)：

openid

声明名称	类型	描述	需要用户信息吗？
sub	`string`	用户的唯一标识符	否

profile

声明名称	类型	描述	需要用户信息吗？
name	`string`	用户的全名	否
username	`string`	用户名	否
picture	`string`	终端用户的个人资料图片的 URL。此 URL 必须指向一个图像文件（例如 PNG、JPEG 或 GIF 图像文件），而不是包含图像的网页。请注意，此 URL 应特别引用适合在描述终端用户时显示的终端用户的个人资料照片，而不是终端用户拍摄的任意照片。	否
created_at	`number`	终端用户创建的时间。时间表示为自 Unix 纪元（1970-01-01T00:00:00Z）以来的毫秒数。	否
updated_at	`number`	终端用户信息最后更新的时间。时间表示为自 Unix 纪元（1970-01-01T00:00:00Z）以来的毫秒数。	否

其他标准声明包括 family_name、given_name、middle_name、nickname、preferred_username、profile、website、gender、birthdate、zoneinfo 和 locale 也将包含在 profile 权限中，无需请求用户信息端点。与上述声明的区别在于，这些声明只有在其值不为空时才会返回，而上述声明在值为空时将返回 null。

备注:

与标准声明不同，created_at 和 updated_at 声明使用毫秒而不是秒。

email

声明名称	类型	描述	需要用户信息吗？
email	`string`	用户的电子邮件地址	否
email_verified	`boolean`	电子邮件地址是否已验证	否

phone

声明名称	类型	描述	需要用户信息吗？
phone_number	`string`	用户的电话号码	否
phone_number_verified	`boolean`	电话号码是否已验证	否

address

有关地址声明的详细信息，请参阅 OpenID Connect Core 1.0。

custom_data

声明名称	类型	描述	需要用户信息吗？
custom_data	`object`	用户的自定义数据	是

identities

声明名称	类型	描述	需要用户信息吗？
identities	`object`	用户的关联身份	是
sso_identities	`array`	用户的关联 SSO 身份	是

roles

声明名称	类型	描述	需要用户信息吗？
roles	`string[]`	用户的角色	否

urn:logto:scope:organizations

声明名称	类型	描述	需要用户信息吗？
organizations	`string[]`	用户所属的组织 ID	否
organization_data	`object[]`	用户所属的组织数据	是

urn:logto:scope:organization_roles

声明名称	类型	描述	需要用户信息吗？
organization_roles	`string[]`	用户所属的组织角色，格式为 `<organization_id>:<role_name>`	否

考虑到性能和数据大小，如果“需要用户信息吗？”为“是”，则表示声明不会显示在 ID 令牌中，而会在用户信息端点响应中返回。

API 资源

我们建议首先阅读 🔐 基于角色的访问控制 (RBAC)，以了解 Logto RBAC 的基本概念以及如何正确设置 API 资源。

配置 Logto 提供商

一旦你设置了 API 资源，就可以在应用中配置 Logto 时添加它们：

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Logto({
      // ...
      authorization: {
        params: {
          scope: 'openid offline_access profile email',
          resource: 'https://shopping.your-app.com/api',
        },
      },
      // ...
    }),
  ],
});

每个 API 资源都有其自己的权限（权限）。

例如，https://shopping.your-app.com/api 资源具有 shopping:read 和 shopping:write 权限，而 https://store.your-app.com/api 资源具有 store:read 和 store:write 权限。

要请求这些权限，你可以在应用中配置 Logto 时添加它们：

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Logto({
      // ...
      authorization: {
        params: {
          scope: 'openid offline_access profile email shopping:read shopping:write',
          resource: 'https://shopping.your-app.com/api',
        },
      },
      // ...
    }),
  ],
});

你可能会注意到权限是与 API 资源分开定义的。这是因为 OAuth 2.0 的资源指示器指定请求的最终权限将是所有目标服务中所有权限的笛卡尔积。

因此，在上述情况下，权限可以从 Logto 中的定义简化，两个 API 资源都可以拥有 read 和 write 权限，而无需前缀。然后，在 Logto 配置中：

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Logto({
      // ...
      authorization: {
        params: {
          scope: 'openid offline_access profile read write',
          resource: 'https://shopping.your-app.com/api',
        },
      },
      // ...
    }),
  ],
});

对于每个 API 资源，它将请求 read 和 write 权限。

备注:

请求 API 资源中未定义的权限是可以的。例如，即使 API 资源没有可用的 email 权限，你也可以请求 email 权限。不可用的权限将被安全地忽略。

成功登录后，Logto 将根据用户的角色向 API 资源发布适当的权限。

获取 API 资源的访问令牌

Auth.js 只会在没有资源参数的情况下获取一次访问令牌。我们需要自己实现访问令牌的获取。

获取刷新令牌

更新 Logto 提供者配置，添加 "prompt" 参数并将其设置为 consent，并确保包含 offline_access 权限：

./auth.ts
import NextAuth from 'next-auth';

export const { handlers, signIn, signOut, auth } = NextAuth({
  // ...
  authorization: {
    params: {
      prompt: 'consent',
      scope: 'openid offline_access shopping:read shopping:write',
      resource: 'https://shopping.your-app.com/api',
      // ...
    },
  },
  // ...
});

然后添加一个回调，将 refresh_token 保存到会话中：

./auth.ts
export const { handlers, signIn, signOut, auth } = NextAuth({
  // ...
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        // ...
        token.refreshToken = account.refresh_token;
      }
      return token;
    },
    async session({ session, token }) {
      // ...
      session.refreshToken = token.refreshToken;
      return session;
    },
  },
});

获取访问令牌

使用 refresh_token，我们可以从 Logto 的 OIDC 令牌端点获取访问令牌。

./app/page.tsx
// ...

export default async function Home() {
  const session = await auth();

  if (session?.refreshToken) {
    // 用你自己的应用 ID 和密钥替换，可以查看“集成”部分。
    const basicAuth = Buffer.from('<logto-app-id>:<logto-app-secret>').toString('base64');

    // 用你的 Logto 端点替换 URL，应该以 `/oidc/token` 结尾
    const response = await fetch('https://xxx.logto.app/oidc/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: `Basic ${basicAuth}`,
      },
      body: new URLSearchParams({
        grant_type: 'refresh_token',
        refresh_token: session.refreshToken,
        resource: 'https://shopping.your-app.com/api',
      }).toString(),
    });

    const data = await response.json();
    console.log(data.access_token);
  }

  // ...
}

获取组织令牌

如果你对组织不熟悉，请阅读 🏢 组织（多租户）以开始了解。

在配置 Logto 客户端时，你需要添加 urn:logto:scope:organizations 权限：

./auth.ts
import NextAuth from 'next-auth';
import Logto from 'next-auth/providers/logto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Logto({
      // ...
      authorization: {
        params: {
          scope: 'openid offline_access urn:logto:scope:organizations',
        },
      },
      // ...
    }),
  ],
});

用户登录后，你可以获取用户的组织令牌：

类似于 API 资源的访问令牌 (Access token)，我们可以使用刷新令牌 (Refresh token) 来获取组织访问令牌 (Organization token)。

./app/page.tsx
// ...

export default async function Home() {
  const session = await auth();

  if (session?.refreshToken) {
    // 将应用程序 ID 和密钥替换为你自己的，你可以查看“Integration”部分。
    const basicAuth = Buffer.from('<logto-app-id>:<logto-app-secret>').toString('base64');

    // 将 URL 替换为你的 Logto 端点，应该以 `/oidc/token` 结尾
    const response = await fetch('https://xxx.logto.app/oidc/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: `Basic ${basicAuth}`,
      },
      body: new URLSearchParams({
        grant_type: 'refresh_token',
        refresh_token: session.refreshToken,
        resource: 'urn:logto:scope:organizations',
        organization_id: 'organization-id',
      }).toString(),
    });

    const data = await response.json();
    console.log(data.access_token);
  }

  // ...
}

延伸阅读

终端用户流程：认证流程、账户流程和组织流程配置连接器保护你的 API 从 NextAuth.js v4 迁移 Logto 集成到 v5

前提条件​

安装​

集成​

设置 Auth.js 提供商​

配置登录重定向 URI​

关于基于重定向的登录​

实现登录和登出​

实现登录和登出按钮​

在页面中显示登录和登出按钮​

检查点​

获取用户信息​

显示用户信息​

请求额外的声明 (Claims)​

需要网络请求的声明 (Claims)​

获取访问令牌 (Access token)​

获取用户信息​

访问令牌 (Access token) 刷新​

权限 (Scopes) 和声明 (Claims)​

API 资源​

配置 Logto 提供商​

获取 API 资源的访问令牌​

获取刷新令牌​

获取访问令牌​

获取组织令牌​

延伸阅读​

前提条件

安装

集成

设置 Auth.js 提供商

配置登录重定向 URI

关于基于重定向的登录

实现登录和登出

实现登录和登出按钮

在页面中显示登录和登出按钮

检查点

获取用户信息

显示用户信息

请求额外的声明 (Claims)

需要网络请求的声明 (Claims)

获取访问令牌 (Access token)

获取用户信息

访问令牌 (Access token) 刷新

权限 (Scopes) 和声明 (Claims)

API 资源

配置 Logto 提供商

获取 API 资源的访问令牌

获取刷新令牌

获取访问令牌

获取组织令牌

延伸阅读