[Django] 회원가입, 로그인 만들기, 세션

유투브 07:02:00 부터 시작

구현할 순서

회원가입 시 POST 로 데이터를 서버에 보내기

받은 데이터를 DB에 저장

로그인 시 POST 로 데이터를 서버에 보내 DB와 비교해서 status 리턴

---

회원가입 시 POST 로 데이터를 서버에 보내기

user/models.py

from django.db import models
from django.contrib.auth.base_user import AbstractBaseUser

# Create your models here.
class User(AbstractBaseUser):
    '''
    프로필사진
    이름 -> 화면표기
    유저 이름 -> 실제이름
    이메일주소 -> 회원가입용
    유저 비밀번호 -> 디폴트
    '''

    profile_image = models.TextField()
    nickname = models.CharField(max_length=24, unique=True)
    name = models.CharField(max_length=24)
    email= models.EmailField(unique=True)

    USERNAME_FIELD = 'email'

    class Meta:
        db_table="user"

user/urls.py

urlpatterns = [
    path('join', Join.as_view()),
    path('login', Login.as_view())
]

user/views.py

from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
from .models import User
# 단방향 패스워드
from django.contrib.auth.hashers import make_password

# Create your views here.
class Join(APIView):
    def get(self, request):
        return render(request, 'user/join.html')

    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.objects.create(email=email,
                           nickname=nickname,
                           name=name,
                           password=make_password(password),
                           profile_image="default_profile.jpg")
        return Response(status=200)

templates/user/join.html

<script>
// join button 눌렀을 때
      $("#join_button").click(function () {
        alert("가입 누름!");

        let email = $("#input_email").val();
        let name = $("#input_name").val();
        let nickname = $("#input_nickname").val();
        let password = $("#input_password").val();

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

        // json 데이터만 넘기기
        $.ajax({
          url: "/user/join",
          data: {
            email: email,
            name: name,
            nickname: nickname,
            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("완료");
          },
        });
      });
   </script>

버튼을 누르면

--> 데이터 POST 로 전달 

--> models.py 에서 DB 객체 생성해서 넣어주고

--> migrathins/0001_initial.py 에서 DB 랑 자동으로 동기화 해줌

--> 확인은 sqlite3 db.sqlite3 해서 .tables / select * from table... 하면 됨

---

로그인 시 POST로 보내 확인하기

user/login.html

<script>
      // login button 눌렀을 때
      $("#login_button").click(function () {
        alert("로그인 누름!");

        let email = $("#input_email").val();
        let password = $("#input_password").val();

        console.log(email, password);

        // json 데이터만 넘기기
        $.ajax({
          url: "/user/login",
          data: {
            email: email,
            password: password,
          },
          method: "POST",
          success: function (data) {
            console.log("성공");
            alert("로그인 성공");
            location.replace("/");
          },
          error: function (request, status, error) {
            console.log("에러");
          },
          complete: function () {
            console.log("완료");
          },
        });
      });
    </script>

user/views.py

class Login(APIView):
    def get(self, request):
        return render(request, 'user/login.html')

    def post(self, request):
        # 로그인 데이터 서버로 보내서 비교
        email = request.data.get('email', None)
        password = request.data.get('password', None)

        # 이메일이 여러개면 리스트로 반환됨
        user = User.objects.filter(email=email).first()
        if user is None:
            return Response(status=404, data=dict(message="회원정보가 잘못되었습니다."))

        if user.check_password(password):
            # TODO 로그인을 했다. 세션 or 쿠키
            return Response(status=200)
        else:
            return Response(status=400, data=dict(message="회원정보가 잘못되었습니다."))

---

사용자 / 브라우저가 서버와 연결이 되어 있다.

사용자1이 로그인을 하고있고

사용자2가 로그인 이후 사용을 하고 있을 때

서버는 각각의 사용자가 어떤 화면과 연결이 되어 있는지 알고 있어야 한다. 이때 사용되는 것이 세션정보이다.

그걸 사용작 저장하고 있으면 쿠키라고 한다.