[Django] clone instagram #7

회원가입 API 만들기

---

ajax를 통해 실제로 회원가입하는 API를 만들어 주도록 하겠다.

password는 암호화를 하여 DB에 저장한다.

암호화에는 단방향/양방향이 있는데,
이때 단방향은 암호화 시킨 후 다시 원래 모습으로 돌아갈 수 없고,
양방향은 암호화 시킨 후 다시 원래 모습으로 '복호화'가 가능하다.

이때 password같은 경우는 복호화가 가능하면 안되기 때문에 단방향 암호화를 사용한다 !

앞에서 장고 유저모델에서는 기본적으로 password 기본 함수를 제공한다고 했다.

이 기본함수인 make_password를 사용하여 password를 암호화시켜준 뒤 DB에 저장해주도록 하겠다.

user/views.py

from django.contrib.auth.hashers import make_password
from rest_framework.response import Response
from .models import User


class Join(APIView):
    ...
    
    def post(self, request):
        # 회원가입
        email = request.data.get('email', None)
        nickname = request.data.get('nickname', None)
        name = request.data.get('name', None)
        password = request.data.get('password', None)

        # User DB 만들어 주기
        User.objects.create(email=email,
                            nickname=nickname,
                            name=name,
                            password=make_password(password),  # password가 암호화되어 저장
                            profile="default_profile.jpg")
        
        return Response(status=200)

가입 버튼 클릭 이벤트 만들기

templates/join.html

html

...
<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="email" class="form-control" id="input-email" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-email">휴대폰 번호 또는 이메일 주소</label>
</div>

<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="input-name" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-name">이름</label>
</div>

<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="input-nickname" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-nickname">닉네임</label>
</div>

<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="input-password" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-password">비밀 번호</label>
</div>

<button id="join-button" style="width: 300px; height: 32px; margin: auto; font-size: 14px; font-weight: bolder; margin-top: 8px;" type="button" class="btn btn-primary">가입</button>
...

js

$('#join-button').click(function(){  // 가입하기 버튼을 클릭하면

                let email = $('#input-email').val();
                let nickname = $('#input-nickname').val();
                let name = $('#input-name').val();
                let password = $('#input-password').val();

                console.log(email, nickname, name, password)
});

id값을 설정해 준뒤, 제이쿼리를 사용하여 가입버튼을 클릭했을 때 데이터를 가져올 수 있도록 만들어 주었다.

데이터 서버로 보내주기

이제 담은 데이터를 ajax를 사용하여 서버를 보내주도록 하겠다.

templates/join.html

js

$.ajax({
      url: "/user/join",
      data: {
              email : email,
              nickname : nickname,
              name : name,
              password : password
            },
      method: "POST",
      success: function (data) {
        console.log("성공");
        alert("회원가입 성공했습니다. 로그인을 해주세요.");
        location.replace('/user/login');
      },
      error: function (request, status, error) {
        console.log("에러");
      },
      complete: function() {
        console.log("완료");
      }
})

서버를 실행해 사용자 정보를 넣어주고 회원가입버튼을 누르면 DB에 입력 데이터가 저장되는 것을 확인 할 수 있다.

로그인 API 만들기

---

회원가입을 만들어 준 뒤 로그인하는 API를 만들어 주도록 하겠다.

먼저 뷰를 만들어준다.

user/views.py

class Login(APIView):
...
    def post(self, request):
        # 로그인
        email = request.data.get('email', None)
        password = request.data.get('password', None)

        user = User.objects.filter(email=email).first()  # email은 unique정보로, 있으면 무조건 1개이기 때문에 fist()를 사용해 첫번째 값만 꺼내온다.

        if user is None:  # 해당 이메일이 User 디비에 없는 경우 에러 반환
            return Response(status=400, data=dict(message="회원정보가 잘못되었습니다."))  # 에러메세지를 '없습니다가' 아닌 '잘못되었다고' 하는 이유는 해커에게 도움을 주지 않기 위해서

        if user.check_password(password):  # 해당 이메일이 User 디비에 있는 경우 password를 비교
            # todo 로그인 성공. 세션 or 쿠키에 넣음
            return Response(status=200)  # 비밀번호가 맞을 경우, 로그인 성공
        else:  # 비밀번호가 틀린경우, 에러메세지 반환
            return Response(status=404, data=dict(message="회원정보가 잘못되었습니다."))

로그인 버튼 클릭 이벤트 만들기

templates/login.html

html

...
<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="email" class="form-control" id="input-email" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-email">휴대폰 번호 또는 이메일 주소</label>
</div>

<div class="form-floating mb-3">
  <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="input-password" placeholder="name@example.com">
  <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="input-password">비밀 번호</label>
</div>

<button id="login-button" style="width: 300px; height: 32px; margin: auto; font-size: 14px; font-weight: bolder; margin-top: 8px;" type="button" class="btn btn-primary">로그인</button>
...

js

$('#login-button').click(function(){  // 가입하기 버튼을 클릭하면

    let email = $('#input-email').val();
    let password = $('#input-password').val();

    console.log(email, password)
});

id값을 설정해 준뒤, 제이쿼리를 사용하여 로그인 버튼을 클릭했을 때 데이터를 가져올 수 있도록 만들어 주었다.

데이터 서버로 보내주기

담은 데이터(email,password)를 ajax를 사용하여 서버를 보내주도록 하겠다.

templates/login.html

js

$.ajax({
      url: "/user/login",
      data: {
              email : email,
              password : password
            },  
      method: "POST",
      success: function (data) {
        console.log("성공");
        alert("로그인 성공했습니다.");
        location.replace('/main');  // 로그인 성공시 main페이지로 이동
      },
      error: function (request, status, error) {
        console.log("에러");
      },
      complete: function() {
        console.log("완료");
      }
})

서버를 실행해 가입한 이메일과 비밀번호를 알맞게 입력하면 로그인 되고, main 페이지로 돌아가는 것을 확인 할 수 있다.

7:36:10