使用Auth0掌握Next.Js身份验证的实用指南

身份验证是网络应用程序的一个重要方面，它可以确保只有授权用户才能访问特定资源或执行特定操作。本文将探讨如何使用 Auth0（一个功能强大的身份验证和授权平台）为 Next.js 应用程序添加身份验证功能。

Auth0 是一个多功能、灵活的平台，可为您的应用程序提供身份验证和授权服务。无论您是在构建网络应用程序、移动应用程序还是其他任何应用程序，都可以在任何地方集成 auth0。它支持各种身份验证方法，包括传统的电子邮件和密码登录、社交登录和多因素身份验证。Auth0 身份验证平台还可根据不同的项目需求和要求定制登录服务。

设置 Auth0 账户

让我们从建立 Auth0 账户开始我们的示例。为此，请访问 Auth0 网站并创建一个新的免费账户。首先访问 Auth0 网站。点击注册按钮，注册一个新账户。

登录后，导航至 Auth0 控制面板。以下是 Auth0 控制面板的外观：

创建新 Auth0 应用程序

在 Auth0 控制面板中，点击 “Create Application”。这将允许我们创建一个新的 Auth0 应用程序。

现在选择 Regular Web Applications 作为应用程序类型。NextJS 属于常规网络应用类型，因为它使用传统的重定向。最后，点击 “Create”。

为应用程序配置 Auth0 设置

导航至 “Settings” 选项卡，记下 client ID 和 Client Secret ，以便日后在项目中使用。在Auth0中创建的每个应用程序都会分配一个字母数字客户端 ID，该 ID 仅为您的应用程序独有，将用于通过 SDK 调用Auth0 API。您还将获得一个唯一的域 URL，用于访问 Auth0 服务。

太好了！我们完成了 Auth0 账户的设置。是时候将它集成到我们的下一个项目中了。

将 Auth0 与 Next.js 集成

首先，我们将创建一个新的 Next.js 项目，以便进一步将 Auth0 集成到我们的应用程序中。要创建 Next 应用程序，请使用以下命令：

设置 Next.js 项目

在深入了解 Auth0 集成之前，让我们先建立一个 Next.js 项目。

Step 1. 创建新的 Next.js 应用程序 要创建新的 next.js 项目，请确保已安装 Node.js，然后运行以下命令：

npx create-next-app mynextjs
cd mynextjs

注：为演示本文，我将使用 Typescript 作为默认语言，项目结构如下：

现在我们已经创建了下一个项目，让我们把 Auth0 整合到其中。

Step 2. 安装必要的依赖项 要在 Next.js 应用程序中集成 Auth0，我们需要安装 Auth0 的依赖项（SDK）。在项目目录下运行以下命令安装 SDK：

npm install @auth0/nextjs-auth0 next-auth

Step 3. 在 Next.js 项目中设置 Auth0 SDK 在 Next.js 项目中设置 Auth0 SDK 前往 /pages/ ，打开 _app.tsx 文件并添加以下代

// pages/_app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { UserProvider } from "@auth0/nextjs-auth0/client";
export default function App({ Component, pageProps }: AppProps) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}

Step 4. 配置 Auth0 SDK 下一步是在本地环境文件中配置和添加一些细节，如  AUTH0_SECRET, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_BASE_URL, 和 AUTH0_ISSUER_BASE_URL 。首先，在根目录下新建一个 .env.local 文件，并添加以下内容：

AUTH0_SECRET=jdsbfjsdbjfbdsgfnmdsfbgfndsbfgmnbsdfgdfbggjh
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL='https://yourdomainfromauth0.us.auth0.com'
AUTH0_CLIENT_ID=add_your_client_id
AUTH0_CLIENT_SECRET=add_your_client_secret

• AUTH0_SECRET：这是应用程序在发出请求时用于向 Auth0 验证身份的机密信息。你可以在命令行中使用 openssl rand -hex 32 创建一个。
• AUTH0_BASE_URL：这是应用程序的基础 URL。如果在 localhost 上运行项目，则为 http://localhost:3000。
• AUTH0_ISSUER_BASE_URL：这是 Auth0 授权服务器的发行方 URL。你可以在域设置中找到它。
• AUTH0_CLIENT_ID：这是 Auth0 应用程序的客户端 ID。
• AUTH0_CLIENT_SECRET：Auth0 应用程序的客户机密文。

在 Next.js 中实施身份验证

在 Next.js 中集成 Auth0 后，让我们创建登录和注销组件并处理用户身份验证状态。

创建登录和注销组件

让我们开始为使用身份验证的应用程序构建用户界面。前往 /pages/index.tsx 并添加以下代码：

