세션과 쿠키를 이용한 Django 인증 시스템

1. 세션과 쿠키의 작동 방식:
   • Django에서 로그인 시, 사용자의 세션 정보는 서버의 데이터베이스에 저장됩니다. 이 세션에는 랜덤으로 생성된 세션 ID가 포함되어 있습니다.
   • 서버는 이 세션 ID를 쿠키에 담아 브라우저로 보냅니다. 브라우저는 이 쿠키를 저장하고, 이후 동일한 도메인으로 요청을 보낼 때마다 이 쿠키를 함께 전송합니다.
2. 도메인 기반 쿠키:
   • 쿠키는 도메인을 기준으로 작동합니다. 특정 도메인에서 생성된 쿠키는 해당 도메인에 대한 요청 시에만 브라우저에 의해 전송됩니다. 이는 보안과 관련된 중요한 특징입니다.
3. CORS 설정:
   • 프론트엔드(예: React)와 백엔드(Django)가 다른 도메인 또는 포트에서 실행될 때, 백엔드에 대한 AJAX 요청을 위해 CORS_ALLOWED_ORIGINS 설정이 필요합니다. 이 설정은 백엔드가 어떤 오리진에서 오는 요청을 허용할지 지정합니다.
4. Axios와 쿠키 전송:
   • JavaScript 또는 Axios를 사용하여 요청을 보낼 때, withCredentials: true 설정을 추가해야 합니다. 이 설정은 AJAX 요청에 쿠키를 포함시키기 위해 필요합니다.
5. 백엔드 설정:
   • Django 백엔드에서 CORS_ALLOW_CREDENTIALS = True를 설정해야만, AJAX 요청에 포함된 쿠키를 받아들일 준비가 됩니다.

Django와 React에서 세션과 쿠키를 사용한 인증을 구현하기 위한 기본적인 설정 예시를 제공하겠습니다.

Django 설정

django-cors-headers 설치 이후

settings.py에서 CORS 설정

   # settings.p

   INSTALLED_APPS = [
       # ... 기타 설치된 앱들 ...
       'corsheaders',  # corsheaders 앱 추가
       # ... 기타 설치된 앱들 ...
   ]

   MIDDLEWARE = [
       # ... 기타 미들웨어 ...
       'corsheaders.middleware.CorsMiddleware',  # CORS 미들웨어 추가, 꼭 아래의 미들웨어 보다는 먼저 작성
       'django.middleware.common.CommonMiddleware',
       # ... 기타 미들웨어 ...
   ]

   # 모든 오리진을 허용하거나 특정 오리진만 허용
   CORS_ALLOW_ALL_ORIGINS = True
   # 또는
   # CORS_ALLOWED_ORIGINS = [
   #     "http://localhost:3000",  # React 앱의 URL
   # ]

   # AJAX 요청에 쿠키를 포함하기 위해
   CORS_ALLOW_CREDENTIALS = True

React 설정 (Axios 사용 예시)

Axios 인스턴스 생성

   // Axios 설정
   import axios from 'axios';

   const instance = axios.create({
     baseURL: "http://127.0.0.1:8000/api/v1",  // Django 서버 주소
     withCredentials: true,  // 쿠키를 포함시키기 위해
   });

   export default instance;

CSRF

Django에서 CSRF(Cross-Site Request Forgery) 토큰은 중요한 보안 기능 중 하나입니다. CSRF 토큰은 사용자의 세션을 보호하기 위해 사용되며, 사이트 간 요청 위조 공격을 방지하는 데 도움이 됩니다. Django의 CSRF 보호 기능을 사용하려면 다음과 같은 설정이 필요합니다.

Django CSRF 설정

settings.py에서 CSRF 설정

# settings.py

CSRF_TRUSTED_ORIGINS = ["http://127.0.0.1:3000"] # front 도메인 주소

템플릿에서 CSRF 토큰 사용

<form method="post">
    {% csrf_token %}
    <!-- 폼 필드 -->
</form>

AJAX 요청에 CSRF 토큰 포함
Django에서는 AJAX 요청에도 CSRF 토큰을 포함해야 합니다. 이를 위해 React 애플리케이션에서 요청을 보낼 때, CSRF 토큰을 요청 헤더에 포함해야 합니다.

React 설정 (Axios 사용 예시)

Axios 인스턴스에 CSRF 토큰 추가

// Axios 설정
import axios from 'axios';

const getCsrfToken = () => {
  return document.cookie.split('; ').find(row => row.startsWith('csrftoken=')).split('=')[1];
};

const instance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/v1",  // Django 서버 주소
  withCredentials: true,  // 쿠키를 포함시키기 위해
  headers: {
    'X-CSRFToken': getCsrfToken(),  // CSRF 토큰 추가
  }
});

export default instance;

위의 코드는 React 앱에서 Django 서버로 보내는 모든 요청에 CSRF 토큰을 포함시키는 방법을 보여줍니다. getCsrfToken 함수는 브라우저의 쿠키에서 CSRF 토큰을 추출하고, Axios 인스턴스는 이 토큰을 요청 헤더에 추가하여 서버에 전송합니다. 이 방법으로 Django 서버의 CSRF 보호 기능을 충족시킬 수 있습니다.