Next.js 开发入门之使用 next-auth.js 实现身份认证

AI让生活更美好
1,506 阅读6分钟

如果本教程对你有所帮助，希望能点个赞或加个关注

本教程将向我们展示如何轻松地将 next-auth.js 库集成到 Next.js 应用程序中，实现身份认证功能。该库提供了众多认证提供商（Provider），用于满足各种不同方式的身份认证需求。本教程重点讲解如何使用 Github Provider 来实现 Github 的第三方认证。

除此之外，我们还将深入了解如何在应用程序中使用 next-auth.js 库简化路由保护。

准备好了，我们就开始吧。

设置 next-auth.js 库

在最开始之前，我们首先需要创建一个 Next.js 项目，整个过程很简单，所以这里就不再陈述。

一旦创建成功，我们就可以开始安装并配置 next-auth.js 库了。

重要提示：在本教程中，我们将统一使用 "app" 目录。如果你对这个术语不熟悉，请自行查阅 Next.js 文档以了解其具体含义。如果你使用的是 "pages" 目录，也不用担心，因为实现方法几乎完全相同。

使用以下命令安装 next-auth.js 库：

npm install next-auth

完成安装后，在应用程序根文件夹中创建 api 文件夹，并在其中创建 auth 文件夹。最后，在 auth 文件夹中创建 [...nextauth] 文件夹。

在 [...nextauth] 文件夹中新建两个文件，分别命名为 route.ts 和 options.ts。

此时的文件夹结构应该是这样的：

图片.png

然后，在 options.ts 文件中添加以下代码：

import type { NextAuthOptions } from "next-auth"
import GitHubProvider from "next-auth/providers/github"

export const options: NextAuthOptions = {
    providers: [
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID as string,
            clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
        })
    ]
}

import type { NextAuthOptions } from 'next-auth': 这行代码从 next-auth 包中导入了 NextAuthOptions 类型。这是一个 TypeScript 类型定义，用于类型检查 next-auth 的配置对象。

import GitHubProvider from 'next-auth/providers/github': 这行代码从 next-auth 的 providers 目录中导入了 GitHubProvider。GitHubProvider 是一个用于配置 GitHub OAuth 身份验证的类。

export const options: NextAuthOptions = {...}: 这里定义了一个名为 options 的常量，并将其类型指定为 NextAuthOptions。这个对象包含了 next-auth 的配置信息。请注意，为了能在 route.ts 文件中使用它，我们导出了 options 变量。

在 options 对象中，providers 是一个数组，用于指定你想要在你的应用程序中使用的身份验证提供者（Provider）。在这个例子中，数组里只有一个元素：GitHubProvider。

GitHubProvider({...}): 这是一个 GitHubProvider 的实例，用于配置 GitHub OAuth 身份验证。你需要向它传递一个对象，该对象包含必要的配置信息。

clientId: process.env.GITHUB_CLIENT_ID as string,: 这里指定了 GitHub OAuth 客户端 ID。这个值应该从环境变量中获取，以确保不会硬编码在代码中。as string 是一个 TypeScript 类型断言，用于告诉 TypeScript 编译器 process.env.GITHUB_CLIENT_ID 是一个字符串。

clientSecret: process.env.GITHUB_CLIENT_SECRET as string,: 类似于 clientId，这里指定了 GitHub OAuth 客户端密钥。同样，这个值也应该从环境变量中获取，并使用 as string 进行类型断言。

为了有效使用 GitHub Provider，首先需要确保我们已经获取了两个关键属性：clientId 和 clientSecret。这两个属性是身份验证过程中必需的，它们允许我们的应用安全地与 GitHub 服务交互。

.env 文件始终位于应用程序的根文件夹中：

图片.png

现在，我们来看看如何获取 clientId 和 clientSecret。

首先，确保你有一个 GitHub 账号，并且已登录到该账号。然后，请按照以下步骤操作：

  1. 访问 GitHub 网站，在右上角的用户头像旁边点击下拉菜单，选择Settings（设置）。
  2. 在左侧导航栏中选择Developer settings（开发者设置）。
  3. 在 Developer settings 页面，选择OAuth Apps（OAuth 应用）。
  4. 点击New OAuth App（新建 OAuth 应用）按钮。
  5. 在新建 OAuth 应用页面，填写以下信息：
    • Application name（应用名称）：你的应用程序的名称。
    • Homepage URL（主页网址）：你的应用程序的主页网址。
    • Application description（应用描述）：简要描述你的应用程序的功能。
    • Authorization callback ****URL（授权回调网址）：用户授权后GitHub将重定向到的URL。通常是你的应用程序中用于接收授权码的URL。
  6. 填写完应用程序信息后，点击Register application（注册应用程序）按钮。
  7. 注册成功后，将会看到一个页面，显示你的新应用程序的clientId和clientSecret。

完成上述步骤后，返回代码编辑器，为 .env 文件中的环境变量粘贴相应的值：

GITHUB_CLIENT_ID = client ID value
GITHUB_CLIENT_SECRET = client secret value

为了提升 next-auth.js 身份认证过程的安全性，我们还需要生成一个 NEXT_AUTH_SECRET 密钥。在终端中执行以下命令生成密钥：

openssl rand -base64 32

该命令将生成一个 32 字符长度的字符串。复制该字符串并粘贴到 .env 文件中，作为 NEXTAUTH_SECRET 变量的值。最终的 .env 文件内容应该如下所示：

GITHUB_CLIENT_ID = client ID value
GITHUB_CLIENT_SECRET = client secret value
NEXT_AUTH_SECRET = next auth secret

成功配置 .env 变量后，将以下代码粘贴到 route.ts 文件中：

import NextAuth from "next-auth/next"
import { options } from "./options"

const handler = NextAuth(options)

export { handler as GET, handler as POST }

以上代码将确保所有发送到端点（api/auth/[...nextauth]）的 GET 和 POST 请求均由 next-auth 库负责处理。

至此，我们已经完成了使用 next-auth 库实现 GitHub OAuth 认证的全部设置步骤。

值得注意的是， 此时 next-auth.js 库不会主动参与任何页面的路由保护，这是因为我们还未对此进行任何设置。接下来，我们将详细介绍如何设置来保护路由。

使用 next-auth.js 实现路由保护

利用 Next.js 的中间件实现路由保护是一件非常容易的事情。

首先，在 src 文件夹根目录下创建一个 middleware.ts 文件。

图片.png

要为所有页面实现路由保护，请添加以下代码：

export { default } from 'next-auth/middleware'

另外，也可以使用 matcher 有选择地为特定页面实现路由保护。例如，只为主页和关于页面实现路由保护的方法如下：

export { default } from 'next-auth/middleware'

export const config = { matcher: ['/', '/about'] }

现在，当我们尝试访问这两个页面，都会出现认证提示，要求我们 “使用 GitHub 登录”，而不是显示页面常规内容。

结语

在本教程中，我们介绍了如何利用 next-auth.js 库为 Next.js 应用程序实现身份认证功能以及设置路由保护的基本步骤。

有了这些知识，我们将能轻松为 Next.js 应用程序集成身份认证功能，从而大幅提升其安全性和用户体验。

此外，值得强调的是，next-auth.js 库支持多种身份认证 provider，而不仅限于 GitHub Provider，这为实现不同需求的身份认证提供了丰富的选择。

avatar
文章
阅读
粉丝