// pages/index.tsx
import React from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
function index() {
const { user, error, isLoading } = useUser();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
if (user) {
return (
<div className="max-w-md mx-auto bg-white rounded-md overflow-hidden shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4">
Welcome, <span className="text-blue-700">{user.name}</span>!
</h2>
<p className="text-gray-600 mb-4">
You have successfully logged in using the Auth0 authentication system.
</p>
<a
className="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"
href="/api/auth/logout"
>
Logout
</a>
</div>
);
}
return (
<div className="flex flex-col gap-10 items-center p-10">
<h1 className="text-3xl font-bold">Auth0 authentication in Next.js</h1>
<a
href="/api/auth/login"
className="bg-blue-400 text-white p-4 w-20 h-14 text-center rounded-md"
>
Login
</a>
</div>
);
}
export default index;

在上面的代码中，我们为应用程序创建了主界面。为了获取用户数据，我们使用条件语句呈现登录和注销组件。如果用户已通过身份验证，则会显示用户详细信息，如用户 name、信息和 Logout 按钮。如果没有，用户将看到 Login 按钮，以便在下一个流程中进行身份验证。最后，我们使用 Tailwind CSS 来添加样式。

处理用户验证状态

所提供的 index.tsx 文件已经使用 useUser 钩子处理了用户验证状态。

处理身份验证回调

实施完成后，让我们添加一些回调来处理身份验证流程。但在处理回调或编写任何代码之前，我们有必要了解我们到底要做什么，以及身份验证流程是如何流动的。

了解 Auth0 回调的身份验证流程

使用 Auth0 进行身份验证涉及多个步骤，包括重定向到 Auth0 进行登录、身份验证回调以及处理身份验证状态。以下是简要概述：

• 登录请求：当用户启动登录过程时，他们会被重定向到 Auth0 通用登录页面，在那里输入他们的凭据。
• 验证回调：认证成功后，Auth0 会将用户重定向到应用程序指定的回调 URL（本例中为 /api/auth/callback）。回调 URL 在 Auth0 面板中配置。
• 令牌交换：Next.js 应用程序中的回调路由负责将从 Auth0 收到的授权代码与访问令牌和身份令牌进行交换。
• 用户身份验证状态：访问令牌随后将用于在服务器上对用户进行身份验证，用户的身份验证状态将通过会话来维护。

本图展示了用户与集成了 Auth0 的 Next.js 应用程序交互时的无缝身份验证流程。了解这一流程对于更清晰地掌握 Auth0 身份验证过程至关重要。

在 Next.js 中实现回调路由

要实现回调路由，请转到 pages/api/auth/ ，创建一个名为 [auth0].ts 的文件，并添加以下代码：

// pages/api/auth/[auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";
export default handleAuth();

上述文件中包含 SDK 的 handleAuth 方法，该方法将负责所有用于处理身份验证回调的路由。添加上述代码后，SDK 将自动从 Node.js 进程环境中读取和配置这些值。现在，应用程序已经完成，可以运行了。

运行服务器

要预览最终输出，请在终端运行以下命令启动开发服务器：

npm run dev

在浏览器中访问 http://localhost:3000，查看您的 Next.js 应用程序。

登录前

Auth0 验证

登录后

添加授权（可选）

让我们为基于角色的访问控制配置 Auth0，并根据用户角色限制对某些路由的访问。这一步是可选的，但如果你正在构建一个有多个成员的应用程序，你可以执行这一步。

为基于角色的访问控制配置 Auth0

此步骤包括在 Auth0 面板中设置角色和权限。

第 1 步：导航至 Auth0 控制面板：https://manage.auth0.com/，并使用凭据登录。

第 2 步：添加新用户

• 点击左侧菜单中的 “User Management”。
• 选择 “Users” > “+ Create User” 按钮填写新用户所需信息，如电子邮件和密码。
• 最后，点击 “Create” 按钮保存新用户。

第 3 步：创建角色

• 在 Auth0 控制面板中，进入 “User Management”，点击 “Roles” > “+ Create Role”。为角色命名，如管理员等，然后保存。

按照上述步骤，我们可以创建多个具有不同角色和权限的用户。

根据用户角色限制访问某些路由

要限制对特定页面的访问，可在 @auth0/nextjs-auth0 的高阶组件中使用 withPageAuthRequired 函数。只需修改 [auth0].ts 文件如下，即可轻松实现这一功能：

// pages/api/auth/[auth0].ts
import { handleAuth, withPageAuthRequired } from "@auth0/nextjs-auth0";
export default handleAuth({
async callback(request, response) {
try {
await withPageAuthRequired({ roles: ['admin'] })(request, response);
} catch (err) {
res.status(err.status || 500).end(err.message);
}
},
});

通过添加上述代码，拥有适当权限的用户可以不受限制地访问特定路由，而其他用户则会受到限制。

小结

在本文中，我们了解了如何使用 Auth0 对 Next.js 应用程序进行身份验证。我们看到了将 Auth0 服务集成到应用程序中的逐步实现过程，以及如何在 Next 应用程序中处理路由回调。通过利用 Auth0 身份验证系统的强大功能，您可以为用户提供无缝体验。