- 기존 시스템 구조
이번 프로젝트의 구조는 React를 통한 프론트엔트 + 스프링 기반의 백앤드 형태로 진행했다. 좀 더 상세하게 설명하자면, 기본적인 서버를 React를 사용해서 만들고 DB 통신이나 세션, 서버단에서 통신이 이루어져야 하는 부분 등은 React 내에서 proxy를 통해서 스프링 기반의 백앤드로 연결하여 사용하는 구조를 사용했다.
- 다날 본인인증 모듈 구조
기초적인 기능들을 완성하고 기존 레거시 시스템과 연동 등을 하고 있던 중 본인인증 모듈을 다날 쪽과 계약해서 사용하기로 되었다. 관련해서 다날 측에서 개발 가이드로 전달 받은 파일을 통해 사용법을 확인 중에 다날 서비스를 처음 불러오기 위한 POST 요청 자체는 React에서 생성하여 호출 가능했다.
- 리액트는 post 요청을 받을 수 없음
문제는 다날 서비스 호출시에 본인 인증이 완료된 뒤에 데이터를 포함한 결과가 호출될 landing URL을 전달해야 하는데 랜딩페이지가 정상적으로 호출되지 않는 현상이 발생했다. 찾아보니 리액트는 POST 요청을 처리할 수 없다고 했다.(물론 내가 컴알못이라 못찾은걸 수도 있다 Express 같은 기능을 이용하면 된다는데마더사에서 허락해줄것 같지 않다.) 스프링 백엔드에서 POST 요청을 받을 수 있도록 React 단의 기존 구축한 proxy를 통해 스프링으로 프록시될 수 있는 URL을 넣었다. Okay, 성공적으로 데이터를 가진 랜딩 페이지가 호출되어 처리되었다.
- 403 오류가 발생한다?!
스마트폰이 없던 시절 등산을 가면 GPS를 통해 쉽게 산의 어디쯤이구나를 파악하지 못했을때 내려오는 어른들한테 얼마나 가야하냐고 여쭤보면 5분만 더 올라가면 된다고 낚였던 적이 있다. 지금의 상황이 정말 그러한 상황이였다. 랜딩 페이지 호출까지도 기존의 다날 서비스를 분석해서 억지로 연결한 느낌이였는데 랜딩 페이지에 떨어진 데이터를 부모창에 전달하고 부모창에서 데이터를 서버에 저장하기 위해 axios로 스프링 백엔드 API로 던지는 순간 403 오류가 발생했다.
https://www.pexels.com/photo/macro-photography-of-pile-of-3-cookie-230325/ - 쿠키의 증발과 새로운 세션
403 오류가 발생한 것이 던지는 데이터 형태나 request 해더 부분이 문제가 있는건 아닐까 싶어 한참을 찾다가 개발자 도구의 Application 탭에서 Cookies 항목에 사이트 쿠키 값이 다날 본인인증 모듈을 호출하여 외부 서버로 form data를 submit해서 URL 자체가 다날측 서버 URL을 가지고 있다가 인증이 끝나고 다시 React 서버의 URL로 돌아오게 되는데 그 사이에 사이트 쿠키의 값이 패기되고 다시 생성되었고 원인은 모르겠지만 그 데이터를 부모창으로 전송하는 동시에 부모창의 쿠키 값도 변조되는 것을 확인했다.
리볼버는 기능고장이 거의 없다고 한다. https://www.pexels.com/photo/silhouette-of-two-people-holding-revolver-pistols-sitting-on-hill-207840/ - 고대 유물병기
처음에는 URL 자체를 우리 서버 URL에서만 다 처리될 수 있도록 proxy를 통해서 동작할 수 있게 셋팅하려고 했으나 다날측에서 본인인증이 처리되는 모든 과정을 중간에 프록시 서버에서 데이터를 까서 다날측 URL 타도록 되어 있는걸 확인한 뒤에 우리 proxy의 url을 타도록 수정하는게 만만치 않을것 같아 본인인증 버튼을 클릭하면 팝업창이 뜨게 할때 iframe을 가진 팝업창이 뜨게 하고 iframe의 src를 다날 서비스를 호출하는 폼을 가져오도록 셋팅했다. 결과적으로 팝업창이 뜨게 되면 URL이 우리 서버의 URL로 생성되고 iframe 안에서 다날 인증 과정에서 form submit 등이 이루어져도 iframe 바깥의 팝업창 자체 URL은 변경이 없는 상태로 진행할 수 있었기에 cookies 내부의 사이트별 쿠키도 유지될 수 있었다. - 맺음말
iframe을 사용하는 것이 여러가지로 안좋은 부분이 있다는 것은 인지하고 있지만 일단 기한 내로 기능을 구현한 뒤에 추후 시간이 확보되면 여러가지로 리팩토링할 부분 중 하나인건 확실하다. 에초에 다날측에서 인증 완료되고 요청하는 POST를 받기 위해 React에서 proxy로 스프링에 전달했다가 스프링에서 redirect로 GET 방식으로 요청을 바꿔서 React 서버에 다시 요청하도록 하는 방식이 너무 복잡하여 차라리 POST 요청에 대한 폼 생성 등은 스프링 측에서 body를 생성해서 화면 자체를 전달하는 식으로 진행하는게 맞을 것 같다. - 해치웠나?
리액트에서 처음 팝업 띄워줄때 iframe을 띄워주고 iframe 안에서 리액트 페이지를 다시 호출해서 onload를 통한 함수에서 submit을 진행했는데 리액트 내부에 CPID와 CPPWD 두개의 값을 프론트 단에서 알 수 없도록 해달라고 한다. 이 값들로 실제로 무엇을 할 수 있는지 모르겠지만 일단 이 값 자체가 쓰이는 것이 https://uas.teledit.com/uas/ 경로에 post 요청을 보내어 TID 값을 받기 위해서만 쓰이기에 그냥 HttpURLConnection을 통해서 스프링 서버에서 직접 teledit 서비스를 타고 TID를 생성하여 클라이언트로 html을 만들어서 내려주고 클라이언트는 onload가 되면 sumbit을 진행하도록 수정하였다. 이젠 해결됐겠지?...