使用 Auth0 在 NextJS 中添加用户身份验证

本指南将向开发者们展示如何在 NextJS 应用程序中使用 Auth0 添加用户身份验证。通过身份验证，你可以安全地管理用户的登录状态、访问权限和个人信息。

在本教程中，我们将使用 Auth0 的基本 Web Auth 集成来处理用户身份验证。我们假设你已经具备了一些 NextJS 和 React 的基础知识。

准备工作

在开始之前，你需要完成以下几个准备步骤：

1. 在 Auth0 网站上创建一个帐户，如果你还没有。然后，创建一个新的 Auth0 应用程序，并获取到你的客户端 ID 和客户端密钥。这些将在后面的步骤中用到。
2. 在你的 NextJS 项目中安装 Auth0 库。可以使用以下命令进行安装：

npm install auth0-js

创建授权服务

为了在 NextJS 中使用 Auth0，我们需要创建一个可重用的授权服务。这个服务将负责处理所有与 Auth0 相关的逻辑和 API 调用。

在你的 NextJS 项目中创建一个名为 auth.js 的文件，并添加以下代码：

import auth0 from 'auth0-js';

class Auth {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      domain: 'YOUR_AUTH0_DOMAIN',
      clientID: 'YOUR_AUTH0_CLIENT_ID',
      redirectUri: 'http://localhost:3000/callback',
      responseType: 'token id_token',
      scope: 'openid profile'
    });
  }

  login() {
    this.auth0.authorize();
  }
}

const auth = new Auth();
export default auth;

上述代码创建了一个名为 Auth 的类，包含了 login 方法用于触发身份验证流程。你需要将 'YOUR_AUTH0_DOMAIN' 替换为你的 Auth0 域名，并将 'YOUR_AUTH0_CLIENT_ID' 替换为你的 Auth0 客户端 ID。

添加登录组件

接下来，我们将在 NextJS 中创建一个登录组件，以触发身份验证流程并显示登录按钮。

在你的 NextJS 项目中创建一个名为 Login.js 的文件，并添加以下代码：

import React from 'react';
import auth from './auth';

const Login = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <button onClick={auth.login}>Login</button>
    </div>
  );
};

export default Login;

这段代码创建一个简单的登录组件，包含一个欢迎标题和一个登录按钮。当用户点击登录按钮时，将调用 auth.login 方法。

创建回调页面

当用户通过身份验证后，Auth0 将会将用户重定向到一个预定义的回调 URL。我们需要创建一个回调页面来处理 Auth0 返回的用户令牌和身份验证状态。

在你的 NextJS 项目中创建一个名为 callback.js 的文件，并添加以下代码：

import React, { useEffect, useState } from 'react';
import auth from './auth';

const Callback = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        // 在此处执行登录成功之后需要进行的操作，例如将数据存储到本地存储或发送到服务器
      } else if (err) {
        console.log(err);
      }

      setLoading(false);
    });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : <p>Login successful!</p>}
    </div>
  );
};

export default Callback;

在此处代码中，我们监听 useEffect 钩子，并调用 auth0.parseHash 方法来解析返回 URL 中的令牌和验证状态。你可以在成功登录后执行任何必要操作，比如将用户数据存储到本地存储或发送到服务器。

配置路由

现在，我们将添加页面路由，以便访问登录页面和回调页面。

在 NextJS 项目根目录的 pages 文件夹中创建一个名为 login.js 的文件，并添加以下代码：

import Login from '../components/Login';

export default function LoginPage() {
  return <Login />;
}

然后，创建一个名为 callback.js 的文件，并添加以下代码：

import Callback from '../components/Callback';

export default function CallbackPage() {
  return <Callback />;
}

添加受保护的路由

最后，我们将添加一个受保护的页面，以确保用户必须经过身份验证才能访问。

首先，在 NextJS 项目根目录的 pages 文件夹中创建一个名为 protected.js 的文件，并添加以下代码：

import React, { useEffect } from 'react';
import auth from '../components/auth';

const Protected = () => {
  useEffect(() => {
    if (!auth.isAuthenticated()) {
      auth.login();
    }
  }, []);

  return (
    <div>
      <h1>Protected Page</h1>
      <p>You can only access this page if you are authenticated.</p>
    </div>
  );
};

export default Protected;

上述代码中，我们在 useEffect 钩子中检查用户是否已经通过身份验证。如果用户没有通过身份验证，我们将调用 auth.login 方法来触发身份验证流程。

接下来，打开 NextJS 应用程序的 pages 文件夹中的 index.js 文件，并添加以下代码：

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Link href="/protected">
        <a>Go to Protected Page</a>
      </Link>
    </div>
  );
}

在这段代码中，我们创建了一个主页组件，该组件包含一个链接到受保护页面的按钮。

测试应用程序

现在你已经完成了 Auth0 身份验证在 NextJS 中的集成。你可以启动你的 NextJS 应用程序，并通过以下步骤测试它：

1. 在主页上点击 "Go to Protected Page" 按钮。
2. 你将被重定向到 Auth0 登录页面。在该页面上输入你的凭据并进行登录。
3. 如果登录成功，将重定向回受保护页面。
4. 如果你在登录过程中遇到任何错误，将在控制台中看到相关错误信息。

确保在测试应用程序之前，你已经在 Auth0 网站上正确配置了相关设置。否则，可能会遇到各种与身份验证相关的问题。

希望这个教程能够帮助你在 NextJS 应用程序中添加用户身份验证。通过 Auth0，你可以轻松地管理用户的登录状态和访问权限，保护你的应用程序免受未经授权的访问。如果你想了解更多关于 Auth0 和身份验证的信息，请参考 Auth0 官方文档。