▶️ Django 

[▶️Back-end] Auth 기능 구현하기(회원 가입, 로그인, 로그아웃) 1차

처음에 "bootstrap부터 만들어야지!" 했던 게 후회되네요,, 너무 생각 없이 행동한 거 같아요,,
백엔드 로직이 작동이 돼야 의미있는 건데,, 무용지물이 된 셈이었어요. 😭
그래서 다시 처음부터 했답니다,,

큰 목차

  1. 템플릿 기초 설정
  2. 2차 로직 구현
    1. 회원가입
    2. 로그인
    3. 로그아웃

템플릿 기초 설정

⚙️ users/template/base.html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Miravelle</title>
</head>
<body>
    <!-- As a link  Header-->
    <nav class="navbar navbar-light bg-transparent border-bottom">
        <div class="container-fluid">
            <a class="navbar-brand text-dark" href="{% url "users:main" %}"><strong>Miravelle</strong></a>
            <div class="d-flex">
                {% if user.is_authenticated %}
                    <a class="btn btn-dark btn-sm me-2" href="{% url "users:logout" %}">Log Out</a>
                {% else %}
                    <a class="btn btn-dark btn-sm me-2" href="{% url "users:login" %}">Log In</a>
                    <a class="btn btn-dark btn-sm" href="{% url "accounts:register" %}">Register</a>
                {% endif %}
            </div>
        </div>
    </nav>
    {% block content %}
    {% endblock content %}
    <!--Footer-->
    <footer class="py-0 bg-transparent border-top fixed-bottom"> <!--배경은 투명, 선으로만-->
        <div class="container">
            <p class="m-3 text-center text-color: rgb(195, 193, 193)">@ 2025</p>
        </div>
    </footer>
    <!-- Bootstrap JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
  • Header : nav
  • Body
    • 로그인, 회원가입
    • 만약 로그인이 된 상태라면, 로그아웃 버튼만 생기도록 설정
  • Footer : footer

🔝

⚙️ users/template/register-base.html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Miravelle</title>
</head>
<body>
    <!-- As a link  Header-->
    <nav class="navbar navbar-light bg-transparent border-bottom">
        <div class="container-fluid">
            <a class="navbar-brand text-dark" href="{% url "users:main" %}"><strong>Miravelle</strong></a>
        </div>
    </nav>
    {% block content %}
    {% endblock content %}
    <!--Footer-->
    <footer class="py-0 bg-transparent border-top fixed-bottom"> <!--배경은 투명, 선으로만-->
        <div class="container">
            <p class="m-3 text-center text-color: rgb(195, 193, 193)">@ 2025</p>
        </div>
    </footer>
    <!-- Bootstrap JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

 

header가 없는 회원가입용 base.html

🔝

2차 로직 구현

⚙️ 회원가입

🤖 accounts/models.py

더보기 
# accounts/models.py
from django.db import models
from django.contrib.auth.models import AbstractUser


class User(AbstractUser):
    username = models.CharField(max_length=50, unique=True) # ID
    surname = models.CharField(max_length=50) # Name
    email = models.EmailField(unique=True) # 중복 불가
    message = models.TextField()

🔝

🤖 accounts/forms.py

더보기 
# accounts/forms.py
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import get_user_model
from django import forms

class CustomUserCreationForm(UserCreationForm):
    username = forms.CharField(max_length=50, label="ID")
    surname = forms.CharField(max_length=50, label="Name")
    password1 = forms.CharField(widget=forms.PasswordInput, label="Password")
    password2 = forms.CharField(widget=forms.PasswordInput, label="Password Confirmation")
    email = forms.EmailField(label="Email")
    message = forms.CharField(widget=forms.Textarea, label="Message", required=False)

    class Meta(UserCreationForm.Meta):
        model = get_user_model()
        fields = ("username", "surname", "password1", "password2", "email", "message")

🔝

🤖 accounts/views.py

