web-dev-qa-db-fra.com

Redirection vers une application mobile à partir de la vue Web de l'application elle-même dans React Native

Je construis une application Android qui nécessite une authentification d'un fournisseur d'authentification externe. J'utilise donc le package react-native-oauth pour gérer cela.

Le redirect_uri défini est un lien profond qui devrait idéalement ouvrir mon application elle-même après une authentification réussie.Mais le WebView semble ne pas gérer cette redirection et j'obtiens une réponse car 404 pages ne sont pas trouvées.

Voici le service que j'ai écrit pour gérer l'authentification:

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

J'ai également défini mon filtre d'intention comme spécifié dans les Android sur comment déclarer les liens profonds pour vos applications . Le lien profond fonctionne correctement lorsqu'il est ouvert avec Linking .openURL () à partir des composants de l'application.

Toute aide dans ce domaine est très appréciée.

javascriptandroidreact-nativewebviewoauth-2.0
16
Surendhar E

Vous ne pouvez pas définir directement redirect_uri sur votre application mobile (car la plupart des fournisseurs d'authentification ne prennent pas en charge le schéma OAuth) personnalisé).

Mais vous pouvez créer une page Web qui acceptera la redirection des fournisseurs OAuth et ouvrira votre application (et enverra tous les paramètres de redirection, comme token).

Par exemple, vous créez la page https://example.com/oauth/, Et mettre callback_url à https://example.com/oauth/XXXXX_provider, donc quand l'utilisateur sera redirigé vers la page https://example.com/oauth/XXXXX_provider&token=xxx il ouvrira votre application en utilisant appName://example/oauth/google?token=xxx

Vous pouvez gérer appName://example/oauth/google?token=xxx utilisant Deeplink (il ouvrira votre application mobile lorsqu'elle sera installée sur l'appareil)

Exemple de page pour gérer les redirections:

<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

Par défaut, WebView ne partage pas les cookies/données de session avec Safari/Chrome. Il n'est donc pas idéal pour le flux de connexion car il n'utilise pas la session connectée existante dans Chrome/Safari.

Expo fournit un WebBrowser api qui ouvrira Safari/Chrome au lieu de la vue Web. Notez qu'il ouvre Safari/Chrome à l'intérieur de l'application, au lieu de vous rediriger le navigateur en utilisant Linking. Les utilisateurs ont donc toujours un bouton dans le navigateur pour revenir à votre application.

Vous pouvez utiliser WebBrowser.openAuthSessionAsync(url) pour ouvrir une session sécurisée qui partage les cookies/informations de session avec le navigateur natif de l'appareil.

Expo fournit également une autre API appelée AuthSession qui simplifie beaucoup de passe-partout et fournit une API simple.

1
Shiva Nandan