Next.js에서 인증 구현: 다양한 전략 비교-JS 튜토리얼-php.cn

Next.js에서 인증 구현: 다양한 전략 비교

PHPz

풀어 주다： 2024-08-13 19:01:21

원래의

1013명이 탐색했습니다.

Implementing Authentication in Next.js: Comparing Different Strategies

용감한 개발자 여러분, 환영합니다! ? 오늘 우리는 Next.js 애플리케이션에서 인증의 중요한 세계에 대해 알아볼 것입니다. 다양한 인증 전략을 탐색하면서 해당 전략의 강점, 사용 사례 및 구현 세부 사항을 살펴보겠습니다. Next.js 앱을 보호하기 위한 여정을 시작하면서 안전벨트를 단단히 매세요! ?

Next.js에서 인증이 중요한 이유

인증은 승인된 사용자만 사이트의 특정 부분에 액세스할 수 있도록 보장하는 애플리케이션의 문지기입니다. Next.js 생태계에서 인증을 올바르게 구현하는 것은 사용자 데이터를 보호하고, 세션을 관리하고, 개인화된 경험을 만드는 데 중요합니다.

1. JWT 인증: 무상태 보안 ?️

JSON 웹 토큰(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가 쿠키로 클라이언트에 전송됩니다. 이 쿠키는 후속 요청에 대한 세션 데이터를 검색하는 데 사용됩니다.

다음은 Next.js에서 express-session을 사용한 기본 구현입니다.

// 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 자격 증명을 설정하고 관리해야 합니다.