跳至内容
从 NextAuth.js v4 迁移?阅读 我们的迁移指南.
指南为 OAuth 配置 GitHub

使用 GitHub 进行 OAuth

在本教程中,我们将设置一个 Next.js 应用程序中的 Auth.js,以便能够使用 **GitHub** 登录。

本教程使用 GitHub 作为 OAuth 提供者,使用 Next.js 作为框架。请注意,对于任何 OAuth 提供者或任何框架,**流程都将相同或非常相似**,主要区别在于您在所选提供者的仪表板中注册应用程序的方式。

设置 Auth.js

安装 Auth.js 和 Next.js

在本教程中,我们将使用默认的 Auth.js & Next.js 示例应用程序。如果您已经有一个现有的 Next.js 应用程序,它也应该可以工作。如果您没有,请克隆存储库

git clone https://github.com/nextauthjs/next-auth-example.git && cd next-auth-example

如果您使用的是示例应用程序,则 Auth.js 已经安装,否则请按照 安装说明 进行操作。

创建服务器配置

接下来,我们将创建主要的 Auth.js 配置文件,其中包含 Auth.js 的必要配置,以及动态路由处理程序。

./auth.ts
import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, auth } = NextAuth({
  providers: [GitHub],
})
./app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers
export const runtime = "edge" // optional

由于这是一个 catch-all 动态路由,它将响应所有相关的 Auth.js API 路由,以便您的应用程序可以使用 OAuth 2 协议与所选 OAuth 提供者进行交互。

添加环境变量

如果您还没有,请创建一个 .env.local 文件,如 安装部分 中所述,并添加以下两个 GitHub 变量

.env.local
AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

我们将使用 GitHub 开发者门户中适当的值填充 AUTH_GITHUB_IDAUTH_GITHUB_SECRET,一旦我们在 GitHub 中注册了我们的应用程序。

注册您的应用程序

在 GitHub 中创建 OAuth 应用程序

要从 GitHub 获取所需的凭据,我们需要在他们的开发者设置中创建一个应用程序。

转到 GitHub 开发者设置(也可以在 **设置** → **开发者** → **OAuth 应用程序** 下找到),然后单击“新建 OAuth 应用程序”。

Creating an OAuth App on GitHub

接下来,您将看到一个用于注册应用程序的屏幕。填写所有必填字段。

默认的回调 URL 通常应采用 [origin]/api/auth/callback/[provider] 的形式,但是,默认值根据您使用的框架略有不同。

// Local
https://127.0.0.1:3000/api/auth/callback/github
 
// Prod
https://app.company.com/api/auth/callback/github

输入所有必填字段后,请按 **“注册应用程序”**。

密钥

成功注册应用程序后,GitHub 将向我们提供所需详细信息。

Generating clientId and clientSecret

我们需要从这个屏幕中获取 2 个信息,**客户端 ID** 和 **客户端密钥**。

客户端 ID 始终可见,它是您在 GitHub 中的 OAuth 应用程序的公共标识符。

要获取客户端密钥,您必须单击 **“生成新的客户端密钥”**,这将创建您的第一个客户端密钥。如果您第一个密钥泄露、丢失等,您可以在此处轻松创建新的客户端密钥。

💡

请确保您的 **客户端密钥** 安全,切勿将其公开或与组织外部的人员共享。

将所有内容连接在一起

现在我们有了所需的客户端 ID 和客户端密钥,请将它们粘贴到我们之前创建的 .env.local 文件中。

.env.local
AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID={clientId}
AUTH_GITHUB_SECRET={clientSecret}

所有内容到位后,您现在可以启动本地开发服务器并测试登录过程。

npm run dev

导航到 https://127.0.0.1:3000。您应该看到以下页面

App Start

单击 **“登录”**,您将被重定向到默认的 Auth.js 登录页面。您可以 自定义此页面 以满足您的需求。接下来,单击 **“使用 GitHub 登录”**。Auth.js 将将您重定向到 GitHub,GitHub 将识别您的应用程序并要求用户输入其凭据以确认他们希望向您的新应用程序进行身份验证。

GitHub Credentials

身份验证后,GitHub 将将用户重定向回您的应用程序,Auth.js 将负责其余工作

GitHub Authentication Success

如果您回到了这里,这意味着一切正常!我们已经完成了整个 OAuth 身份验证流程,以便用户可以通过 GitHub 登录到您的应用程序!

如您所见,在应用程序中设置 OAuth 所需的大部分时间都花费在 OAuth 提供者的仪表板中注册应用程序上(有些更容易导航,有些更难)。注册后,通过 Auth.js 的设置应该是直截了当的。

部署

在将应用程序发布到生产环境之前,您需要更改一些内容。

不幸的是,GitHub 属于不允许您为一个应用程序注册多个回调 URL 的提供者。因此,您需要在 GitHub 的仪表板中 注册一个单独的应用程序,如我们之前所做的那样,但将回调 URL 设置为应用程序的生产域(例如 https://example.com/api/auth/callback/github)。然后,您还将获得新的 **客户端 ID** 和 **客户端密钥**,需要通过托管提供者的仪表板(Vercel、Netlify、Cloudflare 等)或您在生产环境中管理环境变量的方式将其添加到生产环境中。

有关更多信息,请参阅 部署页面

Auth.js © Balázs Orbán 和团队 -2024