[Django] 회원가입과 로그인

회원가입과 로그인 창을 만들어줄 차례입니다.

먼저 python manage.py startapp accounts  로  accounts APP을 만들어 줍니다.

 

그리고 config의 settings.py에서 INSTALLED_APPS에서 'accounts'를 추가시킵니다.

그리고 config의 urls.py에 account url을 지정합니다.

from django.contrib import admin
from django.urls import path
from django.conf.urls import include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('accounts.urls')),
    ]

 

먼저 models.py 입니다.

AbstractUser라는 기본 폼을 이용하여 회원가입 모델을 만들었습니다.

from django.urls import reverse_lazy
from django.views.generic import CreateView

from django.contrib.auth.views import LoginView

from django.contrib.auth.forms import AuthenticationForm #로그인 Form

from .forms import CustomUserCreationForm, UserLoginForm
# accounts/views.py

# 가입 View
class UserCreateView(CreateView):
    template_name = 'accounts/join_form.html' #가입 폼
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('home') #가입처리후 이동할 url-redirect

# 로그인 View
class CustomLoginView(LoginView):
    template_name = "accounts/login_form.html" #로그인 폼 화면
    # form_class = AuthenticationForm
    form_class = UserLoginForm

 

 

다음은 views.py입니다.

 회원가입을 위한 view와 로그인을 위한 view를 만들었습니다.

from django.urls import reverse_lazy
from django.views.generic import CreateView

from django.contrib.auth.views import LoginView

from django.contrib.auth.forms import AuthenticationForm #로그인 Form

from .forms import CustomUserCreationForm, UserLoginForm
# accounts/views.py

# 가입 View
class UserCreateView(CreateView):
    template_name = 'accounts/join_form.html' #가입 폼
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('home') #가입처리후 이동할 url-redirect

# 로그인 View
class CustomLoginView(LoginView):
    template_name = "accounts/login_form.html" #로그인 폼 화면
    # form_class = AuthenticationForm
    form_class = UserLoginForm

 

다음은 urls.py 입니다.

가입, 로그인, 로그아웃을 위한 url을 연결하였습니다.

from django.urls import path

from . import views

from django.contrib.auth.views import LogoutView
# accounts/urls.py
app_name = 'accounts'



urlpatterns = [
    path('join', views.UserCreateView.as_view(), name='join'),
    path('login', views.CustomLoginView.as_view(), name='login'),
    path('logout', LogoutView.as_view(), name='logout'),
]

 

 다음은 admin.py입니다. 다른 파트의 admin과 달리 UserAdmin이라는 것을 상속받아서 구현합니다.

from django.contrib import admin

# accounts/admin.py
from django.contrib.auth.admin import UserAdmin
from .models import CustomUser

# UserAdmin을 상속받아서 ModelAdmin 구현.
class CustomUserAdmin(UserAdmin):
    # 관리자 앱에서 사용자정보 *수정*시  name, email, gender가 나오도록 처리
    UserAdmin.fieldsets[1][1]['fields']=('name', 'email', 'gender')
    # 관리자 앱에서 사용자를 *등록* 할때 name, email, gender 가 추가되도록 처리
    # (기본: username, password1, password2)
    UserAdmin.add_fieldsets += (
        ('추가 정보', {'fields':('name', 'email', 'gender')}),
    )
    # 목록에 나올 field들 
    list_display = ['username', 'name', 'email', 'gender']
    # 수정으로 이동할 링크를 추가할 field들
    list_display_links = ['username', 'name']

admin.site.register(CustomUser, CustomUserAdmin)

 

이제 template를 만들어야 할 차례입니다.

accounts 앱 안에 templates/accounts를 만들고 여기에 join_form.html과 login_form.html을 만들어 줍니다.

그리고 해당 html을 만들때 미리 만들어둔 외부의 base.html을 가져다 씁니다.

먼저 join_form.html 입니다.

<!--
    accounts/templates/accounts/join_form.html
-->
{% extends 'base.html' %}

{% block title %}가입{% endblock title %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
    <h1 class='text-center'>한증막.GG 회원가입</h1>
    <br>   
    <br>
    <br>   
<form method='post'>
    {% csrf_token %}
    {{form.as_p}}
    <br>   
    <br>   
    <br>   
    <button type='submit' class="btn btn-warning btn-lg btn-block">가입하기</button>
    <br>
    <button type='reset' class="btn btn-secondary btn-lg btn-block">입력 초기화</button>
    <br>
</form>
</div>
</div>
</div>

{% endblock content %}

 

다음은 login_form입니다.

<!--login_form.html-->
{% extends 'base.html' %}

{% block title %}로그인{% endblock title %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
    <h1 class='text-center'>한증막.GG에 어서오세요!</h1>
<br>
<br>
<br>
    <form method='post'>
        {% csrf_token %}
        {{form.as_p}}
        <br>
        <br>   
        <br>   
        <button type='submit' class="btn btn-warning btn-lg btn-block">로그인</button>
        <br>
        <a class="btn btn-secondary btn-lg btn-block" href="/accounts/join">회원가입</a>
    </form>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
{% endblock content %}

 

이제 회원가입창과 로그인창이 완성되었습니다.

회원가입 창

 

로그인 창