[Django] 로그인, 회원가입 기능 구현

로그인 기능 구현

• 터미널 입력
• django-admin startapp common
• settings.py에서 INSTALLED_APPS에 'common.apps.CommonConfig' 등록
• config/urls.py에서 common.urls 추가

urlpatterns = [
    path('admin/', admin.site.urls),
    path('pybo/', include('pybo.urls')),
    path('common/', include('common.urls'))

]

• common 디렉터리에서 urls.py 생성하고

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

app_name = 'common'

urlpatterns = [
    # Django에서 지원하는 views 라이브러리를 활용 (로그인, 로그아웃, 비밀번호 찾기 & 초기화 등)
    path('login/', auth_views.LoginView.as_view(template_name = "common/login.html"), name = "login")
]

• template 경로에 common/login.html 만들기

{% extends "base.html" %}
{% block content %}
<div class="container my-3">
    <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 btn-primary">로그인</button>
    </form>
</div>
{% endblock %}

• layout.html 들어가서 기존의 #이였던 것을, href 뒤 쪽에 로그인 경로 주소 설정

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link" href="{% url "common:login" %}">로그인</a>
        </li>

로그인 화면

• config/settings.py 에서 해당 내용 추가

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

# Login 성공시 URL 경로
LOGIN_REDIRECT_URL = "/"

# Logout 성공시 URL 경로
LOGOUT_REDIRECT_URL = "/"

• config/urls.py에서

# 루트 경로 설정
path('',views.index, name = "index")

• 이렇게 하면 로그인 시 index 페이지로 갑니다.
• 로그인 했을 때, 로그아웃 할 수 있는 버튼, 로그아웃 했을 때 로그인 하는 버튼을 만들기 위해서
• layout.html에서 수정합니다.

<li class="nav-item">
                    {% if user.is_authenticated %}
                    <a class="nav-link" href="{% url "common:login" %}">{{ user.username }} (로그아웃)</a>
                    {% else%}
                    <a class="nav-link" href="{% url "common:login" %}">로그인</a>
                    {% endif %}

• common/urls.py에서 로그아웃했을 때의 urls를 설정해줍니다.

urlpatterns = [
    # Django에서 지원하는 views 라이브러리를 활용 (로그인, 로그아웃, 비밀번호 찾기 & 초기화 등)
    path('login/', auth_views.LoginView.as_view(template_name = "common/login.html"), name = "login"),
    # 로그아웃
    path('logout/', auth_views.LogoutView.as_view(), name="logout")
]

(참고)스프링과 비교

• 회원가입 및 로그인
• <spring>
  • Sign_up 테이블 ..?? <- Spring Security FrameWork
• <Django>
  • Sign_up 테이블 ..?? <- 만들지 않았음.
  • 단순히, 장고에서 지원하는 기본적인 인증 및 권한 테이블을 이용한 것
  • • django.contrib.auth import views 라이브러리를 활용해서 지원되는 로그인 및 로그아웃 뷰 활용
  • auth_user 테이블에 계정 정보가 저장 되어 있음

---

회원가입 기능 구현

• layout.html에서 "navbar-nav me-auto mb-2 mb-lg-0" 클래스 아래에 li를 추가해줍니다

<li>
    {% if not user.is_authenticated %}
    <a class="nav-link" href="{% url "common:signup" %}">회원가입</a>
    {% endif %}
</li>

완료된 페이지 nav bar

• common/urls.py에서 path를 추가합니다.

from . import views
path('signup/', views.signup, name = "signup")

• common/views.py 파일에 해당 코드를 추가합니다.

def signup(request):
    return "gg"

• common/forms.py 파일을 생성합니다.

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


class UserForm(UserCreationForm):
    # username , password 1 , password 2를 기본적으로 입력 받는다.
    # 추가적으로 email을 받을 것인데, 기본값은 아니기에 수동으로 잡아줘야함.
    email = forms.EmailField(label="이메일")

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

• common/views.py, signup 함수를 만듭니다.

from django.shortcuts import render, redirect

from common.forms import UserForm
from django.contrib.auth import authenticate, login

# Create your views here.

def signup(request):
    if request.method == "POST":
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get("username")
            row_password = form.cleaned_data.get("password1")
            # 사용자 인증 담당 : 아이디와 비밀번호가 DB랑 같은지 비교
            user = authenticate(username=username , password=row_password)
            # 로그인 담당 : 사용자에게 입력받은 request와 인증기록인 user를 통해 로그인 허용 또는 거부
            login(request, user)
            return redirect("index")
    else: # Get 요청일 떄
        form = UserForm()
    return render(request, "common/signup.html", {"form": form})

• singup html 파일을 templates/common 폴더 내에 만듭니다.

{% 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 %}