如何在Next.js 13与next-auth.js中设置身份验证和受保护的路由

这篇指南展示了如何使用next-auth.js [https//next-auth.js.org/]库将身份验证集成到您的Next.js应用程序中的简单过程虽然该库提供了众多选项（提供者），但本教程着重介绍使用Google Provider进行实现的步骤您还将获得一些洞见，轻松设置应用程序中的受保护路由，这是一个任务

本指南演示了如何使用next-auth.js库将身份验证集成到您的Next.js应用程序中的直接过程。 虽然该库提供了许多选项（提供者），但本教程专注于使用Google提供者进行实现。

您还将了解如何轻松设置应用程序中的受保护路由，这得益于next-auth.js库。

当您准备好时，我们就开始吧。

如何设置next-auth.js库

一旦您的Next.js应用程序启动并运行，我们就准备好开始了。

快速提示：在本指南中，我将始终引用”app”目录。 如果您对此术语不熟悉，请花一点时间查阅Next.js文档以更加明确地理解。 如果您使用的是”pages”目录，不用担心，因为该实现几乎相同。

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

npm install next-auth

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

在[...nextauth]文件夹中，创建两个名为route.ts和options.ts的文件。

到目前为止，您的文件结构应如下所示：

然后，在options.ts文件中插入以下代码：

import type { NextAuthOptions } from 'next-auth'import GoogleProvider from "next-auth/providers/google";export const options: NextAuthOptions = {    providers: [  GoogleProvider({    clientId: process.env.GOOGLE_CLIENT_ID as string,    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,  })]}

我们导入了NextAuthOptions类型，以确保options变量是类型安全的。

为了使用Google提供者，我们从上述代码中导入GoogleProvider。

options变量是我们嵌入到next-auth.js中要使用的任何提供者的位置。

请注意，我们导出了options变量，使我们可以在整个应用程序中使用它（尽管我们主要需要它在route.ts文件中）。 随着我们深入研究route.ts文件中的实现，我们将探索它的用法。

为了有效使用Google提供者，您需要获取您的clientId和clientSecret属性。 请放心，我们很快将深入研究这个问题。 首先，创建一个.env文件，用于为这两个属性分配值。

env文件始终位于应用程序的根目录：

现在，我们将看到如何获取您的clientId和clientSecret。

假设您已经有了Google帐户，请按照以下简单步骤：

1. 访问Google Cloud Platform，然后单击导航栏右上角的控制台按钮。

1. 您将被引导到控制台仪表板。 在左上角的Google Cloud标志后面，单击下拉菜单以创建一个新项目：

1. 给你的项目起一个你喜欢的名字，然后点击“创建”按钮。我的名字叫做“Next-auth教程”。

2. 你将返回控制台仪表盘，刚创建的项目会显示在下拉菜单里。如果没有显示，点击并选择该项目。

3. 假设一切都正常，向下滚动到“快速访问”部分，选择“API & Services”卡片。这将带你到“API & Services”页面。在该页面的侧边栏，选择“Credentials”选项：

1. 你将被引导到“Credentials”页面。在这里，点击“配置同意屏幕”按钮：

1. 这将带你到同意屏幕配置页面，你可以在这里配置和注册你的应用程序。选择“External”选项，然后点击“创建”按钮：

1. 接下来，你将进入“OAuth同意屏幕”页面。按照以下四个步骤进行操作：

从“OAuth同意屏幕”选项开始，你将被要求修改你的应用程序信息。重点关注的部分是“应用信息”和“开发者联系信息”。填完这些字段后，点击“保存并继续”按钮。

然后你将进入“Scopes”选项卡。同样，点击“保存并继续”按钮。

接下来是“测试用户”选项卡。同样，点击“保存并继续”按钮。

最后，你将到达最后一个选项卡，总览选项卡。向下滚动并选择“返回到仪表盘”按钮。

完成这些步骤后，你的仪表盘应该如下所示：

1. 返回“Credentials”页面，点击“创建凭据”按钮。一个下拉菜单将出现。选择“OAuth客户端ID”选项：

1. 这将带你到页面，你将创建你的client ID。在该页面，你将看到一个应用程序类型的下拉字段，根据你的选择，会显示其他字段。从该下拉菜单中选择“Web应用程序”选项：

向下滚动到“授权重定向URI”部分，粘贴以下URI：http://localhost:3000/api/auth/callback/google。然后点击“创建”按钮。

1. 最后，一个模态框将出现，显示你的独特的Client ID和Client Secret。请记住，这两个值是机密的，针对每个用户特定的，并且必须保密。基于隐私原因，下面的图像中的这两个值被模糊处理：

完成这些步骤后，返回到你的代码编辑器，将每个变量的适当值粘贴到.env文件中：

GOOGLE_CLIENT_ID = client ID的值GOOGLE_CLIENT_SECRET = client secret的值

您还需要生成一个NEXT_AUTH_SECRET密钥，以增强next-auth.js中的身份验证过程的安全性。通过在终端中执行以下命令来生成您的密钥：

openssl rand -base64 32

这个命令将生成一个32个字符的字符串。将此字符串复制并粘贴为.env文件中NEXTAUTH_SECRET变量的值。您的最终.env文件应如下所示：

GOOGLE_CLIENT_ID = client ID valueGOOGLE_CLIENT_SECRET = client secret valueNEXT_AUTH_SECRET = next auth secret

最后，重新启动应用程序。需要注意的是，此时next-auth.js库不会处于活动状态。原因是您尚未为其实施受保护的路由以保护您的页面。下面我们将探讨这个方面。

如何使用next-auth.js实施受保护的路由

使用Next.js的中间件，保护路由非常简单。

首先，在根src文件夹中创建middleware.ts文件。

为了统一保护所有页面，插入以下代码片段：

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

或者，您可以通过使用matcher来有选择性地保护特定页面。例如，只保护主页和关于页面的实施如下：

export { default } from 'next-auth/middleware'export const config = { matcher: ['/', '/about'] }

现在，当您在本地主机上访问这两个页面时，它们将呈现一个身份验证提示，邀请您“使用Google登录”，而不是显示常规内容：

结论

在本教程中，我们介绍了使用next-auth.js库和Google提供程序在Next.js应用程序中实施身份验证和受保护路由的基本步骤。

通过按照这些步骤，您为将身份验证集成到您的Next.js应用程序中打下了坚实的基础，增强了其安全性并提升了用户体验。

通过在这里获得的知识，您现在可以自信地开发应用程序，根据用户身份验证提供安全的访问控制和个性化内容。

值得注意的是，next-auth.js提供了多个提供程序，您可以使用它们来实施身份验证，不仅限于Google提供程序。

• Application Security
• Authentication
• Next.js