[TIL + DevLog] 아임포트 결제 데이터 보안 2021/12/14

오늘은 어떻게 프로젝트에 기여했나요?

• [Feat] 결제보안기능 구현
• [Fix]소셜로그인 로그인시 이전페이지로
• [Fix] kakao oauth 안되는 에러 해결
• [Fix] 필터링시 페이지오류 수정
• [Feat]카카오 상담기능 추가
• [Fix] 어드민유저 페이지 수정
• [Fix] 어드민작품등록 수정
• [Fix] 로그인시 이전페이지로 가기, 로그아웃시 새로고침
• [Feat]작품상세 품절버튼 추가 및 몇가지 수정
• [Feat]헤더에 마이페이지 추가
• [Feat] 결제완료 페이지 구현

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 결제보안기능 구현
  클라이언트에서 주문금액을 아임포트에 전송하고 결제한 후 결과값을 서버에 보낸 후 서버에서 아임포트와 통신후 결과값을 검증하여 유효여부를 클라이언트에 반환 후 결과값을 저장하는 로직에서, 클라이언트에서 주문금액을 1원으로 수정해도 결제가되는 보안문제가 있어 이를 보완하였다.
  아임포트에 결제한 값을 보내주기전 클라이언트에서 총 주문금액을 계산하고, 서버에 총 주문금액을 요청한후 값을 비교하여 다를경우 에러페이지로
  가고, 같을경우 아임포트 결제를 진행하도록 구현하였다.

         if (success) {
         // 주문에 성공했으니 서버에 주문 정보 전달
         if (
           priceState.totalPrice + priceState.shippingPrice ===
           response.paid_amount
         ) {
           instance
             .patch(`/orders/pay`, {
               imp_uid: response.imp_uid,
             })
             .then((res) => {
             console.log(res);
            const localInfo = localStorage.getItem('cartItems');
               const newArr = JSON.parse(localInfo || '[]').filter(
                 (el: string) => {
                  return !orderProduct.includes(el);
               },
               );
               localStorage.setItem('cartItems', JSON.stringify(newArr));
               history('/paymentfinished');
             })
            .catch((err) => {
               // 아임포트는 결제 완료되었지만 DB저장 혹시 서버에서 문제 발생할 경우
               // 이떄 아임포트 결제 환불 시켜줘야함
               window.location.assign('/error');
               console.log(err.response);
             });
         } else {
           alert('결제금액이 다릅니다.');
           window.location.assign('/error');
         }
         // 주문 실패한 경우
       } else {
         alert('주문을 취소 하셨습니다');
       }
     };

오늘의 회고

오늘도 에러를 정신없이 고쳤다. 해야할 것이 너무 많은데 시간은 없고.. 힘들다 ㅠㅠ 이제 내일부터 마이페이지를 구현하면 거의 끝나갈 것 같다.