web-dev-qa-db-ja.com

React Nativeのアプリ自体のWebビューからモバイルアプリへのリダイレクト

私はAndroid外部認証プロバイダーからの認証を必要とするアプリケーションを構築しています。だから私は react-native-oauth パッケージを使用してこれを処理しています。

定義されたredirect_uriはディープリンクであり、認証に成功するとアプリ自体を開くことが理想的ですが、WebViewはこのリダイレクトを処理していないようで、404ページが見つからないという応答が返されます。

これは、認証を処理するために作成したサービスです。

    const manager = new OAuthManager('<app_name>')

    manager.addProvider({
         'provider': {
                  auth_version: '2.0', 
                  authorize_url:'<auth-url>',
                  access_token_url: '<auth-url>/token',
                  callback_url: 'http://localhost/provider',
         }
    });

    manager.configure({
       provider: {
           client_id: '<id>',
           client_secret: '<secret>',
           redirect_uri: '<redirect-uri>' //DEEP LINK HERE
      }
    });
   module.exports = {
      authManager: () => {
      manager.authorize('<provider>')
                        .then(resp => console.log(resp))
                        .catch(err => console.log(err));    
                    }
   }

また、Android docs on アプリのディープリンクを宣言する方法 で指定されているようにインテントフィルターを定義しました。アプリコンポーネントの.openURL（）。

これの助けは大歓迎です。

javascriptandroidreact-nativewebviewoauth-2.0
16
Surendhar E

Redirect_uriをモバイルアプリに直接設定することはできません（ほとんどの認証プロバイダーがカスタムOAuthスキームをサポートしていないため）。

ただし、OAuthプロバイダーからのリダイレクトを受け入れ、アプリを開く（およびtokenなどのすべてのリダイレクトパラメーターを送信する）Webページを作成できます。

たとえば、ページhttps://example.com/oauth/を作成し、callback_urlをhttps://example.com/oauth/XXXXX_providerに設定すると、ユーザーがページhttps://example.com/oauth/XXXXX_provider&token=xxxにリダイレクトされると、appName://example/oauth/google?token=xxxを使用してアプリが開きます。

ディープリンク を使用してappName://example/oauth/google?token=xxxを処理できます（デバイスにインストールされるとモバイルアプリが開きます）

リダイレクトを処理するページの例：

<html><head></head><body>
<p>Please wait while we redirect you to Your APP NAME...</p>
<p><a href="javascript:redirectToApp()">Open appname</a></p>
<script>
  var redirectToApp = function() {
    var scheme = "appnameapp";
    var openURL = "appname" + window.location.pathname + window.location.search + window.location.hash;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var Android = /Android/.test(navigator.userAgent);
    var newLocation;
    if (iOS) {
      newLocation = scheme + ":" + openURL;
    } else if (Android) {
      newLocation = "intent://" + openURL + "#Intent;scheme=" + scheme + ";package=com.appnameapp;end";
    } else {
      newLocation = scheme + "://" + openURL;
    }
    console.log(newLocation)
    window.location.replace(newLocation);
  }
  window.onload = redirectToApp;
</script>


</body></html>
9
Oleksandr Cherniavenko

デフォルトでは、WebViewはCookie /セッションデータをSafari/Chromeと共有しません。したがって、Chrome/Safariの既存のログインセッションを使用しないため、ログインフローには適していません。

Expoには、WebViewの代わりにSafari/Chromeを開く WebBrowser api があります。 Linkingを使用してブラウザをリダイレクトする代わりに、アプリ内でSafari/Chromeを開くことに注意してください。そのため、ユーザーはアプリに戻るためのボタンをブラウザに常に持っています。

WebBrowser.openAuthSessionAsync(url)を使用して、デバイスのネイティブブラウザとCookie /セッション情報を共有する安全なセッションを開くことができます。

Expoは AuthSession と呼ばれる別のAPIも提供します。これにより、多くの定型文が単純化され、シンプルなAPIが提供されます。

1
Shiva Nandan