NextJs 13 中的无密码登录

本文将深入探讨使用 NextAuth.js 库在 Next.js 项目中实现无密码身份验证所需的步骤。此外，我们将利用 Prisma 作为数据库适配器来实现这一目标。

无密码身份验证是一种创新方法，无需传统的用户名和密码组合。相反，它通过利用替代方法（例如电子邮件魔术链接或通过短信发送的一次性代码）提供更安全和用户友好的身份验证体验。

Next.js 是一种流行的 React 框架，用于构建 Web 应用程序，以其简单性和高效性而闻名。通过集成 NextAuth.js（一个专门为 Next.js 设计的身份验证库），我们可以轻松地将无密码身份验证合并到我们的项目中。

此外，我们将依赖 Prisma 作为我们的数据库适配器。 Prisma 是一种 ORM（对象关系映射）工具，它通过提供类型安全和自动生成的查询生成器来简化数据库交互。它支持多种数据库，包括 PostgreSQL、MySQL 和 SQLite，使其成为我们身份验证实现的多功能选择。

在本指南中，我们将提供有关如何在 Next.js 项目中使用 NextAuth.js 设置和配置无密码身份验证的分步说明。我们还将演示如何将 Prisma 集成为我们的数据库适配器，从而实现应用程序和数据库之间的无缝通信。

我们现在将探索如何使用无密码身份验证以及 NextAuth.js 和 Prisma 的功能来提高 Next.js 应用程序的安全性和用户体验。让我们开始吧。

什么是无密码登录？

无密码登录，顾名思义，是一种无需传统用户名和密码组合的身份验证方法。相反，它使用替代方法来验证用户的身份，例如电子邮件魔术链接或通过短信发送的一次性代码。与传统登录方法相比，这种方法具有多种优势。首先，它消除了与密码相关的漏洞的风险，例如弱密码或密码重复使用。其次，它无需记住和输入复杂的密码，从而简化了用户体验。

要使用电子邮件魔术链接或一次性代码实现无密码登录，我们需要一台 SMTP（简单邮件传输协议）服务器。

SMTP 服务器负责通过 Internet 发送电子邮件。在无密码身份验证的情况下，服务器将魔术链接或一次性代码发送到用户注册的电子邮件地址。当用户启动登录过程时，系统会生成一封包含唯一链接或代码的电子邮件并发送给用户。然后，用户可以单击链接或输入代码来完成身份验证过程。 SMTP 服务器充当应用程序和用户电子邮件服务之间的中介，确保身份验证消息的安全可靠传送。通过利用 SMTP 服务器，我们可以有效地实现无密码登录，并为用户提供无缝的身份验证体验。

让我们开始吧！

首先，我们需要生成一个全新的 Next.js 项目。为此，请使用以下命令：

npx create-next-app@latest

生成全新的 Next.js 项目后，您可以导航到新创建的项目目录。

通过更改项目的目录，您将能够浏览构成 Next.js 项目结构的各种文件夹和文件。

了解项目结构对于有效开发和组织 Next.js 应用程序至关重要。通过参考官方文档，您可以利用最佳实践并深入了解如何构建代码、管理静态资产和创建可重用的组件。

安装我们的依赖项

要使用 NextAuth.js 在 Next.js 项目中启用无密码身份验证，我们必须首先安装所需的依赖项。运行命令 yarn add next-auth nodemailer 将 NextAuth.js 和 nodemailer 添加到我们的项目中。

我们特别使用 nodemailer，因为它是在 Node.js 中发送电子邮件的流行且多功能的模块。它提供了一种简单可靠的方式来通过电子邮件发送无密码身份验证所需的魔术链接或一次性代码。

接下来，让我们集成 Prisma 作为我们的数据库适配器。首先使用以下命令安装所需的 Prisma 软件包：

yarn add @prisma/client @next-auth/prisma-adapter

这些包将使我们的 Next.js 应用程序和数据库之间实现无缝通信。此外，我们还需要通过运行以下命令来安装 Prisma 作为开发依赖项：

yarn add prisma --dev

此步骤确保我们拥有必要的工具来使用 Prisma 及其自动生成的查询生成器进行数据库交互。

通过安装这些依赖项，我们为在 Next.js 项目中使用 NextAuth.js 和 Prisma 实现无密码身份验证奠定了基础。

设置 Prisma

需要设置 Prisma 并有权访问 SMTP 服务器来发送电子邮件，才能在 Next.js 项目中使用无密码身份验证。本教程将指导您使用个人 Gmail 帐户发送电子邮件。请按照以下步骤成功设置。

首先，在项目的根目录下创建一个“prisma”文件夹。该文件夹将存放与 Prisma 相关的文件和配置。然后，在“prisma”文件夹中，创建一个名为“schema.prisma”的新文件。该架构文件定义数据库的结构，并充当 Prisma 自动生成代码的蓝图。

如果您对模式的概念不熟悉，请不要担心！架构指定数据库的表、字段、关系和约束。要创建 schema，您可以参考 NextAuth.js 的官方文档并复制其中提供的示例 schema。此架构是一个起点，可以进行定制以满足您的应用程序要求。

