얼마 전에 나이스 인증을 연결하는 걸 포스팅 했었다.
나이스로 고통받고 난 뒤 평화롭게 살아가던 와중 추가로 들어온 요청, 아이핀 연결하기
나이스 인증은 14세 이상인 사람들만 사용할 수 있는 서비스라
그에 해당하지 않는 유저를 인증할 방법으로 아이핀을 선택한 것이었다.
나이스 본인인증과 아이핀은 같은 회사에서 만들었고 문서를 봤을때도 구조가 비슷했기에
안에 들어가는 값만 바꾸면 무난하게 될 줄 알았다...
⚠️ 문제
일단 기본 시스템 구조는 나이스 구조와 같았다.
실제로도 문제없이 되는 줄 알았다
맥북 웹, 윈도우 웹, 안드로이드(크롬)으로 테스트했을 때 문제없이 인증한 사용자의 정보들이 잘 넘어오고 있었다.
문제는...
아이폰(사파리, 크롬)에서 안된다는 것...!
아이폰에서 인증하기를 눌렀을 때 문제없이 아이핀 인증창이 뜨고 인증까지 문제없이 잘되나
인증을 마치고나서 창이 꺼지고 사용자의 정보가 오는 단계가 진행되지 않았다ㅠㅠ
해당 부분의 코드는 이랬다.
function IpinPage() {
const moveToIpin = async () => {
const { form } = document;
const returnUrl = `${리다이렉트될 주소}`;
const res = await API.get(`${API 호출 주소}`, { returnUrl });
if (res?.data?.success && res?.data?.result) {
const { ipin_rtn_enc_data } = res.data.result;
const option = `width=450, height=550, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no,`;
window.open('', 'popupIPIN2', option);
form.action = 'https://cert.vno.co.kr/ipin.cb';
form.target = 'popupIPIN2';
form.m.value = 'pubmain';
form.enc_data.value = ipin_rtn_enc_data;
form.submit();
}
};
return (
<div>
<button onClick={moveToIpin}>
아이핀 인증하기
</button>
<form name="form" id="form" action="https://cert.vno.co.kr/ipin.cb">
<input type="hidden" id="m" name="m" value="pubmain" />
<input type="hidden" id="enc_data" name="enc_data" value="" />
</form>
</div>
);
}
위 사진의 4번 단계에서 enc_data가 넘어와야 하는데 아이폰만 사용한 브라우저가 사파리든 크롬이든 간에 넘어오지 않았고 나머지 브라우저(맥북 웹, 윈도우 웹, 안드로이드)는 문제없이 잘 넘어왔다. 그래서 뭔가 아이폰만의 보안 설정 부분을 따로 설정해야 하는 게 있는건지 하는 의심이 들었다.
아이핀은 현재 많이 사용하고 있는 서비스가 아니라서 구글링을 해도 쉽게 나오지 않았고 공식 문서를 읽어봐도 해당 관련 부분을 찾을수가 없었다.
그러다가 같이 해당 부분을 작업하는 백엔드 동료가 하나 또 다른 문서를 보내줬는데 거기에서 힌트를 얻었다.
✅ 해결
기본적으로 enc_data는 POST 방식으로 전달이 되는데 크롬버전이 80이상인 경우 쿠키정책으로 인해서 GET 방식으로 전달을 하고 있다고 한다.
해결방법을 찾던 중
첫번째 시도안 -> form.method = 'get';
두번째 시도안 -> <form name="form" id="form" method="get">위처럼 추가해서 해결하려고 했으나 이마저도 되지 않길래 이 문제도 아니다 싶었는데
알고보니 밑에 컴포넌트에 들어가는 폼안에 해당 태그를 넣어줘야 하는거였다.
<input type="hidden" name="recvMethodType" value="get" />저렇게 지정해줘야 GET 방식으로 전달을 해서 문제없이 데이터를 가져올 수 있는 것이었다.
이 설정을 해주고나니 너무나 문제없이 아이폰에도 데이터가 잘 전달되기 시작했다..ㅠㅠ
다른 디바이스는 다되는데 아이폰만 안되길래 보안이나 쿠키쪽 이슈라고 예상은 했지만
아무리 시도해도 해결이 되지않길래 또 며칠을 파야하나 했는데 다행히 이틀만에 해결..!
세상은 넓고 디바이스 종류는 많다 😤
