RN Webview 나이스 인증

😇 문제상황

• web에서 팝업 형태로 뜨던것이 앱으로 빌드를 하면서 팝업형태가 아닌 인앱브라우저 내부 탭 전환이 이루어져 나이스 인증 페이지가 뜨지 않음
• 결과적으로는 흰 화면만 노출됨
• RN내부 webview는 jsp로 구성되어있음

🥹 해결 방법
1. 나이스인증 전용 webView 스택을 하나 만든다

<RootStack.Screen
	name="NicePayWebView"
    component={NicePayWebViewConitainer}
    options={{
    	animationEnabled: true, // 애니메이션 비활성화
    }}
/>

2. webview > RN으로 나이스페이 창을 열것이다 라는 postMessage를 보낸다 encData를 같이 넘겨준다

window.ReactNativeWebView?.postMessage(
	JSON.stringify({type: 'callCheckPlusSubmit', value: encData})
);

3. RN에서 webview로부터 받은 encData를 가지고 source를 구성해서 NicePayWebView 스택을 쌓는다

const sourceURL = (
{
	uri: 'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb',
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `m=checkplusService&EncodeData=${data.value}`,
});

const pushAction = StackActions.push('NicePayWebView', {
	sourceURL: sourceURL,
    encodeData: data.value
});
navigation.dispatch(pushAction);

4. 인증진행이 완료되면 인증 완료 URL로 이동되면서 encodeData, successYn 데이터를 받는다. 데이터를 받아서 다시 RN으로 넘긴다

// mobile일때
if(util.getUserAgent() === 'android' || util.getUserAgent() === 'ios') {
	window.ReactNativeWebView?.postMessage(
		JSON.stringify({type: 'nicePayInSignin', value: {
			encodeData: encodeData,
			successYn: successYn
		}})
	);
} else { // web일때
	opener.resultCheckPlus(encodeData, successYn);
}

5. RN에서 인증 완료 데이터를 받으면 NicePayWebView에서 기존의 WebView로 이동한다

navigation.navigate('defaultWebView', {
	encodeData: data.value.encodeData,
    success: data.value.successYn
});

6. defaultWebView로 이동되면서 전달받은 param 값을 webview로 내려준다

 webview?.current?.postMessage(
	JSON.stringify({
    	type: 'nicePayInSignin',
        encodeData: route.params.encodeData,
        success: route.params.success
    }),
);