비밀 번호 변경

비밀번호 변경은 크게 3가지 인증 절차를 수행됩니다.
- step 1. 새로운 비밀번호가 확인칸에 입력된 비밀번호와 같은지 검토
- step 2. 화면에서 입력한 비밀번호가 기존의 비밀번호와 다른지 확인
- step 3. 새롭게 입력한 비밀번호가 기존 비밀번호와 같은지 확인

새로운 비밀 번호 및 새로운 비밀 번호 확인 이 매칭 되는지 확인하기

1. 비밀 번호 변경 HTML page 작성

아래 html 에서는 새로운 비밀번호, 새로운 비밀번호 확인, 이전 비밀번호 을 입력하는 form 정보를 rendering 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
change password
<form class="mt-4" action="{% url 'accounts:change_password' %}" method="post" id="change_password_form">
    <div class="row">
        {# new password #}
        <div class="col-lg-12">
            <div class="mb-3">
                <label class="form-label">새로운 비밀번호 :</label>
                <input type="password" class="form-control" placeholder="새로운 비밀번호를 입력하세요"
                       required="" id="new_password" name="new_password">
            </div>
        </div>

        {# confirm new password #}
        <div class="col-lg-12">
            <div class="mb-3">
                <label class="form-label">새로운 비밀번호 확인:</label>
                <input type="password" class="form-control" placeholder="새로운 비밀번호를 다시 입력하세요."
                       required="" id="confirm_new_password" name="confirm_new_password">
                <span id='message'></span>
            </div>
        </div>

        {# old password #}
        <div class="col-lg-12">
            <div class="mb-3">
                <label class="form-label">이전 비밀번호:</label>
                <input type="password" class="form-control" placeholder="이전 비밀번호를 입력하세요." required=""
                       name="old_password"
                       id="old_password">
            </div>
        </div>

        <div class="col-lg-12 mt-2 mb-0">
            <div class="btn btn-primary" onclick="change_password()">변경하기</div>
        </div>
    </div>
</form>
</body>
</html>

2. 새로운 비밀번호 입력 확인하기

step 1 을 client side 에서 확인합니다.
비밀번호 입력시 실시간으로 매칭 여부를 확인합니다.

function confirm_password() {
    $('#new_password, #confirm_new_password').on('keyup', function () {
        if ($('#new_password').val() == $('#confirm_new_password').val()) {
            $('#message').html('Matching').css('color', 'green');
        } else
            $('#message').html('Not Matching').css('color', 'red');
    });
}

confirm_password()

3. 서버에 비밀번호 전송하기

새로운 비밀번호, 새로운 비밀번호 확인, 이전 비밀번호 정보를 서버에 전송합니다.
ajax 로 전송합니다.
비밀 번호 변경 성공 시
- 기존 비밀번호 변경 폼을 reset 합니다.
- 성공 알림 창을 띄웁니다.
비밀 번호 변경 실패 시
- 기존 비밀번호 변경 폼에 있던 정보는 그대로 있습니다.
- 실패 알림 창을 띄웁니다.

function change_password() {
    let base_url = 'http://localhost:8000'
    let url = `${base_url}/change_password/`
    let form = $('#change_password_form')
    var form_array = form.serialize()

    console.log(form)
    $.ajax({
        url: url,
        data: form_array,
        method: "POST",
        dataType: 'json'
    }).done(function (response) {
        if (response['error'] === true) { //비밀 번호 변경 실패 시
            alert(response['msg'])
        } else if (response['error'] === false) { //비밀 번호 변경 성공 시
            alert(response['msg'])
            // password form 의 모든 정보를 지웁니다.
            form[0].reset();
            $('#message').text('')
        }
    }).fail(function () {
        alert("요청 실패");
    }).always(function () {
        alert("요청 완료");
    });
}

4. URLConf 등록

path('change_password/', change_password, name='change_password'),

5. Server side 작업

step 1, step 2, step 3 인증 절차를 진행합니다.
step 1 은 서버에서 다시 한번 검증합니다.
3단계가 모두 작동하면 비밀번호를 저장합니다.

from django.contrib.auth.hashers import check_password
from django.http import JsonResponse
def change_password(request):
    """
    Description:
        비밀번호 검증 절차를 걸처 비밀번호를 저장합니다.
        비밀 번호 검증은 3단계로 진행합니다.
            step 1. 새로운 비밀번호가 확인칸에 입력된 비밀번호와 같은지 검토
            step 2. 화면에서 입력한 비밀번호가 기존의 비밀번호와 다른지 확인
            step 3. 새롭게 입력한 비밀번호가 기존 비밀번호와 같은지 확인

    :param  request:
    :json return:

    """
    user = request.user
    new_password = request.POST.get('new_password')
    confirm_new_password = request.POST.get('confirm_new_password')
    old_password = request.POST.get('old_password')

    # step 1. 새로운 비밀번호가 확인칸에 입력된 비밀번호와 같은지 검토, 같으면 True
    if not confirm_new_password == new_password:
        data = {'msg': '새로운 비밀번호가 기존의 비밀번호가 다릅니다.', 'error': True}

    # step 2. 화면에서 입력한 비밀번호가 기존의 비밀번호와 다른지 확인.
    elif not check_password(old_password, user.password):
        data = {'msg': '비밀번호가 틀립니다. 올바른 비밀번호를 입력하세요.', 'error': True}

    # step 3. 새롭게 입력한 비밀번호가 기존 비밀번호와 같은지 확인, 같으면 False
    # 만약 같지 않으면 비밀번호를 저장합니다.
    elif check_password(new_password, user.password):
        data = {'msg': '새롭게 입력한 비밀번호가 기존 비밀번호와 같습니다. 변경해주세요. ', 'error': True}
    else:
        # 비밀번호 변경하기
        user.set_password(new_password)
        user.save()
        data = {'msg': '비밀번호가 안전하게 변경되었습니다', 'error': False}
    return JsonResponse(data)

change_password - pai-plznw4me/django-initializer GitHub Wiki

비밀 번호 변경

1. 비밀 번호 변경 HTML page 작성

2. 새로운 비밀번호 입력 확인하기

3. 서버에 비밀번호 전송하기

4. URLConf 등록

5. Server side 작업

⚠️ GitHub.com Fallback ⚠️

change_password - pai-plznw4me/django-initializer GitHub Wiki

비밀 번호 변경

1. 비밀 번호 변경 HTML page 작성

2. 새로운 비밀번호 입력 확인하기

3. 서버에 비밀번호 전송하기

4. URLConf 등록

5. Server side 작업

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️