[Next.js14 강의] 28강 - 보안 및 접근 제어

안녕하세요! 그레이 해커 월횽입니다. 이번 강의에서는 Next.js 애플리케이션에서 보안과 접근 제어를 다루며, 애플리케이션을 안전하게 보호하고 사용자 인증 및 권한 관리를 구현하는 방법을 배웁니다. 주요 내용으로는 JWT 인증, OAuth2.0, HTTPS 적용, 그리고 미들웨어를 활용한 보안 처리 등을 다룹니다.

 

 

1. 웹 애플리케이션 보안의 기본 원칙

 

1-1. 인증(Authentication)

사용자가 누구인지 확인하는 과정입니다. 로그인 시스템을 구축하여 사용자가 올바른 자격 증명을 했는지 확인합니다. 일반적으로 JWT(JSON Web Token), 세션 기반 인증, OAuth2.0 등을 사용하여 인증을 구현합니다.

반응형

1-2. 권한 관리(Authorization)

사용자가 애플리케이션 내에서 어떤 권한을 가지고 어떤 리소스에 접근할 수 있는지를 제어하는 과정입니다. 역할 기반 접근 제어(RBAC), ACL(Access Control List) 등이 많이 사용됩니다.

 

1-3. 데이터 보호(Encryption)

네트워크를 통해 전송되는 데이터를 암호화하여 도청이나 위변조를 방지하는 방법입니다. HTTPS를 통해 데이터를 암호화하거나, 중요한 정보를 암호화하여 저장하는 방법이 있습니다.

 

 

2. JWT(JSON Web Token)를 활용한 인증

 

2-1. JWT란 무엇인가?

JWT는 JSON 형식의 토큰을 이용해 사용자의 신원을 인증하는 방식입니다. 토큰에는 헤더, 페이로드, 서명이 포함되어 있으며, 이를 사용해 서버와 클라이언트 간 인증 정보를 안전하게 주고받을 수 있습니다.

 

2-2. JWT를 사용하는 이유

· 무상태(stateless): 서버는 사용자에 대한 세션을 저장할 필요가 없으며, 클라이언트가 토큰을 통해 자신의 인증 상태를 유지합니다.
· 확장성: 분산 서버 환경에서 사용자가 어디에서나 동일한 인증 상태를 유지할 수 있습니다.
· 보안성: 토큰은 서명되어 있어 데이터의 무결성을 보장할 수 있으며, 중간에서 데이터가 변경되면 서명이 유효하지 않게 됩니다.

728x90

2-3. JWT 인증 구현 방법

· 로그인 시 사용자 자격 증명을 확인한 후, 서버에서 JWT 토큰을 발급합니다.
· 클라이언트는 이 JWT 토큰을 로컬 스토리지나 쿠키에 저장하여, API 요청 시 Authorization 헤더에 포함해 전달합니다.
· 서버는 받은 토큰을 검증하여 사용자를 인증합니다.

 

로그인 시 JWT 발급 예시

import jwt from 'jsonwebtoken';

export default function login(req, res) {
  const { username, password } = req.body;
  
  // 사용자 자격 증명 확인
  if (username === 'admin' && password === 'password123') {
    const token = jwt.sign({ username }, 'secretKey', { expiresIn: '1h' });
    res.status(200).json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
}

 

API 요청 시 JWT 검증 예시

import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1];

  if (!token) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  try {
    const decoded = jwt.verify(token, 'secretKey');
    res.status(200).json({ message: 'Authorized', user: decoded });
  } catch (error) {
    res.status(401).json({ message: 'Invalid token' });
  }
}

 

 

3. OAuth 2.0을 활용한 소셜 로그인

 

3-1. OAuth 2.0 개요

OAuth 2.0은 외부 서비스(예: Google, Facebook, GitHub)에서 제공하는 소셜 로그인을 구현하는데 사용됩니다. 사용자는 외부 서비스 계정으로 로그인하며, 서버는 액세스 토큰을 받아 사용자 정보를 확인할 수 있습니다.

SMALL

3-2. OAuth 2.0 동작 흐름

· 사용자가 소셜 로그인 버튼을 클릭하면 OAuth 제공자(예: Google)로 리디렉션됩니다.
· 사용자가 OAuth 제공자에 로그인하면 액세스 토큰이 발급됩니다.
· 애플리케이션은 이 토큰을 받아 사용자 정보를 확인하고, 세션 또는 JWT 토큰을 생성해 클라이언트에게 전달합니다.

 

3-3. OAuth 2.0을 NextAuth.js로 구현하기

NextAuth.js는 Next.js에서 OAuth 2.0 로그인을 쉽게 구현할 수 있는 라이브러리입니다. Google OAuth를 사용한 예시는 다음과 같습니다.

 

NextAuth.js 설치

npm install next-auth

 

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_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

 

.env.local에 OAuth 클라이언트 ID와 비밀 키를 추가합니다.

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

 

이렇게 하면 Google 소셜 로그인을 구현할 수 있으며, 로그인 후 JWT 토큰을 활용할 수도 있습니다.

 

 

4. HTTPS와 데이터 암호화

 

4-1. HTTPS 적용

HTTPS는 SSL/TLS 인증서를 통해 서버와 클라이언트 간의 데이터 전송을 암호화합니다. 이를 통해 중간자 공격(MITM)을 방지할 수 있으며, 데이터가 안전하게 전달됩니다.

 

4-2. Vercel에서 HTTPS 적용하기

Vercel은 기본적으로 HTTPS를 지원합니다. Vercel에 Next.js 애플리케이션을 배포하면 자동으로 무료 SSL 인증서가 적용됩니다.

 

4-3. 민감한 데이터 암호화

비밀번호나 결제 정보 같은 민감한 데이터는 데이터베이스에 저장할 때도 암호화해야 합니다. 일반적으로 bcrypt 같은 라이브러리를 사용해 비밀번호를 해싱하여 저장합니다.

import bcrypt from 'bcrypt';

const hashedPassword = await bcrypt.hash('password123', 10);

 

 

5. Middleware를 이용한 보안 처리

 

5-1. 사용자 인증 미들웨어

Next.js Middleware 기능을 활용해 사용자 요청을 가로채고 인증을 처리할 수 있습니다. 이를 통해 인증되지 않은 사용자의 접근을 막고, 보안 수준을 높일 수 있습니다.

import { NextResponse } from 'next/server';

export function middleware(req) {
  const token = req.cookies.authToken;

  if (!token) {
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

 

5-2. CORS 설정

CORS(Cross-Origin Resource Sharing)는 다른 출처에서 서버에 요청을 보낼 때 발생하는 보안 문제를 해결하기 위한 방법입니다. API 서버에 CORS 설정을 추가해, 허용된 출처에서만 요청을 허용해야 합니다.

 

이번 강의에서는 Next.js 애플리케이션의 보안과 접근 제어 방법을 배웠습니다. JWT 인증, OAuth 2.0 소셜 로그인, HTTPS 적용, 그리고 Middleware를 활용한 보안 처리를 통해 사용자의 인증 상태를 관리하고, 데이터 보호를 강화하는 방법을 학습했습니다. 이를 통해 안전한 웹 애플리케이션을 구축할 수 있습니다.

 

 

 

 

 

- 이전 수업 목록