Next.js 驗證-js教程-PHP中文網

Next.js Authentication

從 Next.js 15 開始，處理驗證變得更加強大和靈活，特別是憑藉其高級伺服器元件、Actions API 和中間件功能。在本文中，我們將探討在 Next.js 15 應用程式中實現身份驗證的最佳實踐，涵蓋伺服器元件、中間件、操作和會話管理等基本主題。

Next.js 15 增強了伺服器端渲染功能，並引入了用於處理身份驗證的新工具，特別是在伺服器元件和 Actions API 的上下文中。借助伺服器元件，您可以安全地管理伺服器上的身份驗證，而無需向客戶端公開敏感數據，而 Actions API 則允許無縫伺服器通訊。中間件可以幫助保護路由並動態檢查使用者權限，使身份驗證流程更加安全且使用者友好。

設定身份驗證

首先，選擇適合您的應用程式的身份驗證策略。常見的方法包括：

JWT（JSON Web 令牌）：非常適合無狀態應用程序，令牌儲存在客戶端上。
基於會話的身份驗證：適用於伺服器上具有會話儲存的應用程式。
OAuth：用於與第三方供應商（Google、GitHub 等）整合。

1.安裝next-auth進行身份驗證

對於需要 OAuth 的應用程序，Next.js 與 next-auth 很好地集成，從而簡化了會話和令牌管理。

npm install next-auth

登入後複製

使用 /app/api/auth/[...nextauth]/route.ts 在 Next.js 15 設定中配置它：

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

登入後複製

使用伺服器元件進行身份驗證

在 Next.js 15 中，伺服器元件可讓您在伺服器上渲染元件並安全地控制對資料的存取。

在伺服器元件中取得使用者工作階段：這減少了對客戶端狀態的依賴，並避免暴露客戶端中的敏感資料。您可以直接在伺服器元件中取得使用者會話資料。
伺服器元件中伺服器端驗證檢查範例:

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

   export default async function DashboardPage() {
     const session = await getServerSession(authOptions);

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

登入後複製

這裡，getServerSession 在伺服器上安全地取得使用者的會話資料。如果沒有有效的會話，重定向功能會將使用者傳送到登入頁面。

使用操作處理身份驗證

Next.js 15 中的 Actions API 提供了一種直接從客戶端與伺服器功能互動的方法。這對於登入、登出和註冊操作特別有用。

範例：建立登入操作

npm install next-auth

登入後複製

組件中登入操作的使用

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

登入後複製

loginAction 被安全地定義為伺服器操作，客戶端可以在不暴露敏感資料的情況下觸發它。

為 Auth Guards 實作中間件

Next.js 15 中的中間件提供了一種強大的方法來保護路由，方法是在載入頁面之前驗證伺服器上的驗證狀態。

路由保護中介軟體範例

要保護 /dashboard 和 /profile 等頁面，請在 middleware.ts 中建立中間件。

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

   export default async function DashboardPage() {
     const session = await getServerSession(authOptions);

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

登入後複製

會話管理和安全最佳實踐

維護安全會話和保護使用者資料在任何身份驗證流程中都至關重要。

使用僅 HTTP Cookie 進行令牌儲存:
- 避免將 JWT 儲存在 localStorage 或 sessionStorage 中。使用僅限 HTTP 的 cookie 來防止 XSS 攻擊。
會話過期與刷新令牌:
- 實作短期存取權杖和刷新令牌以確保會話保持安全。為此，您可以使用 next-auth 的會話管理功能。
角色為基礎的存取控制 (RBAC):
- 為使用者指派角色並根據他們的角色授權操作。在下一個身份驗證中，這可以使用會話物件或透過中間件和操作來完成。
跨站請求偽造 (CSRF) 保護:
- 使用 CSRF 保護來防止來自惡意網站的未經授權的請求。 next-auth 預設包含 CSRF 保護。
安全標頭和 HTTPS:
- 始終透過 HTTPS 為您的應用程式提供服務，並設定安全標頭，例如 Content-Security-Policy、Strict-Transport-Security 和 X-Frame-Options。