在 Next.js 中實作身份驗證：比較不同的策略-js教程-PHP中文網

Implementing Authentication in Next.js: Comparing Different Strategies

歡迎，勇敢的開發者！？今天，我們將深入探討 Next.js 應用程式中身份驗證的關鍵領域。當我們瀏覽各種身份驗證策略時，我們將探討它們的優勢、用例和實作細節。當我們踏上保護您的 Next.js 應用程式的旅程時，請繫好安全帶！？

為什麼身份驗證在 Next.js 中很重要

身份驗證是您應用程式的看門人，確保只有授權使用者才能存取您網站的某些部分。在 Next.js 生態系統中，正確實施身份驗證對於保護使用者資料、管理會話和創建個人化體驗至關重要。

1. JWT 身份驗證：無狀態安全？ ️

JSON Web 令牌 (JWT) 提供無狀態的身份驗證方法，使其非常適合可擴展的應用程式。

工作原理：

將 JWT 想像成一張安全的編碼票證。當使用者登入時，他們會收到此票證，並在每次後續請求時出示該票證以證明其身分。

讓我們來看看基本的 JWT 實作：

// pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Verify user credentials (simplified for demo)
    const { username, password } = req.body;
    if (username === 'demo' && password === 'password') {
      // Create and sign a JWT
      const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).end();
  }
}

// Middleware to verify JWT
export function verifyToken(handler) {
  return async (req, res) => {
    const token = req.headers.authorization?.split(' ')[1];
    if (!token) {
      return res.status(401).json({ message: 'No token provided' });
    }
    try {
      const decoded = jwt.verify(token, process.env.JWT_SECRET);
      req.user = decoded;
      return handler(req, res);
    } catch (error) {
      return res.status(401).json({ message: 'Invalid token' });
    }
  };
}

登入後複製

這種方法是無狀態且可擴展的，但需要仔細處理 JWT 金鑰和令牌過期。

2. 基於會話的身份驗證：有狀態且安全？

基於會話的身份驗證使用伺服器端會話來追蹤使用者登入狀態，從而提供對使用者會話的更多控制。

工作原理：

當使用者登入時，伺服器上會建立一個會話，並將會話 ID 作為 cookie 傳送到客戶端。然後，此 cookie 用於檢索後續請求的會話資料。

這是使用 Express-Session 和 Next.js 的基本實作：

// pages/api/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { expressSession } from 'next-auth/adapters';

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text" },
        password: {  label: "Password", type: "password" }
      },
      authorize: async (credentials) => {
        // Verify credentials (simplified for demo)
        if (credentials.username === 'demo' && credentials.password === 'password') {
          return { id: 1, name: 'Demo User' };
        }
        return null;
      }
    })
  ],
  session: {
    jwt: false,
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  adapter: expressSession(),
});

// In your component or page
import { useSession } from 'next-auth/client';

export default function SecurePage() {
  const [session, loading] = useSession();

  if (loading) return <div>Loading...</div>;
  if (!session) return <div>Access Denied</div>;

  return <div>Welcome, {session.user.name}!</div>;
}

登入後複製

這種方法提供了對會話的更多控制，但需要會話儲存管理。

3. OAuth：委託身份驗證？

OAuth 可讓您將身分驗證委託給受信任的供應商，例如 Google、Facebook 或 GitHub。

工作原理：

您無需自行管理使用者憑證，而是依賴已建立的提供者來處理身分驗證。這可以增強安全性並簡化使用者的登入過程。

以下是如何使用 Next.js 和 NextAuth.js 設定 OAuth：

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  // ... other configuration options
});

// In your component or page
import { signIn, signOut, useSession } from 'next-auth/client';

export default function Page() {
  const [session, loading] = useSession();

  if (loading) return <div>Loading...</div>;

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br/>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br/>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
    </>
  )
}

登入後複製

此方法將大部分身份驗證複雜性轉移給受信任的供應商，但需要設定和管理 OAuth 憑證。