세션 과 토큰
이 부분은 따로 공부를 하자.
쿠키와 로컬 스토리지의 차이
쿠키
쿠키는 만료가 있다.
매번 데이터를 보내줘야 할 때 유리.
용량 4096바이트
쿠키를 임의로 지정해서 보내줄 때는 복잡하다.
로컬 스토리지
로컬 스토리지는 만료가 없다.
용량 5메가바이트
임의로 지정할 때 간단하다.
토큰 방식 DRF에 적용하기
회원가입 기능 이용!
JWT 방식을 사용.
drf에 적용할 방식은 simple JWT 방식.
프로젝트 세팅
폴더 만들기 drf_project : good
가상환경 : python -m venv venv
가상환경 실행 : venv/Scripts/activate
장고 설치, DRF 설치, simple JWT : pip install django djangorestframework djangorestframework-simplejwt
freeze : pip freeze > requirements.txt
장고 프로젝트 만들기 drf_project : django-admin startproject drf_project .
gitignore : .gitignore windows macos django python visualstudiocode
원격저장소 만들기 : good
깃 인잇 : git init
깃 리모트 추가 :git remote add origin ....
깃 애드 : git add .
깃 커밋 : git commit -m 'init project'
깃 푸시 : git push origin master
인스톨 앱에 DRF, simple JWT 추가 : 'rest_freamework', 'rest_framework_simplejwt',
레스트 프레임 워크에 siple JWT 추가 : REST_FRAMEWORK 에다 추가. 공식문서 참고
앱 만들기 users : python manage.py startapp drf_project
인스톨 앱 users : 'users',
url에 추가 users : path('users/', include('users.urls')
url 만들고 수정 : 이거는 복붙.
마이그레이션:python manage.py makemigrations
마이그래잇: python manage.py migrate
포스트맨 워크스페이스 만들기 drf_project : good
콜렉션 users : good
리퀘스트 login 포스트 방식으로 요청 : good
슈퍼유저 만들기 : python manage.py createsuperuser
슈퍼유저로 리퀘스트 보내기 : good
refresh랑 access가 뭔지 알아보자!
공식 jwt에 접속: good
access encode에 복붙 : good
invalid signatues, SECRET_KEY :
access 토큰은 로그인 하기 위한 토큰.
refresh는 access를 다시 만들어 주기 위한 토큰.
setting에서 기한을 정할 수 있다.
커스텀유저 먼저 작성
예시 모델 복붙, my 없애고 사용. : good
커스텀 유저모델을 사용하겠다고 설정 : AUTH_USER_MODEL = "user.User"
*db삭제. 처음부터 유저 모델을 잘 설정하는게 중요*
마이그레이션 : python manage.py makemigrations
마이그레잇 : python manage.py migrate
생년월일 제거 : good
*db, initial 삭제 후 다시 마이그레이션, 마이 그레잇*
테스트
admin에 유저모델 추가: from .models import User, admin.site.regester(User)
슈퍼유저 생성 : python manage.py createsuperuser
유저 만들고 비밀번호 확인 : 암호화가 안됌.
커스텀 유저 모델 관리자에 등록 하기
admin에 복붙 하기 : good
쓸 수 있도록 수정 : good
관리자 페이지에서 유저 생성 : good
암호화 : good
회원가입과 로그인 해보기
회원가입 api 만들기 signup UserView user_view : path('signup/', views.UserView.as_view, name = 'user_view'
시리얼라이저 클래스 작성 UserSerializer :
class UserSerializer(serializers.ModelSerializer):
메타 클래스, 모델, 필드 : class Meta: model = User fields = "__all__"
views 클래스형으로 회원가입 함수 작성 : class UserView(APIView):
포스트 방식으로 self,request : def post(self, request):
들어온 데이터 시리얼라이즈 : serializer = UserSerializer(data=request.data)
유효성 검사 : if serializer.is_valid():
저장 : serializer.save()
메세지 보내주기 가입 완료 , 201: return Response({"message":"회원가입완료"}, status=status.HTTP_201_CREATED)
에러메세지 보내주기 400 : elif : return Response({"message":"회원가입실패"}, status=stauts.HTTP_400_BAD_REQUEST)
포스트맨 signup 리퀘스트 만들기 : http://127.0.0.1:8000/users/signup/
!에러가 났다.!
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
)
}
PERMISSION에 AUTHENTICATION의 내용을 넣었다. 위는 정상.
signup 테스트 : good
login 테스트 : 실패.
password 암호화하기
함수 만들고 create 자동완성 : def create .....
유저 변수는 어떤건지 만들고 : user = super()... return user
유저의 비번 변수에 담기 : password = user.password
비번 암호화 하기. : user.set_password(password)
저장하기 : user.save()
로그인 테스트 하기 : good
수정하기
암호화랑 똑같다.
토큰의 PAYLOAD를 커스터마이징 해보자!
simple JWT에 설명이 있다.
views에 클래스를 만든다. CustomTokenObtainPairView: class CustomTokenObtainPairView
상속을 해준다. : TokenObtainPairView
시리얼라이저 복붙 : good
이메일로 변경 : good
urls 수정 : views.CustomTokenObtainPairView
simple jmt의 설정을 변경해보자
복붙해오기 :
액세스 토큰 5분으로 늘리기 : "ACCESS_TOKEN_LIFETIME" : timedelta(minute=5),
로그인 했을 때만 가능한 기능 테스트!
views에 클래스 만들기 mockView : class mockView(APIView)
퍼미션 클래시스 만들기 로그인 되었을 때만 : permissionclasses = [permissions.IsAuthenticated]
get 요청 함수 만들고, 요청자 출력, get요청 리턴 : def get(self, request): print(request.user) return Respone('get 요청')
url 만들기 mock/ mockView, mock_view : path('mock/', views.mockView.as_view, name='mock_view')
포스트맨으로 mock에 요청 하기 헤더 수정하기 Authorization Bearer: 헤더에 키는 Authorization 밸류에는 Bearer랑 access token
액세스 토큰 720분으로 늘리기 : 'ACCESS_TOKEN_LIFETIME':timedelta(minute=720)
관리자 권한 주고 , 저장하고 db 확인하기 : user = request.user user.is_admin = True, user.save
리플래시 토큰 이용해서 액세스 토큰 재발급
포스트맨으로 리플래시 url로 포스트 요청 보내기 : api/token/refresh/
필드 양식에 맞춰 요청보내기 : good
액세스 토큰으로 로그인 하기 : good
Beare에서 beare로 적어서 계속 에러 났다.. 오타조심.
환경 만들어 주기 : good
api url 변경하기 : good
로그인 인증 과정을 프론트엔드로 해보기!
drf_project_front 폴더 만들기 :
index.html 만들기
제목 회원가입 페이지 : <H1>회원가입 페이지<H1>
폼 안에 만들기
input 이메일, 비밀번호 : <input type="email" name=""email" id="email" placeholder="email">
비번도 똑같음.
버튼 제출 : <button type="button">제출</button>
자바스크립트 만들기
api.js 만들기 :
html에서 api.js 불러오기 : <script src="api.js"></script>
로딩이 되었다면 함수를 실행해라. 함수 내용은 콘솔로그를 보여주는.:window.onload = () => {console.log('로딩 되었음.')}
백엔드로 이메일과 비번 보내주기
함수를 만들고 handleSignin :function handleSignin()
html에서 이메일을 가져온다.:{email = document.getElementByid("email")}.value
비밀번호를 가져온다 : {password= document.getElementByid("password")}.value
!에러!
password에 큰따옴표를 안붙여서 에러가 남.
제출 버튼을 눌렀을 때만 가져온다. : onclick="handleSignin()"
fetch를 사용한다. : async function handleSignin...
const response = await fetch(주소)
headers :{'content-type':'application/json',}, method:'POST'
body : {"email":email, "password":password}
cors에러 해결 : pip install django-cors-headers 인스톨앱에 추가하고 미들웨어에 추가하고 맨밑에 컴피큐레이션 추가하고.
!에러가났다.! 설치를 다른 가상환경에 한것 같다. pip list에 없었다.
다음엔 조심하자. 그리고 pip list를 확인하자.
404에러 해결 직렬화 : JSON.stringify
!에러가 남!
404에러가 추가를 해줬는데도 계속남.. 똑같은 아이디가 있어서 그랬음..
로그인하기!
로그인 html 만들기 : good
함수만들기, 버튼이 눌러지는 중인지 확인 : async function handleLogin() {console.log('눌러지는 중인가)'}
회원가입 복붙해서 수정하기 : good
제이슨으로 콘솔로그 찍어보기 : const response_json = await response.json()
로컬스토리지에 토큰 저장하기 :
localStorage.setItem("refresh", response_json.refresh);
localStorage.setItem("access", response_json.access);
payroad 로컬에 저장하기 : 복붙
siginup 으로 index 옮기기 : good
index 만들기 : good
index.js 만들기 : good
사용자 이름 띄우기
로딩 완료 후 띄우기 : window.onload = () => {}
로컬에서 아이템 가져오기 : const payload = localStorage.getItem("payload")
오브젝트로 바꾸기 parse : const payload_parse = JSON.parse(payload)
div 가져오기 : const intro = document.getElementByid(intro)
텍스트 가져오기 : intro.innerText = payload.email
포스트맨에서 했던 헤더에 토큰 실어서 보냈던거 html에서 해보기
버튼 만들기 : button type="button" onclick="handleMock()"
복붙해서 수정하기 : headers :{"Authorization":"Bearer" + localStorage.getItem("access"}, method:'GET'
!에러!
후... Authorization에서 Authorizaion이라고 적었다.. 계속 cors 어쩌구 오류나면서 찾아는데 오타였다.. 후...
로그아웃
버튼 만들기 : button handleLogout()
토큰 지우기 : function handleLogout() {
localStorage.removeItem("access")
localStorage.removeItem("refresh")
localStorage.removeItem("payload")
}
!에러!
err_content_length_mismatch
이메일을 보여주는데 꾸 언디파인이 나와서 찾아봤다.
내가 서버에서 보내줄 떄 email을 emial로 적었다... 에휴...