Django, React 장고, 리액트 로그인 인증 통신하기. 풀스택

Django를 백엔드로, React를 프론트엔드로 사용하는 경우 로그인 기능 구현은 여러 단계를 포함합니다. 일반적인 접근 방식은 다음과 같습니다:

1. Django에서 사용자 인증 설정

Django에서는 django.contrib.auth 앱을 사용하여 사용자 인증을 처리할 수 있습니다. RESTful API를 제공하기 위해 djangorestframework와 dj-rest-auth, django-allauth 같은 패키지를 사용할 수 있습니다.

1. 필요한 패키지 설치:

    pip install djangorestframework dj-rest-auth django-allauth

2. settings.py에 앱 추가:

    INSTALLED_APPS = [
        ...
        'django.contrib.auth',
        'django.contrib.sites',
        'rest_framework',
        'rest_framework.authtoken',
        'dj_rest_auth',
        'allauth',
        'allauth.account',
        'dj_rest_auth.registration',
        ...
    ]
   
    SITE_ID = 1
   
    REST_FRAMEWORK = {
        'DEFAULT_AUTHENTICATION_CLASSES': (
            'rest_framework.authentication.TokenAuthentication',
        ),
    }

3. URLconf 설정:

   urls.py 파일에 dj-rest-auth의 URL 패턴을 포함시킵니다.

    urlpatterns = [
        ...
        path('admin/', admin.site.urls),
        path('api/v1/', include('dj_rest_auth.urls')),
        path('api/v1/registration/', include('dj_rest_auth.registration.urls')),
        ...
    ]

2. React에서 로그인 인터페이스 구현

React 애플리케이션에서 로그인 폼을 구현하고, fetch API나 Axios 같은 HTTP 클라이언트를 사용하여 Django 백엔드에 로그인 요청을 보냅니다.

1. 로그인 폼 구현:

   로그인 폼 컴포넌트에서 이메일과 비밀번호 입력 필드를 포함시킵니다.

2. 로그인 요청 보내기:

   사용자가 폼을 제출하면, 입력된 이메일과 비밀번호를 사용하여 Django 백엔드에 로그인 요청을 보냅니다.

    const handleLogin = async (email, password) => {
        const response = await fetch('http://localhost:8000/api/v1/login/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ email, password }),
        });
   
        if (response.ok) {
            const data = await response.json();
            console.log('Login successful', data);
            // 토큰 저장 및 사용자를 로그인 상태로 설정
        } else {
            console.error('Login failed');
            // 에러 처리
        }
    };

3. 사용자 인증 상태 관리

로그인에 성공한 후, 받은 인증 토큰을 저장(예: localStorage, sessionStorage, cookie 등)하고, 이를 사용하여 사용자가 인증된 상태임을 관리합니다.

React 컴포넌트나 Redux, Context API 등을 사용하여 애플리케이션 전체에서 사용자 인증 상태를 관리할 수 있습니다.

4. 보안 고려사항

• HTTPS 사용: 로그인 데이터와 인증 토큰은 암호화된 채널을 통해 전송되어야 합니다. 프로덕션 환경에서는 HTTPS를 사용해야 합니다.
• CSRF 및 CORS 정책: Django에서 CSRF 보호를 활성화하고, CORS 정책을 적절히 설정하여 보안을 강화해야 합니다.

이러한 단계를 통해 Django 백엔드와 React 프론트엔드를 사용하는 애플리케이션에서 로그인 기능을 구현할 수 있습니다.