瀏覽器中的React-native打開鏈接並返回應用程序

Question

我正在開發一個應用本地的應用程序，應該與網關進行通信以進行付款，在完成付款流程（成功或失敗）后，我需要向用戶顯示警報。 為此，我在WebView打開一個鏈接，之后我通過onNavigationStateChange獲取返回的url並顯示成功或失敗消息。

但是，此安全問題的流程必須在默認設備瀏覽器中完成 。

現行代碼：

const BASEURL = 'https://gatewayURL/?ID=';
let Token = null;
let paymentAccepted = null;
let paymentFactorId = null;

class Gateway extends PureComponent {
  static propTypes = {
    dispatch: PropTypes.func,
    navigation: PropTypes.any,
  }

  componentWillMount() {
    this.props.dispatch(getPaymentStatus());
  }


  _onLoad(webViewState) {
    let url = webViewState.url.toString();
    let isResponseValid = url.includes('backFromGateway');
    if(isResponseValid){
      if(this.props.checkedPaymentStatus != 'checked' ){
        setTimeout(() => {
          this.props.dispatch(setPaymentStatus('checked'));

          let splitedURL = url.split("/");
          paymentFactorId = splitedURL[splitedURL.length -2];
          if(splitedURL[splitedURL.length - 1] === '0'){
            paymentAccepted = true;
            this.props.dispatch(setGatewayResponse('done', paymentFactorId));
          }
          else {
            paymentAccepted = false;
            this.props.dispatch(setGatewayResponse('rejected', paymentFactorId));
          }


          this.props.navigation.navigate('BackFromGateway', { title: '' })
        }, 1000);
      }
    }
  }


  render() {
    const { addNewOrderGatewayToken, checkedPaymentStatus } = this.props;
    token = addNewOrderGatewayToken;
    let view = null;
    if(checkedPaymentStatus !== 'checked'){
      view =  <WebView onNavigationStateChange={this._onLoad.bind(this)} style={styles.container} source={{ uri: `${BASEURL}${token}`  }}/>
    }
    else{
      view = <View></View>
    }

    return (
      <View style={styles.container}>
        {view}
      </View>      
    );
  }
}

任何想法？
謝謝

Answer 1

如果您可以從網關網站進行回調，那么我建議使用深層鏈接來處理應用和瀏覽器之間的流量。 基本上，您的應用程序將打開網關網站進行付款，根據付款結果，網站將使用其深層鏈接回復該應用程序。 應用程序然后將收聽鏈接，取出必要的信息並繼續進行。

你需要做的是：

在您的應用中設置深層鏈接。 您應該按照官方網站（ 此處 ）的指南進行操作。 我們在這里選擇一個隨機URL進行鏈接，例如gatewaylistener

設置從網關到您的應用程序的必要回調。 在您的情況下，由於您需要處理成功付款和付款失敗，您可以添加2個回調，例如gatewaylistener://success?id={paymentId}和gatewaylistener://error?id={paymentId}

最后，您需要從應用程序中收聽Web瀏覽器。 一種方法是在打開網關的組件內添加偵聽器。

// setup
componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
      this.handleOpenURL(url)
    }
  }).catch(err => {})
  Linking.addEventListener('url', this.handleOpenURL)
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL)
}

// open your gateway
async openGateWay = () => {
  const { addNewOrderGatewayToken } = this.props
  const url = `${BASEURL}${addNewOrderGatewayToken}`
  const canOpen = await Linking.canOpenURL(url)
  if (canOpen) {
    this.props.dispatch(setPaymentStatus('checked'))
    Linking.openURL(url)
  }
}

// handle gateway callbacks
handleOpenURL = (url) => {
  if (isSucceedPayment(url)) { // your condition
    // handle success payment
  } else {
    // handle failure
  }
}

Answer 2

認證的目的，例如使用深層鏈接重定向，您可以使用來自Android和SafariViewController Chrome的自定義選項卡從iOS的嵌入式瀏覽器，檢查InAppBrowser組件支持代碼相同的兩個平台（ 鏈接已在內部用於檢測深層鏈接重定向）。

從示例文件夾中可以看出，您可以使用從應用程序配置的自定義深層鏈接（適用於Android的AndroidManifest和適用於iOS的Info.plist） ：

  getDeepLink (path = '') {
    const scheme = 'my-demo'
    const prefix = Platform.OS === 'android' ? `${scheme}://demo/` : `${scheme}://`
    return prefix + path
  }

  async tryDeepLinking () {
    const redirectToURL = `https://proyecto26.github.io/react-native-inappbrowser/`
    const redirectUrl = this.getDeepLink('home')
    const url = `${redirectToURL}?redirect_url=${encodeURIComponent(redirectUrl)}`
    try {
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.openAuth(url, redirectUrl)
        await this.sleep(800)
        Alert.alert('Response', JSON.stringify(result))
      } else {
        // You can use Linking directly for iOS < 9
      }
    } catch (error) {
      Alert.alert('Something’s wrong with the app :(')
    }
  }