IOS 환경에서 보안 정책의 이유로 WebView를 통한 나이스 팝업창이 보이지 않음
정확히는 흰 화면만 노출됨
jsp를 통해 팝업을 띄우는 방법이 아닌, 나이스 인증에 필요한 소스를 jsp의 ReactNativeWebView.postMessage
메서드를 통해 전달받음
function fnPopup(){
if (window.ReactNativeWebView) {
// RN에서 데이터는 반드시 문자열로 받을 수 있기 때문에
// JSON.stringify를 사용합니다.
window.ReactNativeWebView.postMessage("key:<%= sEncData %>");
} else {
alert("관리자에게 문의 해주세요.");
}
}
이후 react의 state에 해당 데이터를 담아 WebView를 다음과 같이 정의함
<WebView
key={encodeData}
source={
encodeData
? {
uri: 'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb',
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: `m=checkplusService&EncodeData=${encodeData}`,
}
: {uri: '{나이스 인증 정보를 전달받을 페이지 주소}'}
}
state를 key로 정의하는것이 매우 중요하다. 상태가 담기며 화면을 나이스 주소로 리렌더링 해야하기 때문