随着现代化 Web 应用程序的兴起，越来越多的 Web 应用程序开始采用前后端分离的架构。在这种情况下，前端通常需要集成用户认证和授权的功能。Auth0 是一个很好的选择，它提供了一个易于使用的身份验证和授权平台，可让您轻松地将身份验证和授权功能添加到您的应用程序中。Next.js 是一个轻量级的前端框架，它允许您创建可静态生成的 React 应用程序，并提供了一个功能强大的 API，可帮助您实现身份验证和授权功能。在本文中，我们将向您展示如何将 Auth0 集成到 Next.js 应用程序中。
步骤 1：创建 Auth0 应用程序
首先，您需要创建一个 Auth0 应用程序。转到 Auth0 管理仪表板，并单击“应用程序”>“创建应用程序”。
选择“单页面应用程序”，并输入一个名称以及它的 URL。然后单击“创建”。
在下一个屏幕上，您需要将 clientId 和 domain 值复制并粘贴到 Next.js 应用程序中。
步骤 2：安装 Auth0 SDK
接下来，您需要安装 Auth0 SDK。打开终端并导航到您的 Next.js 应用程序的根目录。然后运行以下命令：
npm install --save auth0-js
步骤 3：创建 Auth0 实例
接下来，您需要创建 Auth0 实例。在您的 Next.js 应用程序的根目录中，创建一个名为“auth0.js”的新文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- ---------- ----- ----------- - --- --------------- ------- ------------------------- --------- ---------------------------- ------------ ------------------------------- ------------- ------ ---------- ------ ------- ------- ------- -- ------ ------- -----------
请注意，我们在将这些值传递给 Auth0 实例时使用了环境变量。您需要在系统中设置这些环境变量。
步骤 4：创建登录页面
接下来，我们将创建一个登录页面，让用户登录并接受他们的授权。
在您的 Next.js 应用程序中，创建一个名为“login.js”的新页面，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ ----------- ---- ----------
----- ----- - -- -- -
------------ -- -
-----------------------
-- ---
------ -------------- -- ------------
-
------ ------- -----这将使用 Auth0 实例来授权用户。在问题解决之前，用户将被重定向到“Login”组件所呈现的页面显示的内容。
步骤 5：处理身份验证回调
当用户完成身份验证并授权后，他们将被重定向回您的应用程序。您需要捕获和处理这个回调。在您的 Next.js 应用程序中，创建一个名为“callback.js”的新页面，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
------ ----------- ---- ----------
----- -------- - -- -- -
----- ----------------- ------------------- - ---------------
------------ -- -
--------------------------- ----------- -- -
-- ----------- -- ---------------------- -- ------------------- -
------------------------
--------------------------------------------------- ----- ----- -- -
-- --- ---- ---- -- -----
--
- ---- -- ----- -
----------------
-
--
-- ---
------ -
---
----------------
- ---- ---- ---- ------------ ------ ----
- ------ --- -- ----- ---- ---- --------
----
-
-
------ ------- --------这将允许您从 Auth0 获取其 Access Token，并将其传递给 userInfo 方法，以获取有关用户的详细信息，例如他们的姓名和电子邮件地址。
步骤 6：集成身份验证和授权
现在，您已经准备好在您的应用程序中集成身份验证和授权。在您的 Next.js 应用程序中，创建一个名为“_app.js”的新文件，并添加以下代码：
-- -------------------- ---- -------
------ --- ---- ----------
------ ----- ---- -------
------ ----------- ---- ----------
----- ----- ------- --- -
------------------ -
------------
---------- - -
---------------- ------
----- -----
-
-
------------------- -
--------------------------
-
--------------------- -
---------------------------- ----- ----------- -- -
-- ----------- -- ---------------------- -- ------------------- -
---------------
---------------- -----
--
--------------------------------------------------- ----- ----- -- -
---------------
-----
--
--
- ---- -- ----- -
----------------
-
--
-
-------- -
----- - ---------- --------- - - ----------
----- - ---------------- ---- - - ----------
------ -
----------
--------------
---------------------------------
-----------
--
-
-
-
------ ------- -----这将检查用户的身份验证状态，并从 Auth0 检索有关其详细信息的数据，例如他们的姓名和电子邮件地址。此信息将通过属性传递给所有页面。
步骤 7：保护路由
最后，您可能希望保护某些路由，仅当用户已经登录并获得授权时才能访问。在您的 Next.js 应用程序中，创建一个名为“protected.js”的新页面，并添加以下代码：
import React from "react"
import { withAuth } from "../components/with-auth"
const Protected = ({ user }) => {
return <p>Welcome back, {user.name}!</p>
}
export default withAuth(Protected)此页面使用名为“with-auth”的高阶组件来检查用户的身份验证状态。如果用户未经身份验证，则他们将被重定向到登录页面。
在您的 Next.js 应用程序中，创建一个名为“with-auth.js”的新文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- -------------
------ ----------- ---- ----------
------ ----- -------- - ----------- -- -
------ ----- ------- --------------- -
------------------ -
------------
---------- - -
---------- -----
-
-
------------------- -
--------------------------
-
------------------- - -- -- -
---------------------------- ----- ----------- -- -
-- ----------- -- ---------------------- -- ------------------- -
--------------------------------------------------- ----- ----- -- -
---------------
---------- ------
---------------- -----
-----
--
--
- ---- -- ----- -
---------------
---------- ------
---------------- ------
----- -----
--
---------------------
- ---- -
---------------
---------- ------
---------------- ------
----- -----
--
-
--
-
-------- -
----- - ---------- ---------------- ---- - - ----------
------ -
-----
---------- -- ------------------
----------- -- ---------------- -- --------- ------------
----------- -- --------------- -- ---------- ----------- ---
------
-
-
-
-这将确保用户未经身份验证就不能访问受保护的页面而被重定向。
结论
现在您已经了解了如何在 Next.js 应用程序中集成 Auth0，您可以使用它来保护您的必要数据，并确保只有经过身份验证的用户才能访问它。本教程深入介绍了集成 Auth0 并保护 Next.js 应用程序的指导意义，通过示例代码和学习深度，让您能够轻松地跟随着本文介绍的步骤进行应用，提升了前端开发相关的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748417993696b0268ed633d