스티커 판매 쇼핑몰(feat.오라운드) 제작
개인프로젝트 주제를 모색하다가 로그인, 장바구니, 결제 시스템을 구현해 볼 수 있는 쇼핑몰을 택하게 되었다. 요즘에 노트북에 붙힐 스티커를 구매하기 위해 방문했던 오라운드를 모델로 하여 구현할 계획이다.
기술스택: react + django
구현할 기능: 카카오로그인, 메인페이지(상품들), 상품상세페이지, 장바구니, 결제
DB 설계
REST API(업데이트 중)
React + Django 보안 관련 설정
- Django
CORS_ORIGIN_WHITELIST = ['http://127.0.0.1:3000','http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True
CSRF_TRUSTED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1:3000",
]
CSRF_USE_SESSIONS = True- React
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
axios.defaults.withCredentials = true; //refreshToken을 secure httpOnly 쿠키로 주고받기
axios.defaults.headers = {
"Content-Type": "application/json",
};유저 인증 방식
- Django에서 simple jwt 사용
INSTALLED_APPS = [
...
"rest_framework",
'rest_framework_simplejwt',
'rest_framework_simplejwt.token_blacklist',
...
]본래는 다음과 같이 simple jwt에서 기본으로 제공하는 api 호출하여 토큰을 발급받으면 되지만,
나의 경우에는 카카오로그인을 했을 때 토큰을 발급해야 했기에 매뉴얼 방식으로 사용하였다.
사용자 인증이 수반되어야하는 api에는 view.py에서 다음과 같이 class에 데코레이터를 붙여주었다. 해당 api를 호출하기 위해서는 client에서 axios에 access 토큰을 함께 보내주어야 한다. (장고 jwt 설정에 따라 Bearer access token 형태로 전달, 보안 설정으로 인해 csrf 토큰도 필요)
from rest_framework import exceptions, decorators, permissions
@decorators.permission_classes([permissions.IsAuthenticated])
class UserInfoView(APIView) :
...로그인 로직: 클라이언트에서 로그인 api를 호출(post request) > 서버 db에 존재하는 user인지 확인 > access, refesh, csrf 토큰 전달 & refresh 토큰을 쿠키에 실어보냄(response) > 클라이언트에서 refesh 토큰을 쿠키에 저장 > 로그아웃 할 때 서버와 클라이언트에서 refresh 토큰 삭제
클라이언트에서 로그인 유지(새로고침): 사용자 브라우저 쿠키에 refesh token이 존재하면 refresh 토큰을 api/token/refesh에 post하여 새로운 access토큰과 csrf토큰을 받음
