Reagieren-native open link in browser und kehren Sie zu der app
Habe ich eine app zu entwickeln, die in reagieren,-Muttersprachler, die sollten kommunizieren mit einem gateway für Zahlungen, die nach Abschluss der Zahlungsabwicklung (Erfolg oder Fehler), die ich brauche, um zu zeigen, eine Warnung an Benutzer. Zu diesem Zweck öffne ich einen link in WebView
und nach, dass ich den Rückgabe-url mit onNavigationStateChange
und zeigen Erfolgs-oder Fehlermeldung.
Aber dieser Fluss für Sicherheit Probleme getan werden muß, eine Standard-browser des Geräts.
Aktuelle Code:
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>
);
}
}
Irgendeine Idee?
Dank
- Ich ganz nicht verstehen, was ist Ihre Argumentation und die Bedeutung hinter webviews Sicherheitsfragen? Gibt es einige Artikel zu diesem Zusammenhang? Webview verwendet die gleiche engine wie Chrome auf dem Handy und ich würde nicht sehen, wie Webview würde sich betroffen in Bezug auf die Sicherheit.
- Unser local store akzeptiert nur diesen Weg für apps, die online-Zahlung.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie können Rückrufe aus der gateway-website, dann ich empfehlen die Verwendung von deep-linking zu handhaben Fluss zwischen app und browser. Im Grunde, Sie Ihre app öffnen Sie die gateway-website für die Zahlung, und je nach Zahlung führen, wird die website einen Rückruf der app mit seinen deep-link. App dann hören Sie auf den link, nehmen Sie notwendige Informationen und auf "fortfahren".
Was Sie tun müssen, ist:
Eingerichtet deep-linking in Ihre app. Sollten Sie die Anleitung von der offiziellen website ( hier ), um es zu aktivieren. Lassen Sie uns wählen Sie eine zufällige URL hier verlinken, z.B.
gatewaylistener
Notwendige Rückrufe von gateway zu Ihrer app. In Ihrem Fall, da Sie in der Handhabung die erfolgreiche Zahlung und Zahlung fehlgeschlagen ist, können Sie hinzufügen, 2 Rückrufe, z.B.
gatewaylistener://success?id={paymentId}
undgatewaylistener://error?id={paymentId}
Schließlich müssen Sie zu hören Sie web browser aus dem app. Eine Möglichkeit, die add-listener direkt in der Komponente öffnen das Tor.
<data android:scheme="http" android:host="www.example.com" android:pathPrefix="/gizmos" />
und setzen gatewaylistener://Erfolg?id={paymentId} in diese Daten?<data android:scheme="gatewaylistener" />
da das Schema die Sie verwenden möchten ist nicht http, sonderngatewaylistener
. Ich schlage vor, Sie schauen in einige gute Beispiele, um, wie medium.com/react-native-training/..., zu wissen, wie call & setup deep-linking.<a href="gatewaylistener://success">Open app</a>
können, öffnen Sie Ihre app ohne Probleme.Zur Authentifizierung, die Verwendung eines deep-Links-Umleitung-zum Beispiel, können Sie mit einem eingebetteten browser mit Chrom Benutzerdefinierte Registerkarten von Android und SafariViewController von iOS, überprüfen Sie die InAppBrowser Komponente zur Unterstützung der beiden Plattformen mit dem gleichen code (Verknüpfung ist bereits intern verwendet, um erkennen, die Tiefe link-Umleitung).
Wie Sie sehen können aus dem Beispiel-Ordner, die Sie verwenden können, eine benutzerdefinierte deep-link konfiguriert Ihre app (AndroidManifest für Android und Info.plist für iOS):