내일배움캠프 TIL 52일차 - Tosspay render에서 fetch API로 변경하기

Today I Learned
- js삽질의 날.. 
- 저번 프로젝트 때 토스페이를 render형식으로 백-프론트 연결하는 것 까지는 성공했지만, 백 / 프론트 폴더를 분리하여 fetch api를 통해서 연결하는 것에는 시간이 너무 부족하여서 토스보다 호텔 예약 사이트를 구현하는 데에 집중하기로 하고 고이 보관해두었음
- 이번 프로젝트는 저번 팀원이 유지가 되어 다들 CRUD보다 추가적인 기능에 집중하기로 하였고,
나는 결제, 배포, 발표를 맡았는데, 결제는 구독의 개념으로 구독료를 결제할 수 있게 기획하였다. 
=> 처음에는 단순히 100원만 내면 AI를 이용할 수 있게 결제기능을 넣자! 였는데 하다보니 베이직 이용권, 프리미엄 이용권으로 구독일 수에 차이를 둠

function applySubscribe(event) {
  const checkbox = event.target;
  const amount = checkbox.dataset.amount;
  const name = checkbox.dataset.name;
  const paymentAmountElement = document.querySelector("#amount");
  const SubscribeNameElement = document.querySelector("#orderName");

  if (checkbox.checked) {
    const checkbox2 = document.querySelector('.checkbox2');
    const checkbox1 = document.querySelector('.checkbox1');
    if (paymentAmountElement.value && checkbox !== checkbox2) {
      checkbox2.checked = false; // 체크박스 2 해제
    }
    if (paymentAmountElement.value && checkbox !== checkbox1) {
      checkbox1.checked = false; // 체크박스 1 해제
    }
    paymentAmountElement.value = amount;
    SubscribeNameElement.value = name;
  } else {
    paymentAmountElement.value = ""; // 체크가 해제되면 금액란을 비움
    SubscribeNameElement.value = "";
  }
}

document.querySelector("#basic").addEventListener("click", applySubscribe)
document.querySelector("#premium").addEventListener("click", applySubscribe)

요것은 내가 구현한 체크박스에 체크 여부에 따른 input value값을 바꿔주며, 
베이직 이용권 체크박스가 Checked인 경우, 프리미엄 체크박스를 Checked하면 베이직 이용권을 해제 하도록 만들었다! 

 다음은, 

#view.py
def success(request):
    access_token = request.META.get('HTTP_AUTHORIZATION_TOKEN')
    orderId = request.GET.get('orderId')
    amount = request.GET.get('amount')
    paymentKey = request.GET.get('paymentKey')

#javascripts
const headers = {
  "Authorization": "Basic " + encodedU,
  "Content-Type": "application/json",
  "Authorization-Token": `액세스 토큰`
  }

js에서 fetch API GET으로 백엔드에 보내줄 때 access-token을 보내주고 받기 위해 헤더에 명시해주었고, 
백에서는 HTTP요청의 헤더정보는 request.META의 딕셔너리에 저장된다. 따라서 이 request.META를 사용해서 내가 보내준 AUthorization-Token을 추출하여 access_token이란 변수에 값을 할당하고, 그 후에는 사용자 인증 처리 로직을 적어주면 된다. 

토스페이 통신 흐름

기존에서는 서버에서 render로 html까지 보내주는 형태였다면, 현재는 front와 back을 분리한 상태니까
위 그림과 같이 front에서 html로 먼저 보여주고 필요한 데이터만 js(fetch)로 서버에 요청하며 서버는 html이 아닌 json데이터만 보내주는 형식으로 바꿔주면 되었다..! 

추가로 JWT토큰을 이용한 로그인 방식을 사용했을 때 유저정보를 추출하기 위해서는 서버에서 access_token을 받고 장고의 시크릿키를 사용하여 복호화(jwt.decode 함수를 사용)하여 변수에 값을 저장해주는 로직이 필요하다.
복호화 된 값에서 해당 사용자를 가져온 다음은 TOSS API에 요청(위 그림에서 4번) 후 응답 데이터에서 필요한 정보만 추출하고 모델 create에 필요한 값들을 사용해서 create해주었다. return 값으로는 JSON응답으로 반환

 

CORS_ALLOW_HEADERS = [
    'authorization-token',
    'content-type',  # 'Content-Type' 헤더 추가
    'authorization',  # 'authorization' 헤더 추가
]

Django settings.py에도 CORS_ALLOW_HEADERS에 보내주는 것들을 명시해주면 된다