在 Web 开发中，身份验证是一个非常重要的话题。它可以确保用户只能访问他们有权访问的内容，并保护您的应用程序免受未经授权的访问和攻击。
在本文中，我们将介绍如何使用 Next.js 和 Auth0 实现身份验证。Next.js 是一个流行的 React 框架，提供了服务器端渲染和静态生成等功能。Auth0 是一个身份验证和授权平台，可以轻松地添加身份验证到您的应用程序中。
准备工作
在开始之前，您需要一个 Auth0 账户。如果您还没有一个，请注册一个。在您的 Auth0 仪表板中创建一个新的应用程序，并选择“Regular Web Applications”作为应用程序类型。
在您的应用程序设置中，将“Allowed Callback URLs”和“Allowed Logout URLs”设置为您的 Next.js 应用程序的 URL。例如，如果您的 Next.js 应用程序在本地运行并使用端口号 3000，则将这些 URL 设置为“http://localhost:3000/callback”和“http://localhost:3000”。
接下来，您需要安装 Auth0 的 JavaScript SDK。在您的 Next.js 应用程序中，运行以下命令：
npm install auth0-js
实现身份验证
现在，让我们开始实现身份验证。
首先，我们需要在客户端中实例化 Auth0。在您的 Next.js 页面中，添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- ----------- ----- ---- - --- --------------- ------- -------------------- --------- ----------------------- ------------ -------------------- ------------- ------ ---------- ------ ------- ------- ------- ---
请注意，您需要将“YOUR_AUTH0_DOMAIN”和“YOUR_AUTH0_CLIENT_ID”替换为您的 Auth0 仪表板中应用程序的域和客户端 ID。您还需要将“YOUR_CALLBACK_URL”替换为您的 Next.js 应用程序的回调 URL。
接下来，我们需要添加一个登录按钮。在您的 Next.js 页面中，添加以下代码：
import React from 'react';
const LoginButton = () => (
<button onClick={() => auth.authorize()}>Log In</button>
);
export default LoginButton;当用户单击此按钮时，将启动 Auth0 登录流程。
现在，让我们添加一个回调页面，以处理 Auth0 的响应。在您的 Next.js 页面中，添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- - -- -- -
------------ -- -
-------------------- ----------- -- -
-- ----------- -- ---------------------- -- ------------------- -
-- ---- ------ -- ----- -------
------------------------------------ ------------------------
-------------------------------- --------------------
-- -------- -- ---- ----
-------------------- - ----
- ---- -- ----- -
-------------------
-
---
-- ----
------ ------------------
--
------ ------- ---------当 Auth0 完成身份验证并将用户重定向到回调 URL 时，此页面将解析 URL 中的哈希值，并将访问令牌和 ID 令牌保存到本地存储中。然后，它将重定向到主页。
现在，我们已经完成了身份验证。让我们看看如何保护您的应用程序中的受保护路由。
保护路由
在您的 Next.js 应用程序中，您可以使用“getInitialProps”方法来检查用户是否已经登录。在您的受保护页面中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------
----- ------------- - -- -- -
----- ----------- - -------------------------------------
----- ------- - ---------------------------------
-- ------------- -- --------- -
-- -------- -- ----- ----
-------------------------
------ -----
-
-- ------ --------- -------
------ --------- -----------
--
----------------------------- - -- ---- --- -- -- -
-- ---- -- -------------------- -
-- -------- -- ----- ----
------------------ - --------- -------- ---
----------
-
------ ---
--
------ ------- --------------此页面将检查本地存储中是否存在访问令牌和 ID 令牌。如果没有，则重定向到登录页面。否则，它将呈现受保护的内容。
请注意，我们还添加了一个“getInitialProps”方法，以确保用户已经登录。如果用户没有登录，则将重定向到登录页面。
结论
在本文中，我们介绍了如何使用 Next.js 和 Auth0 实现身份验证。我们学习了如何在客户端中实例化 Auth0、如何处理登录响应、如何保护受保护路由，并提供了示例代码。
身份验证是一个复杂的主题，但是使用 Auth0，我们可以轻松地将身份验证添加到我们的应用程序中。如果您还没有使用 Auth0，请尝试一下，它会让您的开发工作更加容易和愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67443896c22b09372b0faa13