接下来，在项目的根目录下创建一个“.env”文件。该文件将存储您的环境变量，包括 SMTP 服务器的必要配置。要填充“.env”文件，您可以复制下面提供的示例配置。确保在相应字段中输入您的 Gmail 帐户凭据和 SMTP 服务器设置。

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

通过执行这些步骤，您将设置 Prisma 并配置 SMTP 服务器以使用您的 Gmail 帐户发送电子邮件。这些准备工作对于在 Next.js 项目中启用无密码身份验证流程至关重要。

笔记

如果您为 Google 帐户启用了双因素身份验证 (2FA)，则必须创建应用程序密码。应用程序密码是一个独特的密码，可授予对特定应用程序或设备的访问权限，而不会泄露您的主要 Google 帐户密码。按照以下说明生成应用程序密码。

访问 https://myaccount.google.com/ 进入 Google 帐户设置页面。
导航至“安全”选项卡。
查找“2FA”部分，向下滚动并选择“应用程序密码”。

系统可能会提示您再次输入 Google 帐户密码以进行安全验证。
在“选择应用程序”下拉列表中，选择“邮件”或“其他（自定义名称）”。

如果“邮件”选项可用，请选择它。
如果“邮件”选项不可用，请选择“其他（自定义名称）”并提供自定义名称以供识别。

单击“生成”或“生成密码”按钮。
Google 将为您生成一个唯一的应用程序密码。记下该密码，因为我们将在应用程序中使用该密码发送电子邮件。
在 Next.js 应用程序的 SMTP 服务器配置中使用生成的应用程序密码。使用此应用程序密码替换您的常规 Gmail 帐户密码。

这可以确保即使启用了 2FA，您的应用程序也可以使用您的 Gmail 帐户安全地发送电子邮件。

使用 Supabase 的 PostgreSQL

在继续之前，我们需要确保项目的数据库正常运行。对于此演示，我们建议使用 Supabase PostgreSQL 数据库。要开始使用 Supabase 项目并获取 PostgreSQL 连接 URL，请按照以下步骤操作：

前往 supabase.io 并登录您的帐户，如果您没有帐户，请创建一个新帐户。
登录后，您将被引导至 Supabase 仪表板。单击“创建新项目”开始一个新项目。
为您的项目命名并选择距离您当前位置最近的区域。请记住您的密码，稍后您将需要它。
创建项目后，您将进入项目仪表板。单击左侧栏上的“数据库”以访问数据库设置。
在“数据库”部分，您将找到 PostgreSQL 连接 URL。此 URL 包含连接到 Supabase 项目数据库的所有必要信息，例如主机、端口、数据库名称、用户名和密码。它将以以下格式显示：postgres://<用户名>:<密码>@<主机>:<端口>/<数据库>

复制 PostgreSQL 连接 URL 并确保其安全。您将需要它来在应用程序和 Supabase 数据库之间建立连接。

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

现在，让我们确保通过运行以下命令生成 Prisma 客户端：“npx prismagenerate”。

Prisma 客户端是根据您的架构自动生成的数据库客户端。默认情况下，Prisma 客户端生成到 `node_modules/.prisma/client` 文件夹中，但您可以[根据需要指定自定义位置](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path)

### 使用 Prisma 适配器设置 NextAuthJS

在 Next.js 应用程序中，NextAuthJS 使用包罗万象的路由（也称为通配符或后备路由）来管理身份验证请求。此动态路由是使用 Next.js 中基于文件的路由系统定义的。

在“**app**”目录中创建一个名为“**api**”的文件夹。在“**api**”文件夹中，创建一个“**auth**”文件夹。在“**auth**”文件夹内，创建一个名为“**[...nextauth]**”的包罗万象的路径作为文件夹。最后，在 catch-all 路由文件夹中创建一个“**route.ts**”文件并添加以下代码。

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

在 catch-all 路由文件中，我们导入 NextAuthJS 库并设置身份验证选项、提供程序和配置。 NextAuthJS 处理传入请求的解析，识别必要的身份验证操作，并根据指定的选项执行适当的逻辑。

提供的代码使用 Prisma 适配器设置 NextAuthJS，以便使用电子邮件提供商进行身份验证。我们来解释一下每一条语句：

进口：

PrismaAdapter 和 PrismaClient 分别从 @next-auth/prisma-adapter 和 @prisma/client 导入。这些用于将 NextAuthJS 与 Prisma 集成。
NextAuth 是从 next-auth 导入的，是 Next.js 应用程序中处理身份验证的主要库。
EmailProvider 从 next-auth/providers/email 导入，并用作基于电子邮件的身份验证的提供程序。

Prisma 设置：

使用 new PrismaClient() 创建 PrismaClient 实例。这允许与 Prisma ORM 和底层数据库进行通信。

身份验证选项：

authOptions 是一个定义 NextAuthJS 中身份验证配置的对象。
adapter 属性设置为 PrismaAdapter(prisma)，它使用 PrismaAdapter 将 NextAuthJS 与 Prisma 连接。
providers 数组包含一个提供商 EmailProvider。它配置了必要的电子邮件服务器详细信息和“发件人”电子邮件地址。

