节点帮助

next-auth NPM（如何为开发人员工作）

发布 2024年十二月15日

介绍

身份验证对于现代网络应用程序至关重要，它可以确保用户安全地访问其数据和功能，并提供基础设施支持。 NextAuth.js 是一个强大而灵活的身份验证库，旨在与 Next.js 无缝协作。本文将探讨如何在 Next.js 项目中设置和使用 NextAuth.js，以便轻松保护用户数据。我们还将向您展示如何将此 npm 与 IronPdf 库等其他库结合起来，为您的项目提供直观的无状态身份验证。

什么是 NextAuth.js？

NextAuth.js 是一个适用于 Next.js 应用程序的开源身份验证库，它为在网络应用程序中实施身份验证提供了一种灵活而安全的方法。有了 NextAuth.js，开发人员可以轻松地将身份验证集成到他们的 Next.js 项目中，而无需管理复杂的用户身份验证和会话管理。

该软件包具有很高的可配置性，允许开发人员自定义身份验证流程、确保 API 路由安全并无缝处理用户会话。通过增强的功能，您可以创建自己的程序来管理对账户的访问、对 JSON Web 标记进行加密和解码，以及建立自定义 cookie 安全策略和会话属性，从而规范对账户的访问和会话验证的频率。

为什么选择 NextAuth.js？

NextAuth.js 有以下几个优点：

易于使用：设置简单，配置最少。
灵活性：支持各种身份验证提供商，包括 OAuth、电子邮件/密码等。
安全性：内置安全功能，保护您自己数据库的用户数据。
可扩展性：可轻松扩展，以满足自定义身份验证需求。

开始使用下一代 Auth npm

首先，让我们创建一个新的 Next.js 项目。打开终端并运行

npx create-next-app@latest my-next-auth-app
cd my-next-auth-app

接下来，安装 NextAuth.js：

npm install next-auth

设置 NextAuth.js

为您的 API 路由创建一个新文件，以处理身份验证。在 "pages/api/auth "目录下创建以下内容[...nextauth].js 文件：

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

JAVASCRIPT

环境变量

在项目根目录下创建一个".env.local "文件，用于存储环境变量：

// Just make sure to fill out the variables with your actual information!
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_nextauth_secret

为您的应用程序添加身份验证

现在，让我们为您的应用程序添加身份验证功能。创建一个登录按钮和一个配置文件组件来显示用户信息。

// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
  const { data: session, status } = useSession();
  const loading = status === "loading";
  return (
    <div>
      {!session && (
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};
export default LoginButton;

// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
  const { data: session, status } = useSession();
  const loading = status === "loading";
  return (
    <div>
      {!session && (
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};
export default LoginButton;

JAVASCRIPT

代码解释

在 Next.js 应用程序中，LoginButton 组件使用 NextAuth.js 处理用户身份验证。它使用 useSession 钩子来确定用户是否已登录。如果用户未通过身份验证，则会显示按钮，允许他们使用 GitHub 或 Google 登录。如果用户已通过身份验证，则会显示一条包含其电子邮件的信息和一个退出登录的按钮。该组件提供了一个简单的界面，可通过操作会话对象来管理用户登录和注销操作。

保护路由

要保护路由并确保只有通过身份验证的用户才能访问某些页面，请使用 NextAuth.js 中的 getSession 函数。

// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
  if (!session) {
    return <p>You need to be authenticated to view this page.</p>;
  }
  return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}
export default ProtectedPage;

// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
  if (!session) {
    return <p>You need to be authenticated to view this page.</p>;
  }
  return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}
export default ProtectedPage;

JAVASCRIPT

代码解释

Next.js 应用程序中的 ProtectedPage 组件使用 NextAuth.js 来限制只有通过身份验证的用户才能访问。它使用getServerSideProps在服务器端检索用户的会话属性，并将其作为道具传递给组件。如果用户未通过身份验证，页面会显示需要身份验证的信息。如果用户已通过验证，则会显示其电子邮件地址，以示欢迎。这种设置可确保只有登录用户才能访问页面内容。

介绍IronPDF

IronPDF是一个功能强大的 node.js PDF 库，允许开发人员在其 node.js 项目中生成和编辑 PDF。无论您需要从 HTML 创建 PDF、处理现有 PDF 还是将网页转换为 PDF 格式，IronPDF 都能满足您的需求。

next-auth NPM（如何为开发人员工作）：图 1 - IronPDF for Node.js：Node.js PDF 库

主要功能

HTML 转换为 PDF

将 HTML 内容轻松转换为 PDF 文档。此功能特别适用于从网页内容生成动态PDF。

URL 转换为 PDF

直接从 URL 生成 PDF，允许您捕获网页内容并以编程方式将其保存为 PDF 文件。

PDF 操作

轻松合并、拆分和操作现有的PDF文档。 IronPdf 提供附加页面、分割文档等功能。

PDF 安全

通过设置密码或应用数字签名来保护您的PDF文档。 IronPDF 提供选项以保护您的敏感文档免受未经授权的访问。

高质量输出

生成高质量的PDF文档，精确渲染文本、图像和格式。 IronPDF 确保您生成的 PDF 保持与原始内容的一致性。

跨平台兼容性

IronPDF兼容多个平台，包括Windows、Linux和macOS，使其适用于广泛的开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 API 文档详实，使将 PDF 生成功能集成到您的项目中变得简单明了。

安装

安装IronPDF软件包，请使用以下命令：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

使用 IronPDF 和 NextAuth.js 生成 PDF 文档

安装依赖项：首先，创建一个新的 Next.js 项目(如果你还没有)使用以下命令：

npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

接下来，导航到你的项目目录：

cd nextauth

安装所需的软件包：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth

创建 PDF 生成器

PDF 生成 API：第一步是创建生成 PDF 文档的后台 API。由于 IronPdf 只在服务器端运行，我们需要创建一个 API，以便在用户想要生成 PDF 时调用。在 pages/api/pdf.js 路径下创建一个文件，并添加以下内容：

// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
  try {
    const currentDate = new Date();
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
  try {
    const currentDate = new Date();
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

JAVASCRIPT

这将创建一个使用 IronPDF 库生成 PDF 文件的 Next.js API 路由。它可以创建一个包含标题和当前日期的 HTML 字符串，使用 date-fns 格式化日期，并将 HTML 转换为 PDF。生成的 PDF 将作为可下载文件在响应中返回。这种方法允许在服务器端环境中动态生成 PDF，从而有助于即时创建报告、发票或其他文档。

现在，让我们使用 Next-Auth 将 GIT 登录添加到前端网站。为此，我们需要获取用户的 GitID 和密码。登录您的 Git 账户并导航至开发人员设置，如下所示：

next-auth NPM（如何为开发人员工作）：图 2 - 在哪里可以找到 Git 的开发人员设置

单击 New GitHub App 并添加您的网站详细信息：

next-auth NPM（如何为开发人员工作）：图 3 - 在 GitHub 中添加网站详细信息

将应用程序 ID 和客户端 ID 存储在安全的地方。然后在项目根目录下创建一个 .env.local 文件，用于存储环境变量：

// Here you can use the App and Client ID you just got from GitHub
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
NEXTAUTH_SECRET=secret

为您的 API 路由创建一个新文件，以处理身份验证。在 pages/api/auth 目录中，创建一个[...nextauth].js文件就是这样：

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

JAVASCRIPT

并添加一个名为 LoginButton.js 的组件。其中将包含以下内容：

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

JAVASCRIPT

请按以下方式修改您的 index.js

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();
  const accessToken = session?.accessToken;
  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
        {!session && <LoginButton />}
        {session && (
          <>
            <p className="w-full text-center">
              <span className="px-4 text-xl border-gray-500">
                You are logged in enter URL to convert to PDF:
              </span>
              <input
                className="border border-gray-700 w-1/4"
                onChange={handleChange}
                placeholder="Enter URL here..."
              />
            </p>
            <button
              className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
              onClick={generatePdf}
            >
              Generate PDF
            </button>
          </>
        )}
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();
  const accessToken = session?.accessToken;
  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
        {!session && <LoginButton />}
        {session && (
          <>
            <p className="w-full text-center">
              <span className="px-4 text-xl border-gray-500">
                You are logged in enter URL to convert to PDF:
              </span>
              <input
                className="border border-gray-700 w-1/4"
                onChange={handleChange}
                placeholder="Enter URL here..."
              />
            </p>
            <button
              className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
              onClick={generatePdf}
            >
              Generate PDF
            </button>
          </>
        )}
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

JAVASCRIPT

代码示例的输出

第一页

next-auth NPM（如何为开发人员工作）：图 4 - 输出的网站

登录页面

next-auth NPM（如何为开发人员工作）：图 5 - 使用 GitHub 登录按钮

登录后

next-auth NPM（如何为开发人员工作）：图 6 - 生成 PDF 的主要网页

输出生成的 PDF

next-auth NPM（如何为开发人员工作）：图 7 - 输出的 PDF

IronPDF 许可证

IronPDF.

请务必将收到的许可证密钥放在代码的开头：

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JAVASCRIPT

结论

最终，NextAuth.js 简化了在 Next.js 应用程序中添加身份验证的过程。它支持多个提供商，具有强大的安全功能，是处理用户身份验证的最佳选择。您可以随时查阅 NextAuth.js 文档，了解更多高级配置和功能。除此之外，IronPDF for Node.js 还能为您的应用程序提供强大的 PDF 生成和处理功能，并能与现代应用程序开发很好地集成。

下一步 >
NPM fuse-box（如何为开发人员工作）