[ Python ] Django auth 모듈을 사용해서 로그인, 로그아웃, 회원가입 구현

현재 만들고 있는 django 게시판 페이지의 게시글 소유자 확인을 위한 로그인, 로그아웃, 회원가입 구현

---

1. 현재 프로젝트의 공통요소들을 포함하기 위한 common 앱 생성 후 앱 등록

1.1 하기의 명령어를 통하여 common 앱 성성

django-admin startapp common

common 앱 생성

---

1.2 config 프로젝트 settings.py 및 urls.py 에 common 앱 등록 및 로그인 후 redirect url 지정

setting.py

INSTALLED_APPS = [
    'common.apps.CommonConfig', # 추가 
    ... 이하 생략 ...
]

LOGIN_REDIRECT_URL = "/" # 추가

---

urls.py

from django.urls import path, include
from pybo import views # 추가

urlpatterns = [
	path('common/', include('common.urls'))
    path('', views.index, name='index')
    ... 이하 생략 ...
]

---

2 foms.py 및 UserForm 생성

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class UserForm(UserCreationForm):
    email = forms.EmailField(label='Email')
    class Meta:
        model = User
        fields = ("username", "password1","password2", "email" )

■ UserCreationForm은 (username, password1, password2 ) 구성 되어있고, 이를 상속받는 Form 을 만든다.
■ UserCreationForm을 그대로 사용해도 되지만 이메일 필드를 추가하기 위하여 커스텀 하였다.

---

3. common 앱에 로그인, 로그아웃, 회원가입 기능 구현

3.1 urls.py 작성

from django.urls import path
from django.contrib.auth import views as auth_views
from . import  views

app_name = 'common'

urlpatterns = [
    path('login/', auth_views.LoginView.as_view(template_name="common/login.html"), name='login'),
    path('logout/', views.logout_view, name='logout'),
    path('signup', views.signup, name='signup'),
]

■ login 기능은 contrib 에 사전정의 되어있는 views 를 사용하여 연결해줬으며 템플릿을 지정해주지 않는다면 registration 에 있는 기본 템플릿을 참조하기 때문에 오류가 나서 템플릿을 따로 지정해줬다.

■ logout와 signup 은 common에 views.py 에 따로 정의해줄 예정이다. 

■ app_name 과 path 에 name을 지정해줌으로서 접근할 때 에 별칭으로 접근 할 수 있도록 만들었다.

---

3.3 views.py 작성

■ contrib.auth 모듈에서 logout, authenticate, login 세가지 라이브러리를 임포트 해준다
- logout : 앱에서 로그아웃을 담당해준다.
- authenticate : 앱에서 인증,인가를 담당한다.
- login : 앱에서 로그인을 담당한다, 회원가입 후 즉시 로그인이 되도록 만들 것 이다.

from django.contrib.auth import logout,authenticate,login
from django.shortcuts import redirect,render
from common.forms import UserForm

def logout_view(request):
    logout(request)
    return redirect('index')

위 메서드는 로그아웃 메서드이며 django 에서 제공해주는 기능을 사용해 간단하게 작성할 수 있다.

---

def signup(request):
    if request.method == "POST":
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request,user)
            return redirect('index')
    else:
        form = UserForm()
    return render(request, 'common/signup.html', {'form': form})

 

# GET 요청

■ 요청이 GET 으로 들어온다면 UserForm 객체를 생성하고 랜더링해준다.

 

# POST 요청

■ 데이터를 담은 request를 UserForm에 넣어준다.
■ 데이터 검증을 마치면 저장을 하고 cleaned_data.get 을 통하여 값을 각 변수에 담아준다.
■ authenticate 기능을 사용하여 방금 가입한 값에 대하여 인증을 한다.
■ 로그인을 수행하고 기본 url로 리다이렉트를 해준다.

---

4.  로그인, 회원가입, 에러 템플릿 제작

login.html

{% extends 'base.html' %}
{% block content %}
    <div class="container">
        <form method="post" action="{% url 'common:login' %}">
            {% csrf_token %}
            {%  include 'form_errors.html' %}
            <div class="mb-3">
                <label for="username">사용자ID</label>
                <input type="text" class="form-control"
                       name="username" id="username"
                       value="{{ form.username.value|default_if_none:'' }}"
                />
            </div>
            <div class="mb-3">
                <label for="password">비밀번호</label>
                <input type="password" class="form-control"
                       name="password" id="password"
                       value="{{ form.password.value|default_if_none:'' }}"
                />
            </div>
            <button type="submit" class="btn-primary">로그인</button>
        </form>
    </div>
{% endblock %}

---

signup.html

{% extends 'base.html' %}
{% block content %}
    <div class="container my-3">
        <form method="post" action="{% url 'common:signup' %}">
            {% csrf_token %}
            {% include 'form_errors.html' %}
            <div class="mb-3">
                <label for="username">사용자 이름</label>
                <input type="text" class="form-control"
                       name="username" id="username"
                       value="{{ form.username.value|default_if_none:'' }}"
                />
            </div>
            <div class="mb-3">
                <label for="password1">비밀번호</label>
                <input type="password" class="form-control"
                       name="password1" id="password1"
                       value="{{ form.password1.value|default_if_none:'' }}"
                >
            </div>
            <div class="mb-3">
                <label for="password2">비밀번호 확인</label>
                <input type="password" class="form-control"
                       name="password2" id="password2"
                       value="{{ form.password2.value|default_if_none:'' }}"
                />
            </div>
            <div class="mb-3">
                <label for="email">이메일</label>
                <input type="email" class="form-control"
                       name="email" id="email"
                       value="{{ form.email.value|default_if_none:'' }}"
                />
            </div>
            <button type="submit" class="btn btn-primary">
                계정 생성
            </button>
        </form>
    </div>

{% endblock %}

---

forms_errror.html

{% if form.errors %}
    <div class="alert alert-danger">
        {% for field in form %}
        {#  field error  #}
            {% if field.errors %}
                <div>
                    <strong>{{ field.label }}</strong>
                    {{ field.errors }}
                </div>
            {% endif %}
        {% endfor %}

        {# None field error #}
        {% for error in form.non.field.errors %}
        <div>
            <strong>{{ error }}</strong>a
        </div>
        {% endfor %}
    </div>
{% endif %}

---

5.  테스트

■ 상단바 로그인, 회원가입

로그인 회원가입 텍스트

---

■ 회원가입 화면

 

■ 회원가입 후 리다이렉트 및 자동 로그인