본문 바로가기
개인 공부/개발

sfoj 개발 - 회원가입 구현

by 아메리카노와떡볶이 2021. 8. 25.
728x90
sfoj 개발 - 회원가입 구현

기능적인 부분을 구현할 때 마다 포스트를 작성해두어야 기록하기 좋을것 같아서 시리즈 느낌으로 작성해보아야겠다.

login

현재 개발중인 sfoj의 로그인 화면이다. 현재는 임의로 생성한 superuser만 로그인이 가능한 상태. 

아직 회원가입은 구현되어있지 않다.

위의 로그인 폼은 아래와 같은 방식으로 구현했다.

 

회원가입은 로그인 하단에 회원가입 버튼을 통해 연결했다.

 

이제 url 매핑을 시켜줄 차례이다.

urls.py


from django.urls import path
from . import views

app_name = 'sfoj_system'

urlpatterns = [
    path('', views.index, name='index'), #config의 'sfoj_system/'이 추가된 후 이곳의 url이 추가됨
    path('list/',views.list, name = 'list'),
    path('list/<int:board_index>/', views.detail, name = 'detail'),
    path('uploads/',views.uploads, name='uploads'),
    path('signup/',views.signup, name='signup'),
]
signup에 대한 url 매핑을 추가해주었다.

 

다음은 url 매핑에서 호출한 signup 메소드를 작성해야한다.

하지만 이전에 계정생성에 사용할 UserForm을 먼저 작성하자.

forms.py 

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


class BoardForm(forms.ModelForm):
    class Meta:
        model = Board  # 사용할 모델
        fields = ['Title','Content']  # BoardForm에서 사용할 Board 모델의 속성

        labels = {
            'Title' : '제목',
            'Content' : '내용',
        }

class UserForm(UserCreationForm):
    email = forms.EmailField(label="이메일")

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

UserForm은 위처럼 django.contrib.auth.forms 모듈에서 제공해주는 UserCreationForm 클래스를 상속해서 간단하게 만들 수 있다. 

이메일 속성을 추가한거처럼, user에 대해 추가하고 싶은 부가속성이 있을때 위와 같은 방식으로 추가하면 된다.

 

모듈에서 상속받은 UserCreationForm에는 username, password1, password2 의 3가지 속성이 기본으로 존재하고,

이메일 속성을 추가했기때문에 필드에는 4가지 정보를 넣어주었다.

 

이제 아까 못만든 signup  메소드를 정의할차례. views.py에 signup 메소드를 생성하자.

from django.contrib.auth import authenticate, login
from django.shortcuts import render, 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})

신규 사용자를 생성한 후에 자동 로그인 될 수 있도록 authenticate와 login함수가 사용되었다. authenticate와 login함수는 django.contrib.auth 모듈의 함수로 사용자 인증과 로그인을 담당한다.

authenticate 함수는 사용자명과 비밀번호가 정확한지 검증하는 함수이다.

signup.html

{% extends "base.html" %}
{% block content %}
<!-- 상단 꾸미기 -->
<!Doctype html>
<div class="blue_sec">
    <div class="container">
        <div style="font-size:4rem;">
            <div class="top_info_lead">Sign up</div>
        </div>
    <div>
        <div>
            <span class="top_info_sub">이미 회원이신가요? <a class="signup_lgn" style="font-weight:bold" href="{% url 'common:login' %}">로그인</a></span>
        </div>
    </div>
    </div>
</div>

<!-- 회원가입 박스 -->
<div class="white_sec">
<div class="container">
    <div class="signup_box">
    <form method="post" action="{% url 'common:login' %}">
        {% csrf_token %}
        {% include "form_errors.html" %}
        <div class="textbox">

            <label for="username">아이디</label>
            <input type="text" name="username" id="username"
                   value="{{ form.username.value|default_if_none:'' }}">

            <label for="password1">비밀번호</label>
            <input type="password" name="password1" id="password1"
                   value="{{ form.password.value|default_if_none:'' }}">

            <label for="password1">비밀번호 확인</label>
            <input type="password" name="password2" id="password2"
                   value="{{ form.password.value|default_if_none:'' }}">

            <label for="email">이메일</label>
            <input type="text" name="email" id="email"
                   value="{{ form.email.value|default_if_none:'' }}">

        </div>

        <button type="submit" class="signup_btn">가입하기</button>
    </form>
        <br>
        <div class="sign_and_find">
        <a href="{% url 'common:login' %}">로그인</a>
            <span>|</span>
        <a href="#find_id">아이디찾기</a>
            <span>|</span>
        <a href="#find_pw">비밀번호찾기</a>
        </div>
    </div>
</div>
</div>
{% endblock %}

 

작성한 페이지 모습

 

728x90

댓글