더보기 
# accounts/views.py
from django.shortcuts import render, redirect
from .forms import CustomUserCreationForm
from django.urls import reverse


# 회원가입
def Register(request):
    if request.method == "POST":
        form = CustomUserCreationForm(request.POST)   # 바인딩 form
        if form.is_valid():
            user = form.save()
            # 로그인 페이지 URL을 가져옴
            login_url = reverse("users:login")
            return redirect(login_url)
    else:
        form = CustomUserCreationForm()
    context = {'form': form}
    return render(request, "accounts/register.html", context)

🔝

🤖 accounts/template/accounts/resigter.html

더보기 
# accounts/template/accounts/resigter.html
{% extends "register-base.html" %}

{% block content %}

<form action="{% url "accounts:register" %}" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Register</button>
</form>

{% endblock content %}
  • header에 Miravelle만 있는 nav바 register-base.html로 설정

🔝

⚙️ 로그인

🤖 users/forms.py

더보기 
# users/forms.py
from django import forms
from django.contrib.auth.forms import AuthenticationForm

class CustomAuthenticationForm(AuthenticationForm):
    username = forms.CharField(
        label="ID",  # Username -> ID로 변경
        widget=forms.TextInput(attrs={'autofocus': True})
    )

🔝

🤖 users/views.py

더보기 
# users/views.py
from django.shortcuts import render, redirect
from django.contrib.auth import login as auth_login
from .forms import CustomAuthenticationForm

# 메인 화면
def main(request):
    return render(request, "main.html")

# 로그인
def login(request):
    if request.method == "POST":
        form = CustomAuthenticationForm(data=request.POST) # CustomAuthenticationForm 사용
        if form.is_valid():
            # Log the user in
            auth_login(request, form.get_user())   # 로그인 하기
            return redirect("users:main")
    
    else:    
        form = CustomAuthenticationForm()  # CustomAuthenticationForm 사용
    context = {"form": form}
    return render(request, "login.html", context)

🔝

🤖 users/template/login.html

더보기 
# users/template/login.html
{% extends "base.html" %}

{% block content %}
<h1>Log in</h1>

<form action="" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="login">

</form>
{% endblock content %}

🔝

⚙️ 로그아웃

🤖 users/views.py

더보기 
# users/views.py
from django.shortcuts import redirect
from django.contrib.auth import logout as auth_logout
from django.contrib.auth.decorators import login_required

# 로그아웃
@login_required
def logout(request):
    auth_logout(request)    # 로그아웃 하기
    return redirect("users:main")

🔝

🤖 template/main.html

로그인되지 않은 메인 화면
로그인된 메인 화면

# users/template/main.html
{% extends "base.html"%}

{% block content %}
    <h1>Miravelle Main Page</h1>
{% endblock content %}

🔝

마무리

그래도, 이렇게 고생을 해봐서 다행이에요.

대체 왜 프런트 작업부터 할 생각을 했을까요 🤔,,

 

몸으로 직접 배워서 다행이에요. 🙄

 

이제 프런트 작업을 bootstrap으로 하면 끝입니다!

다 끝내고 나면, 와이어 프레임에도 화면을 추가해줘야 해요.

굿굿!

 

'👥 최종 팀 프로젝트(250227~250331) > 구현 과정 ▶️' 카테고리의 다른 글

[▶️Back-end] 메인 페이지에 좋아요, 싫어요 버튼 기능 구현 3차 完  (0) 2025.03.06
[▶️Back-end] 메인 페이지에 좋아요, 싫어요 버튼 기능 구현 2차  (0) 2025.03.06
[▶️Back-end] 메인 페이지에 좋아요, 싫어요 버튼 기능 구현 1차  (1) 2025.03.04
[▶️Front-end] Bootstrap으로 화면 구성(회원 가입, 로그인, 로그아웃)  (0) 2025.03.03
[▶️Back-end] Auth 기능 구현하기(회원 가입, 로그인, 로그아웃) 1차  (0) 2025.03.02

+ Recent posts

티스토리툴바