[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="[email protected]">
<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="[email protected]">
<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="[email protected]">
<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="[email protected]">
<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="[email protected]">
<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="[email protected]">
<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
Author And Source
이 문제에 관하여([Django] clone instagram #7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jollyn/Django-clone-instagram-7저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)