跳到內容
Pages Router建置您的應用程式驗證

驗證

理解驗證對於保護應用程式的資料至關重要。本頁面將引導您了解應使用哪些 React 和 Next.js 功能來實作驗證。

在開始之前，將流程分解為三個概念會有所幫助

  1. 驗證 (Authentication)：驗證使用者是否為他們所聲稱的身分。這需要使用者使用他們擁有的東西（例如使用者名稱和密碼）來證明其身分。
  2. 工作階段管理 (Session Management)：跨請求追蹤使用者的驗證狀態。
  3. 授權 (Authorization)：決定使用者可以存取哪些路由和資料。

此圖表顯示使用 React 和 Next.js 功能的驗證流程

Diagram showing the authentication flow with React and Next.js features

本頁面的範例逐步說明了基於教育目的的基本使用者名稱和密碼驗證。雖然您可以實作自訂驗證解決方案，但為了提高安全性和簡潔性，我們建議使用驗證函式庫。這些函式庫為驗證、工作階段管理和授權提供內建解決方案，以及社交登入、多因素驗證和基於角色的存取控制等其他功能。您可以在驗證函式庫章節中找到清單。

驗證

以下是實作註冊和/或登入表單的步驟

  1. 使用者透過表單提交其憑證。
  2. 表單發送一個由 API 路由處理的請求。
  3. 驗證成功後，流程完成，表示使用者已成功驗證。
  4. 如果驗證不成功，則會顯示錯誤訊息。

考慮一個登入表單，使用者可以在其中輸入其憑證

pages/login.tsx
import { FormEvent } from 'react'
import { useRouter } from 'next/router'
 
export default function LoginPage() {
  const router = useRouter()
 
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
 
    const formData = new FormData(event.currentTarget)
    const email = formData.get('email')
    const password = formData.get('password')
 
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
 
    if (response.ok) {
      router.push('/profile')
    } else {
      // Handle errors
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  )
}

上面的表單有兩個輸入欄位，用於擷取使用者的電子郵件和密碼。提交時，它會觸發一個函式，該函式會將 POST 請求發送到 API 路由 (/api/auth/login)。

然後，您可以在 API 路由中呼叫您的驗證提供者的 API 來處理驗證

pages/api/auth/login.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { signIn } from '@/auth'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { email, password } = req.body
    await signIn('credentials', { email, password })
 
    res.status(200).json({ success: true })
  } catch (error) {
    if (error.type === 'CredentialsSignin') {
      res.status(401).json({ error: 'Invalid credentials.' })
    } else {
      res.status(500).json({ error: 'Something went wrong.' })
    }
  }
}

工作階段管理

工作階段管理確保使用者的驗證狀態在跨請求之間保持不變。它涉及建立、儲存、重新整理和刪除工作階段或權杖。

有兩種類型的工作階段

  1. 無狀態 (Stateless)：工作階段資料（或權杖）儲存在瀏覽器的 Cookie 中。Cookie 會隨每個請求發送，以便在伺服器上驗證工作階段。此方法較簡單，但如果實作不正確，則可能較不安全。
  2. 資料庫 (Database)：工作階段資料儲存在資料庫中，使用者的瀏覽器僅接收加密的工作階段 ID。此方法更安全，但可能很複雜且會使用更多伺服器資源。

要知道的好處： 雖然您可以使用任何一種方法，或兩種都使用，但我們建議使用工作階段管理函式庫，例如 iron-session 或 Jose。

無狀態工作階段

設定和刪除 Cookie

您可以使用 API 路由將工作階段設定為伺服器上的 Cookie

pages/api/login.ts
import { serialize } from 'cookie'
import type { NextApiRequest, NextApiResponse } from 'next'
import { encrypt } from '@/app/lib/session'
 
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const sessionData = req.body
  const encryptedSessionData = encrypt(sessionData)
 
  const cookie = serialize('session', encryptedSessionData, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // One week
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Successfully set cookie!' })
}

資料庫工作階段

若要建立和管理資料庫工作階段，您需要遵循以下步驟

  1. 在資料庫中建立一個表格以儲存工作階段和資料（或檢查您的驗證函式庫是否處理此問題）。
  2. 實作插入、更新和刪除工作階段的功能
  3. 在將工作階段 ID 儲存在使用者的瀏覽器之前对其進行加密，並確保資料庫和 Cookie 保持同步（這是選用的，但建議用於中介軟體中的樂觀驗證檢查）。

