Webview 사용할때 PG사 연결 후 intent 이슈 질문입니다

webview scheme 으로 http, https, sms, file 이정도만 지원되고 intent 는 지원이 안된다고 알고있고,
현재 이것때문에 결제 처리를 못하고 있습니다.

modal 을 띄어서 그안에서 webview를 실행하여 PG사 연결 => 이후 외부앱 실행(설치)에서 intent 에러가 발생합니다.

해결 방법으로 찾은 것들이
import SendIntentAndroid from ‘react-native-send-intent’;
import LinkingAndroid from ‘react-native-intent-linking’;

을 사용하여 함수를 만들어 http, https,이외 스키마일 경우 openUrl() 을 호출하여 외부 브라우저로 실행되게 하는 것으로 해보고 있습니다만…

안되서…이렇게 질문을 드립니다.
아래는 해당 코드 들입니다.

     handleNav = (evt) => {
    if (evt.url.startsWith('http://') || evt.url.startsWith('https://') || evt.url.startsWith('about:blank')) {
        console.log("여기 여기여기여기 :" + evt.url);
        return true;
    }
    if (Platform.OS === 'android') {
      SendIntentAndroid.openAppWithUri(evt.url)
        .then(isOpened => {
          if (!isOpened) {
            Toast.show('외부 앱 실행에 실패했습니다');
          }
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      Linking.openURL(evt.url).catch(err => {
        Toast.show('앱 실행에 실패했습니다. 설치가 되어있지 않은 경우 설치하기 버튼을 눌러주세요.');
      });
    }
    return false;
  };

          <WebView 
                            javaScriptEnabled={true}
                            onMessage={event => {
                                //호출되는 php 페이지의 스크립트인 window.ReactNativeWebView.postMessage(true); 의 리턴을 받아 처리
                                const data = event.nativeEvent.data;
                                if(data){
                                    this.setState({modalWebView:false})
                                }
                            }}
                            //originWhitelist={["https://*", "http://*", "file://*", "sms://*"]}
                            onNavigationStateChange={this.handleNav}
                            //주문번호는 충전 버튼 누를때 api 호출해서 state에 저장
                            source={{uri:`${GlobalValue.PAYMENT_URL}?payType=${this.state.payType}&userCode=${this.state.userCode}&orderNo=${this.state.orderNo}&userNickName=${this.props.userNickName}&final_price=${intValue(this.state.chargePrice)}`}}
                            style={{width : '100%', borderWidth : 1, zIndex : 10}}   
                        />
                    </View>

아마도

originwhiltelist default 값에 intent:// 가 없어서 에러 발생할거예요.

넣어봣는데 지원 안하는건지 에러납니다…
지원안한다고 okky에서 들었거든요

어떻게 넣으셨나요?

그리고 전 https://reactnative.dev/docs/webview#onshouldstartloadwithrequest
이건가… 이벤트 잡아서 처리 했어요(onxxxstatechange 안쓰구)

originWhitelist = {“http://”, “intent://”}이렇게 했네요

값타입이 array 입니다, 잘못 설정하신거 같은데요.

ㅂㅈㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂ

originWhitelist={[’*’]}
으로 해보니 나머지 https,http는 잘 되는데 intent 만 안되는것 보니…
기본적으로 지원이 안되는거 같은데
아까 onShouldStartLoadWithRequest 이걸로 해결하셧다고 하신거죠?

아 이거 IOS 에서만 되네요.onShouldStartLoadWithRequest

저도 잘못사용하고 있었네요…

onShouldStartLoadWithRequest 이함수로 false 리턴하고 intent:// url로 PG사 앱 띄웠는데.
다시 한번 점검해봐야겠네요.

react-native에서 공식적으로 권장하는 react-native-webview 라이브러리 사용하시면 안드로이드에서도 onShouldStartLoadWithRequest 사용 가능합니다.
제 경우에는 originWhitelist={['*']} 넣고 onShouldStartLoadWithRequest 안에서 url에 http:// https:// about:blank인 세가지 경우에는 true 리턴하고 그 외엔 안드로이드에서는 인텐트 호출, IOS에서는 Linking.openURL 호출 후 false 리턴으로 처리하고 있습니다.

1 Like

제가 첨부로 넣은 코드 보시면 아시겠지만 저도
originWhitelist={["*"]}
onNavigationStateChange={this.해당함수명.bind(this)}
으로 처리해서 if문 http,https,about:bank 제외하고
안드로이드 일 경우
SendIntentAndroid.openAppWithUri(evt.url) 으로 외부 앱 실행 시키는 구조인데
if문 http,https,about:bank 검증 후 false 일경우
다음 동작을 안하고 있습니다…

제가 첨부한 코드가 잘못된걸까요?

onNavigationStateChange prop에서 처리하시면 핸들링이 제대로 되지 않아서 react-native-webview 라이브러리 설치 후 onShouldStartLoadWithRequest prop으로 처리하셔야됩니다~

best case 는 멀리있지 않습니다.

1 Like