Authentifizierung Herausforderung in Webview-Komponente von React Native

Question

Ich versuche, eine URL in reagieren native Webview laden, die Anmeldeinformationen benötigt. Wenn wir diese URL in einem Browser wie Safari und Chrome öffnen, wird normalerweise ein Popup zur Eingabe der Anmeldeinformationen angezeigt. Nicht sicher, wie man es in React-Native behandelt?

Answer 1

Wir benötigen LinkedIn-Authentifizierung für unsere React Native-Anwendung, wir konnten keinen Weg finden, mit der Komponente WebView zu arbeiten.

Diese Mai sehr gut möglich sein, jedoch werde ich hervorheben, welche Lösung wir kamen. Diese Schritte gelten für eine iOS React Native App. Die Schritte unterscheiden sich für Android, aber das Konzept ist dasselbe. Dies erfordert auch eine Serverkonfiguration.

Wir haben einen URL-Typ erstellt. Wählen Sie in XCode Ihr Projekt aus und klicken Sie auf die Registerkarte Info. Scrollen Sie nach unten, um zu sehen URL-Typen. Füllen Sie die identifier und URL Schemes. Denken Sie daran, was Sie für die URL Schemes festgelegt haben. In diesem Beispiel verwenden wir myscheme.

Wenn die App geöffnet wird, verwenden wir Linking, um die URL in Safari zu öffnen.

Linking.openURL('https://foo.bar'); 

Der Benutzer könnte sich dann über die Website anmelden, sobald er eingeloggt ist, können Sie Ihren Benutzer zurück umleiten.

myscheme://name=Dan 

Die myscheme passend die URL Scheme Sie in Xcode eingetragen. Solange Sie Ihre Anwendung installiert haben und das Schema übereinstimmt, wird Ihre App geöffnet.

Sie können beliebige Nutzinformationen nach :// hinzufügen.

in Ihrer Anwendung Reagieren Sie können

componentWillMount() { 
    Linking.addEventListener('url', this.handleOpenURL); 
} 

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

handleOpenURL = (event) => { 
    const { url } = event; 
    if (url.startsWith('myscheme://')) { 
    // do something with your data. 
    } 
};