信息圖標
跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. next-auth NPM
NODE 說明

next-auth NPM（開發者的使用方法）

Darrius Serrant
Darrius Serrant
更新日期:

身份驗證對於現代網絡應用至關重要，確保用戶可以安全地存取其數據和功能並提供基礎設施支持。 NextAuth.js 是一個功能強大且靈活的身份驗證庫，旨在與 Next.js 無縫合作。 本文將探討如何在 Next.js 項目中設置和使用 NextAuth.js，以便輕鬆保護用戶數據。 我們還將向您展示如何將這個 npm 與其他庫（如 IronPDF 庫）一起使用，以實現項目的智能無狀態身份驗證。

什麼是 NextAuth.js？

NextAuth.js 是一個開源的身份驗證庫，用於 Next.js 應用，提供了在 Web 應用中實現身份驗證的靈活和安全的方法。藉助 NextAuth.js，開發人員可以輕鬆地將身份驗證集成到其 Next.js 項目中，而無需管理用戶身份驗證和會話管理的複雜性。

該包可高度配置，允許開發人員自定義身份驗證流程、保護 API 路由並無縫處理用戶會話。 具有增強的功能，使您可以創建管理帳戶訪問、加密和解碼 JSON Web Tokens 以及設置自定義餅乾安全政策和會話屬性流程，使您能夠調節帳戶訪問和會話驗證的頻率。

為什麼選擇 NextAuth.js？

NextAuth.js 提供多種好處：

  • 易用性：簡便的設置，僅需最少的配置。
  • 靈活性：支持多種身份驗證提供程序，包括 OAuth、電子郵件/密碼等。
  • 安全性：內置的安全功能來保護您自己的數據庫的用戶數據。
  • 擴展性：可以輕鬆擴展以滿足自定義身份驗證需求。

使用 NextAuth.js npm 開始

首先，讓我們創建一個新的 Next.js 項目。 打開終端，運行：

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

接下來，安裝 NextAuth.js：

npm install next-auth
npm install next-auth
SHELL

設置 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';

// Configuring NextAuth to use GitHub and Google providers for authentication
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, // Secret for encrypting tokens if needed
});
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';

// Configuring NextAuth to use GitHub and Google providers for authentication
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, // Secret for encrypting tokens if needed
});
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"; // Used to determine loading state
  return (
    <div>
      {!session && ( // Render sign-in buttons when session is not active
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && ( // Display user info and sign-out option when session is active
        <>
          <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"; // Used to determine loading state
  return (
    <div>
      {!session && ( // Render sign-in buttons when session is not active
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && ( // Display user info and sign-out option when session is active
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};

export default LoginButton;
JAVASCRIPT

代碼解釋

LoginButton 組件在使用 Next.js 的應用中使用 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); // Fetch session data server-side
  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); // Fetch session data server-side
  return {
    props: { session },
  };
}

export default ProtectedPage;
JAVASCRIPT

代碼解釋

ProtectedPage 組件在 Next.js 應用中使用 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，使其適合多種開發環境。

簡單集成

輕鬆將 IronPDF 集成到您的 Node.js 應用程序中，使用其 npm 包。 API 文檔詳實，使得在您的項目中集成 PDF 生成功能變得直觀簡單。

安裝

要安裝 IronPDF 包，請使用以下命令：

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

使用 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"
npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
SHELL

接下來，導航到您的項目目錄：

cd nextauth
cd nextauth
SHELL

安裝所需的包：

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

創建一個 PDF 生成器

PDF 生成 API：第一步是創建一個後端 API 來生成 PDF 文件。 由於 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');
    // Defining the HTML content for the PDF
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    // Convert HTML content to PDF
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data); // Send the PDF file as a response
  } 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');
    // Defining the HTML content for the PDF
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    // Convert HTML content to PDF
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data); // Send the PDF file as a response
  } 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';

// Setting up NextAuth with GitHub provider
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';

// Setting up NextAuth with GitHub provider
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});
JAVASCRIPT

並添加一個名為 LoginButton.js 的組件。 其中將包含以下內容：

// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) { // Display sign-out button and user info when session is active
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return ( // Display sign-in button when not signed in
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}
// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) { // Display sign-out button and user info when session is active
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return ( // Display sign-in button when not signed in
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}
JAVASCRIPT

修改您的 index.js 如下：

// pages/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 } from "next-auth/react";

export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();

  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate); // Set initial text state to formatted current date
  }, []);

  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); // Clean up after downloading
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value); // Update the text state with input 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>
  );
}
// pages/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 } from "next-auth/react";

export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();

  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate); // Set initial text state to formatted current date
  }, []);

  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); // Clean up after downloading
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value); // Update the text state with input 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。

請務必記得在代碼開始添加您收到的授權密鑰，如下所示：

// Adjust paths as necessary depending on how you import IronPDF
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
// Adjust paths as necessary depending on how you import IronPDF
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 Node.js 為您的應用提供了強大的 PDF 生成和處理能力，並且與現代應用開發完美集成。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用