4.NextAuth 处理程序：

使用 authOptions 作为参数调用 NextAuth 函数，创建一个身份验证处理程序。
将生成的处理程序分配给 handler 变量。

5、出口：

handler 导出为 GET 和 POST 以支持 HTTP GET 和 POST 请求。

现在，让我们运行我们的服务器并测试功能。首先，通过运行“yarn dev”启动开发服务器。接下来，打开浏览器并访问“localhost:3000”以查看正在运行的应用程序。

要测试身份验证功能，请访问“localhost:3000/api/auth/signin”。在这里，您将体验NextAuthJS的魔力。 NextAuthJS 附带提供的模板支持无密码登录过程。要尝试一下，请输入有效的电子邮件地址。

一旦您提交电子邮件，NextAuthJS 将处理幕后流程。首先，它将生成一封电子邮件并将其发送到所提供的电子邮件地址，其中包含唯一的登录链接。此链接充当用户的安全身份验证令牌。然后，当用户单击链接时，NextAuthJS 将验证令牌并对用户进行身份验证。

这种无密码登录功能无需密码，从而增强了安全性和用户体验。用户只需单击通过电子邮件收到的链接即可快速、安全地访问其帐户。它简化了登录过程并降低了密码相关漏洞的风险。

当用户单击 NextAuthJS 生成的登录电子邮件并获得身份验证时，会在幕后执行多项操作以促进无缝登录体验。

1. 电子邮件链接验证：当用户单击登录链接时，NextAuthJS 会验证链接中嵌入的身份验证令牌。该令牌确保身份验证过程的安全性和完整性。

身份验证过程：令牌验证成功后，NextAuthJS 会识别用户并完成身份验证过程。它根据提供的令牌和配置的任何其他身份验证因素（例如多重身份验证）验证用户的身份。
会话创建：身份验证成功后，NextAuthJS 为用户创建一个会话。会话是一种持久状态，代表用户的身份验证状态，允许他们访问受保护的资源，而无需对后续请求重新进行身份验证。

4. Cookie：NextAuthJS 在用户浏览器中设置安全的仅 HTTP Cookie 来管理会话。这些 cookie 在跨多个请求维护用户的身份验证状态方面发挥着至关重要的作用。这些 cookie 通常包括会话 cookie 和可选的刷新令牌 cookie，具体取决于身份验证配置。

会话 Cookie：会话 Cookie 包含唯一标识用户会话的会话标识符（例如，随机生成的字符串）。它帮助 NextAuthJS 将后续请求与正确的会话和用户关联起来。
CSRF 令牌 Cookie：NextAuthJS 设置 CSRF（跨站点请求伪造）令牌 cookie 以防止 CSRF 攻击。 CSRF 令牌是 NextAuthJS 生成并存储在 cookie 中的唯一值。它用于验证和验证用户后续请求的真实性。当用户提交表单或执行敏感操作时，CSRF 令牌会包含在请求标头或正文中，以确保请求源自经过身份验证的用户会话，而不是来自恶意源。
回调 URL Cookie：NextAuthJS 设置回调 URL cookie 来存储用户在重定向到身份验证流程之前尝试访问的原始 URL。此 cookie 帮助 NextAuthJS 在成功验证后将用户重定向回所需页面。它通过将用户无缝返回到其预期目的地而不是通用登陆页面来确保流畅的用户体验。

通过使用安全的仅 HTTP cookie，NextAuthJS 确保身份验证状态保持安全且防篡改。 Cookie 已加密，可防止恶意行为者未经授权的访问或修改。

非常出色，成功将 NextAuthJS 与 Prisma 适配器集成到您的 Next.js 应用程序中！凭借 NextAuthJS 提供的易用性和适应性，您现在拥有一个可靠的身份验证系统。

查看下面链接的 GitHub 存储库，了解本指南中使用的代码：https://drive.google.com/uc?export=view&id=1wKPzjRzDzIrmD0fZ6jQmZ4CKNk9KBPpy。

但为什么停在这里呢？如果您对 Web 开发充满热情并渴望提高自己的技能，请考虑申请我们的 Web 开发训练营。我们的训练营提供全面的学习体验，为您提供在动态的 Web 开发世界中脱颖而出所需的知识和实践技能。

通过加入我们的训练营，您将获得尖端技术的实践经验，参与实际项目，并获得行业专家的个性化指导。无论您是初学者还是经验丰富的开发人员，我们的计划都旨在将您的 Web 开发技能提升到新的水平。

不要错过这个加速您的 Web 开发之旅的机会。立即申请我们的 Web 开发训练营并释放您在令人兴奋的 Web 开发领域的全部潜力。让我们共同打造令人惊叹的数字体验并塑造网络的未来。

使用 NextAuth.js 和 Prisma 在 Next.js 13 项目中实现无密码登录

什么是无密码登录？

让我们开始吧！

安装我们的依赖项

设置 Prisma

使用 Supabase 的 PostgreSQL

职业服务

让我们保持联系