[알게된 것] React Native WebView Pass 인증

😀문제상황

안드로이드 앱에서 WebView를 통한 나이스 인증절차를 겪는 중 Pass 인증하기를 누르면 스토어가 열리고 정상적인 인증이 진행되지 않음

😁해결방법

AndroidManifest.xml

<permission android:name="android.permission.QUERY_ALL_PACKAGES" />
<queries>
  <intent>
    <action android:name="android.intent.action.MAIN" />
  </intent>
</queries>

<application ...>
  <activity>
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
    </intent-filter>
  </activity>
</application>

다음 구문들 추가 및

const onShouldStartLoadWithRequest = (event: any) => {
    if (
      event.url.startsWith('http://') ||
      event.url.startsWith('https://') ||
      event.url.startsWith('about:blank')
    ) {
      return true;
    }
    if (Platform.OS === 'android') {
      console.log('안드로이드');

      // 중요. openChromeIntent
      SendIntentAndroid.openChromeIntent(event.url)
        .then(isOpened => {
          if (!isOpened) {
            Alert.alert('앱 실행에 실패했습니다');
          }
        })
        .catch(err => {
          console.log(err);
        });
      return false;
    }
  };

<WebView
	...
    originWhitelist={['*']}
    onShouldStartLoadWithRequest={event => onShouldStartLoadWithRequest(event);}
    ...
/>

😂여담

다른 블로그에서 nodemodules의 RNSendIntentModule.java파일을 수정하라는 글을 봤었다.

모듈을 수정한다는 것은 굉장히 귀찮은 작업들이 동반되기에 끝까지 다른 방법을 찾아보았음

Chrome이 설치되어있지 않은 환경은 isAppInstalled 메서드로 찾아보면 되겠으나, 일각에서 해당 메서드도 문제가 많다해서 사용하지 않을 예정