在伺服器上建立工作階段:

pages/api/create-session.ts
import db from '../../lib/db'
import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const user = req.body
    const sessionId = generateSessionId()
    await db.insertSession({
      sessionId,
      userId: user.id,
      createdAt: new Date(),
    })
 
    res.status(200).json({ sessionId })
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

授權

一旦使用者通過驗證並建立工作階段，您就可以實作授權來控制使用者可以在您的應用程式中存取和執行的操作。

有兩種主要的授權檢查類型

  1. 樂觀 (Optimistic)：檢查使用者是否有權使用儲存在 Cookie 中的工作階段資料存取路由或執行動作。這些檢查對於快速操作很有用，例如顯示/隱藏 UI 元素或根據權限或角色重新導向使用者。
  2. 安全 (Secure)：檢查使用者是否有權使用儲存在資料庫中的工作階段資料存取路由或執行動作。這些檢查更安全，並且用於需要存取敏感資料或操作的操作。

對於這兩種情況，我們都建議

使用中介軟體進行樂觀檢查（選用）

在某些情況下，您可能想要使用中介軟體並根據權限重新導向使用者

  • 以執行樂觀檢查。由於中介軟體在每個路由上執行，因此它是集中重新導向邏輯和預先篩選未經授權使用者的好方法。
  • 以保護在使用者之間共用資料的靜態路由（例如，付費牆後面的內容）。

但是，由於中介軟體在每個路由上執行，包括預先提取的路由，因此重要的是僅從 Cookie 讀取工作階段（樂觀檢查），並避免資料庫檢查以防止效能問題。

例如

middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'
import { cookies } from 'next/headers'
 
// 1. Specify protected and public routes
const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login', '/signup', '/']
 
export default async function middleware(req: NextRequest) {
  // 2. Check if the current route is protected or public
  const path = req.nextUrl.pathname
  const isProtectedRoute = protectedRoutes.includes(path)
  const isPublicRoute = publicRoutes.includes(path)
 
  // 3. Decrypt the session from the cookie
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  // 4. Redirect to /login if the user is not authenticated
  if (isProtectedRoute && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
 
  // 5. Redirect to /dashboard if the user is authenticated
  if (
    isPublicRoute &&
    session?.userId &&
    !req.nextUrl.pathname.startsWith('/dashboard')
  ) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
 
  return NextResponse.next()
}
 
// Routes Middleware should not run on
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

雖然中介軟體對於初始檢查可能很有用，但不應成為您保護資料的唯一防線。大多數安全檢查應盡可能靠近您的資料來源執行，請參閱資料存取層以取得更多資訊。

提示:

  • 在中介軟體中，您也可以使用 req.cookies.get('session').value 讀取 Cookie。
  • 中介軟體使用 Edge Runtime，請檢查您的驗證函式庫和工作階段管理函式庫是否相容。
  • 您可以使用中介軟體中的 matcher 屬性來指定中介軟體應在哪些路由上執行。雖然對於驗證而言，建議中介軟體在所有路由上執行。

建立資料存取層 (DAL)

保護 API 路由

Next.js 中的 API 路由對於處理伺服器端邏輯和資料管理至關重要。保護這些路由以確保只有經過授權的使用者才能存取特定功能至關重要。這通常涉及驗證使用者的驗證狀態及其基於角色的權限。

以下是如何保護 API 路由的範例

pages/api/route.ts
import { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req)
 
  // Check if the user is authenticated
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }
 
  // Check if the user has the 'admin' role
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Unauthorized access: User does not have admin privileges.',
    })
    return
  }
 
  // Proceed with the route for authorized users
  // ... implementation of the API Route
}

此範例示範了一個 API 路由，其中包含用於驗證和授權的雙層安全檢查。它首先檢查是否有活動的工作階段，然後驗證登入的使用者是否為「管理員」。這種方法確保安全存取僅限於經過驗證和授權的使用者，從而維護請求處理的強大安全性。

資源

既然您已了解 Next.js 中的驗證，以下是一些與 Next.js 相容的函式庫和資源，可協助您實作安全驗證和工作階段管理

驗證函式庫

工作階段管理函式庫

延伸閱讀

若要繼續學習有關驗證和安全性的知識，請查看以下資源