ReactネイティブのWebviewコンポーネントの認証の挑戦

Question

資格情報を必要とする反応するネイティブwebviewでURLをロードしようとしています。通常、SafariやChromeのようなブラウザでこのURLを開くと、認証情報を入力するためのポップアップが表示されます。それをReact-Nativeでどのように処理するのか分かりませんか？

Answer 1

ReactネイティブアプリケーションではLinkedIn認証が必要ですが、WebViewコンポーネントを使用する方法が見つかりませんでした。

でも可能ですが、私が思いついた解決策を強調します。これらの手順はiOS React Nativeアプリのための手順ですが、Androidの手順は異なりますが、コンセプトは同じです。これはまた、いくつかのサーバー構成を必要とします。

URLタイプを作成しました。 XCodeでプロジェクトを選択し、Infoタブをクリックします。下にスクロールしてURLタイプを参照してください。 identifierとURL Schemesを入力します。 URL Schemesの設定内容を覚えておいてください。この例では、myschemeを使用します。

アプリが開くと、Linkingを使用してSafariでURLを開きます。

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

ユーザーはウェブサイトからログインできます。ログインすると、ユーザーをリダイレクトできます。あなたはXcodeの中に入っURL Schemeに一致

myscheme://name=Dan 

myscheme。あなたのアプリケーションがインストールされ、スキームが一致する限り、あなたのアプリが開きます。

://の後に情報のペイロードを追加できます。あなたに

がアプリケーションを反応して、あなたは

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. 
    } 
};