반원 블로그

django 회원 가입 - DataBase에 저장, 패스워드 부호화, 미입력 처리 본문

2018~/Django 개인 공부 정리

django 회원 가입 - DataBase에 저장, 패스워드 부호화, 미입력 처리

반원_SemiCircle 2019. 9. 4. 12:47

1. 페이지에 있는 name 속성명으로 백엔드쪽에서 key: value형태로 데이터가 전달된다.

앱 폴더의 views.py에 작성중이다.

from django.shortcuts import render

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']
        
        return render(request, 'register.html')

 

2. models.py에 있는 클래스를 이용하려한다.

왜냐하면 DATABASE자체가 models.py에 정의된 클래스를 이용해 만들어졌기 때문에..

from django.shortcuts import render
from .models import Fuser

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

        #위 정보들로 인스턴스 생성
        fuser = Fuser(
            username= username,
            password= password,
        )
        
        #저장
        fuser.save()

        return render(request, 'register.html')

 

3. 실제로 회원가입 페이지에서 값을 입력해보자. 그러면 admin 페이지에 사용자가 추가되있다.

 

4.비밀번호와 비밀번호 확인값이 다르면 가입되지 않게 만들자.

HttpResponse를 참조하고 리턴해주도록 코드 작성

from django.shortcuts import render
from .models import Fuser
from django.http import HttpResponse

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

        #다르면 리턴
        if password != re_password:
            return HttpResponse("비밀번호가 다름")


        #위 정보들로 인스턴스 생성
        fuser = Fuser(
            username= username,
            password= password,
        )
        
        #저장
        fuser.save()

        return render(request, 'register.html')

5. 비밀번호 틀림을 좀 더 체계적으로 만들기(1)

이렇게 단순 문자열로 출력하게 보여지는 게 아닌, 백엔드에서 데이터를 프론트단에 전달해서 메시지를 출력하게 해보자.

전달할 데이터를 dict형으로 만들고 render할 때, 세번째 입력인자로 넣어주자.

이렇게 하면 세번째 입력인자로 넣어준 데이터의 key와 value가 웹페이지에서 사용할 수 있도록 맵핑된다.

from django.shortcuts import render
from .models import Fuser
from django.http import HttpResponse

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']


        res_data ={} #프론트에 던져줄 응답 데이터
        #비밀번호가 다르면 리턴
        if password != re_password:
            # return HttpResponse("비밀번호가 다름")
            res_data['error']="비밀번호가 다름"
        #같으면 저장
        else : 
            #위 정보들로 인스턴스 생성
            fuser = Fuser(
                username= username,
                password= password,
            )
            
            #저장
            fuser.save()

        return render(request, 'register.html',res_data)

5. 비밀번호 틀림을 좀 더 체계적으로 만들기(2)

웹 페이지에 res_data['error']가 있으면 보여지도록 템플릿 엔진 문법을 이용하여 작성해보자.

{{error}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-12">
                {{error}}
            </div>
        </div>
        
        <div class="row mt-5">
            <div class="col-12">
                <form method="POST" action=".">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">사용자 이름 입력</label>
                        <input type="text" class="form-control" id="username" name="username"  placeholder="사용자이름">
                    </div>
                    <div class="form-group">
                        <label for="password">비밀번호 입력</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="비밀번호">
                    </div>
                    <div class="form-group">
                        <label for="re-password">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" name="re-password" placeholder="비밀번호 확인">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>

    </div>
</body>
</html>

6. 패스워드를 부호화(암호화)해야한다.

from django.contrib.auth.hashers import make_password 를 참조하고 이를 사용하자
(일치 확인할 때는 check_password를 참조)

그리고 Fuser 인스턴스 생성시 make_password(password)로 넣어주면 된다.

from django.shortcuts import render
from .models import Fuser
from django.http import HttpResponse
from django.contrib.auth.hashers import make_password

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']


        res_data ={} #프론트에 던져줄 응답 데이터
        #비밀번호가 다르면 리턴
        if password != re_password:
            # return HttpResponse("비밀번호가 다름")
            res_data['error']="비밀번호가 다름"
        #같으면 저장
        else : 
            #위 정보들로 인스턴스 생성
            fuser = Fuser(
                username= username,
                password= make_password(password),
            )
            
            #저장
            fuser.save()

        return render(request, 'register.html',res_data)

비밀번호를 pw_person03으로 저장한 상황

7. 예외처리

현재 아이디랑 비밀번호를 입력안해도 submit 버튼이 누르며

그렇게 되면 request.POST['username'] 등의 코드에서 key가 없다며 에러가 발생한다.

따라서 에러가 발생안하는 get메소드를 이용해보자.

from django.shortcuts import render
from .models import Fuser
from django.http import HttpResponse
from django.contrib.auth.hashers import make_password

# Create your views here.

def register(request):
    if request.method == "GET":
        return render(request, 'register.html')
    elif request.method == "POST":
        #여기에 회원가입 처리 코드
        # username = request.POST['username']
        # password = request.POST['password']
        # re_password = request.POST['re-password']
      
        username = request.POST.get('username',None)
        password = request.POST.get('password',None)
        re_password = request.POST.get('re-password',None)


        res_data ={} #프론트에 던져줄 응답 데이터

        #모든 값을 입력해야됨
        if not( username and password and re_password): #None은 False로 인식
            res_data['error']="모든 값을 입력해야합니다."
        #비밀번호가 다르면 리턴
        elif password != re_password:
            # return HttpResponse("비밀번호가 다름")
            res_data['error']="비밀번호가 다름"
        #같으면 저장
        else : 
            #위 정보들로 인스턴스 생성
            fuser = Fuser(
                username= username,
                password= make_password(password),
            )
            
            #저장
            fuser.save()

        return render(request, 'register.html',res_data)

Comments