728x90

장고 로그인 기능 기본적인 예제이다.

 

# models.py
from django.db import models
 
class User(models.Model):
    username = models.CharField(max_length=32, verbose_name='사용자명',null=True,default='')
    useremail = models.EmailField(max_length=128, verbose_name='emailID',default='')
    password = models.CharField(max_length=128,verbose_name='비밀번호')
    registered_dttm = models.DateTimeField(auto_now_add=True, verbose_name='등록시간')
 
    def __str__(self):
        return self.email
 
    class Meta:
        db_table = 'django_user'
        verbose_name = '사용자'
        verbose_name_plural = '사용자'
 
# admin.py
from django.contrib import admin
from .models import User
 
class UserAdmin(admin.ModelAdmin):
    list_display = ('username','useremail','password','registered_dttm')
 
admin.site.register(User,UserAdmin)
 
 
# views.py
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.contrib.auth.hashers import make_password, check_password
from .models import User
 
def home(reqest):
    user_id = reqest.session.get('user')
 
    if user_id:
        user = User.objects.get(pk=user_id)
        return HttpResponse(user.useremail)
 
    return HttpResponse('Home')
 
 
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    elif request.method == 'POST':
        useremail = request.POST.get('useremail'None)
        password = request.POST.get('password'None)
 
        res_data = {}
        if not (useremail and password):
            res_data['error'= '모든 값을 입력해야 합니다.'
        else:
            user = User.objects.get(useremail=useremail)
            if check_password(password,user.password):
                request.session['user'= user.id
                return redirect('/')
            else:
                res_data['error'= '로그인 정보를 확인하세요'
 
        return render(request, 'login.html', res_data)
 
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html')
    elif request.method == 'POST':
        username = request.POST.get('username',None)
        useremail = request.POST.get('useremail',None)
        password = request.POST.get('password',None)
        repasswd = request.POST.get('repasswd',None)
 
        res_data ={}
        if not (username and useremail and password and repasswd):
            res_data['error'= '모든 값을 입력해야 합니다.'
        elif password != repasswd:
            res_data['error'='비밀번호가 다릅니다.'
        else:
            user = User(
                username = username,
                useremail = useremail,
                password = make_password(password)
            )
            user.save()
 
        return render(request,'register.html',res_data)
 
 
def logout(request):
    if request.session.get('user'):
        del(request.session['user'])
 
    return redirect('/')
 
 
 
# urls.py
from django.urls import path
from . import views
 
app_name = 'accounts'
urlpatterns = [
    path('register/', views.register, name='ajax_register'), 
    path('login/', views.login),
    path('logout/',views.logout),
]
 
 

 

 

templates 디렉토리 안에 있는 login.html 파일에서

form 태그 안에 {% csrf_token %} 부분이 백엔드 장고와 통신하는 명령어이다.

jQuery ajax 처리하는 걸 시도했으나 아직 성공하지 못했다.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>로그인</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .login-form {
            width: 340px;
            margin: 50px auto;
            font-size: 15px;
        }
 
        .login-form form {
            margin-bottom: 15px;
            background: #f7f7f7;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
 
        .login-form h2 {
            margin: 0 0 15px;
        }
 
        .form-control, .btn {
            min-height: 38px;
            border-radius: 2px;
        }
 
        .btn {
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login-form">
        <div class="row">
            <div class="col-12">
                {{ error }}
            </div>
        </div>
        <form method="post" action=".">
            {% csrf_token %}
            <h2 class="text-center">로그인</h2>
            <div class="form-group">
                <input type="text" name="useremail" class="form-control" placeholder="user email"
                       required="required">
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="Password"
                       required="required">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">로그인</button>
            </div>
        </form>
        <p class="text-center"><a href="#" id="register">회원 가입</a></p>
    </div>
</div>
</body>
</html>

 

 

templates 디렉토리 안에 있는 register.html 파일이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>회원가입</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            color: #fff;
            background: #63738a;
            font-family: 'Roboto', sans-serif;
        }
 
        .form-control {
            height: 40px;
            box-shadow: none;
            color: #969fa4;
        }
 
        .form-control:focus {
            border-color: #5cb85c;
        }
 
        .form-control, .btn {
            border-radius: 3px;
        }
 
        .signup-form {
            width: 450px;
            margin: 0 auto;
            padding: 30px 0;
            font-size: 15px;
        }
 
        .signup-form h2 {
            color: #636363;
            margin: 0 0 15px;
            position: relative;
            text-align: center;
        }
 
        .signup-form h2:before, .signup-form h2:after {
            content: "";
            height: 2px;
            width: 30%;
            background: #d4d4d4;
            position: absolute;
            top: 50%;
            z-index: 2;
        }
 
        .signup-form h2:before {
            left: 0;
        }
 
        .signup-form h2:after {
            right: 0;
        }
 
        .signup-form .hint-text {
            color: #999;
            margin-bottom: 30px;
            text-align: center;
        }
 
        .signup-form form {
            color: #999;
            border-radius: 3px;
            margin-bottom: 15px;
            background: #f2f3f7;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
 
        .signup-form .form-group {
            margin-bottom: 20px;
        }
 
        .signup-form input[type="checkbox"] {
            margin-top: 3px;
        }
 
        .signup-form .btn {
            font-size: 16px;
            font-weight: bold;
            min-width: 140px;
            outline: none !important;
        }
 
        .signup-form .row div:first-child {
            padding-right: 10px;
        }
 
        .signup-form .row div:last-child {
            padding-left: 10px;
        }
 
        .signup-form a {
            color: #fff;
            text-decoration: underline;
        }
 
        .signup-form a:hover {
            text-decoration: none;
        }
 
        .signup-form form a {
            color: #5cb85c;
            text-decoration: none;
        }
 
        .signup-form form a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="signup-form">
        <div class="row">
            <div class="col-12">
                {{ error }}
            </div>
        </div>
        <form id="form" method="post" action=".">
            {% csrf_token %}
            <h2>회원가입</h2>
            <div class="form-group">
                <div class="row">
                    <div class="col">
                        <input type="text" class="form-control" name="username" placeholder="사용자 이름"
                               required="required"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="useremail" placeholder="Email" required="required"/>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="비밀번호" required="required">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="repasswd" placeholder="비밀번호 확인"
                       required="required">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-success btn-lg btn-block">회원 등록</button>
            </div>
        </form>
        <div class="text-center"><a href="#">로그인</a></div>
    </div>
</div>
<script>
 
</script>
</body>
</html>
 

 

 

 

블로그 이미지

Link2Me

,