[Python] django 장고 회원가입 페이지 만들기

게시판의 회원가입 기능을 구현하는 방법입니다.

장고에서는 django.contrib.auth 앱을 사용하여 쉽게 구현할 수 있습니다.

순서는 다음과 같습니다.

1. 네비게이션 템플릿 파일에 회원가입 링크 생성
2. 계정 생성에 필요한 UserForm 작성
3. 화면 구성 템플릿 작성
4. 회원가입 링크 urls 매핑
5. views 에 함수 구현
6. 회원가입 테스트

 

1. 회원가입 링크 생성

navbar.html 템플릿 파일에 회원가입을 위한 링크를 다음처럼 작성합니다.

    <!-- 로그인 페이지 링크 끝 -->
</li>
<!-- 회원가입 링크 추가 시작 -->
<li>
    {% if not user.is_authenticated %}
    <a class="nav-link" href="{% url 'common:signup' %}">회원가입</a>
    {% endif %}
</li>
<!-- 회원가입 링크 추가 끝 -->

전체 코드

<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <!-- 로그인 페이지 링크 시작 -->
                    {% if user.is_authenticated %}
                    <a class="nav-link" href="{% url 'common:logout' %}">{{ user.username }} (로그아웃)</a>
                    {% else %}
                    <a class="nav-link" href="{% url 'common:login' %}">로그인</a>
                    {% endif %}
                    <!-- 로그인 페이지 링크 끝 -->
                </li>
                <!-- 회원가입 링크 추가 시작 -->
                <li>
                    {% if not user.is_authenticated %}
                    <a class="nav-link" href="{% url 'common:signup' %}">회원가입</a>
                    {% endif %}
                </li>
                <!-- 회원가입 링크 추가 끝 -->
            </ul>
        </div>
    </div>
</nav>

 

2. 계정 생성에 필요한 UserForm 작성

UserForm은 django.contrib.auth.forms 모듈의 UserCreationForm 클래스를 상속하여 작성합니다. UserForm을 따로 만들지 않고 UserCreationForm을 그래도 사용해도 되지만 이처럼 만드는 이뉴는 이메일 등의 속성을 추가하기 위함입니다.

UserCreationForm은 다음과 같은 속성을 지니고 있습니다.

속성명	설명
username	사용자 이름
password1	비밀번호
password2	비밀번호 확인

경로 mysite\common\ 에 forms.py 파일을 신규로 생성하고 다음과 같이 작성합니다.

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="이메일")

    class Meta:
        model = User
        fields = ("username", "password1", "password2", "email")

 

3. 화면 구성 템플릿 작성

회원가입 페이지로 사용할 페이지를 작성합니다.

mysite\templates\common 경로 하위에 signup.html 파일을 생성합니다.

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="text" 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 %}

 

4. 회원가입 링크 urls 매핑

네이버게이션 템플릿인 navbar.html 에 언급된 {% url 'common:signup' %} 태그를 추가했으므로 여기에 대응하는 URL 매핑 규칙을 추가해야 합니다.

mysite\common\urls.py 파일에 다음과 같이 회원가입을 위한 URL 매핑 규칙을 추가합니다.

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/', auth_views.LogoutView.as_view(), name='logout'),
    path('signup/', views.signup, name='signup'),  --> 추가
]

회원가입을 클릭하면  views.signup 함수가 실행될 것입니다.

 

5. views 에 함수 구현

common\views.py 파일에 회원가입을 위한 signup 함수를 작성합니다.

경로 mysite\common\views.py 

from django.shortcuts import render
# Create your views here.
from django.contrib.auth import authenticate, login
from django.shortcuts import redirect
from common.forms import UserForm


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})

django.contrib.auth.authenticate 는 사용자 인증을 담당합니다. 사용자 명과 비밀번호가 정확한지 검증합니다.

django.contrib.auth.login 는 로그인을 담당합니다. 즉 사용자 세션을 생성합니다.

singup 함수는 POST 요청인 경우에는 화면에서 입력한 데이터로 사용자를 생성하고 GET 요청인 경우에는 회원가입 화면을 보여줍니다. form.cleaned_data.get('password1') 함수를 사용하여 사용자명과 비밀번호를 입력 받습니다. .

6. 회원가입 테스트

회원가입 링크를 클릭하여 회원가입 페이지로 이동합니다.

비밀번호와 비밀번호 확인에 일부로 다르게 입력하여 오류를 확인합니다.

이메일란을 비우고 생성해봅니다.

정상적으로 계정 생성 후 로그인 확인

http://localhost:8000/admin 페이지에 접속하여 관리자로 로그인하면 계정을 확인할 수 있습니다.

 

이 글은 점프투장고 위키독스를 참고하여 공부한 내용을 정리한 글입니다.:)