Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Bonnes pratiques pour l'utilisation de signInWithRedirect dans les navigateurs qui bloquent l'accès des espaces de stockage tiers

Ce document décrit les bonnes pratiques d'utilisation des connexions en redirect sur les navigateurs qui bloquent les cookies tiers.

Présentation

Pour que le flux signInWithRedirect() soit parfaitement fluide pour vous et vos utilisateurs, le SDK JavaScript Firebase Authentication utilise un iFrame multi-origine qui se connecte au domaine Firebase Hosting de votre application. Toutefois, ce mécanisme ne fonctionne pas avec les navigateurs qui bloquent l'accès aux espaces de stockage tiers.

Comme il est rarement possible de demander aux utilisateurs de désactiver les fonctionnalités de partitionnement du stockage sur le navigateur, vous devez appliquer l'une des options de configuration suivantes à votre application, en fonction des spécificités de votre cas d'utilisation.

  • Si vous hébergez votre application avec Firebase Hosting sur un sous-domaine de firebaseapp.com, vous n'êtes pas concerné par ce problème et aucune action n'est requise.
  • Si vous hébergez votre application avec Firebase Hosting sur un domaine personnalisé ou un sous-domaine de web.app, utilisez l'option 1.
  • Si vous hébergez votre application avec un service autre que Firebase, utilisez l'option 2, l'option 3, l'option 4 ou l'option 5.

Option 1: Mettez à jour votre configuration Firebase pour utiliser votre domaine personnalisé comme authDomain

Si vous hébergez votre application avec Firebase Hosting à l'aide d'un domaine personnalisé, vous pouvez configurer le SDK Firebase pour qu'il utilise votre domaine personnalisé comme authDomain. Cela garantit que votre application et le cadre iFrame d'authentification utilisent le même domaine, ce qui évite le problème de connexion. (Si vous n'utilisez pas Firebase Hosting, vous devez utiliser une autre option.)

Pour mettre à jour votre configuration Firebase afin d'utiliser votre domaine personnalisé comme domaine d'authentification, procédez comme suit:

  1. Configurez le SDK JS Firebase pour utiliser votre domaine personnalisé en tant que authDomain :

    const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<the-domain-that-serves-your-app>",
  databaseURL: "<database-url>",
  projectId: "<project-id>",
  appId: "<app-id>"
};

  2. Ajoutez le nouveau authDomain à la liste des URI de redirection autorisés de votre fournisseur OAuth. La procédure à suivre dépend du fournisseur. Cependant, vous pouvez généralement suivre la section "Avant de commencer" de n'importe quel fournisseur pour obtenir des instructions précises (par exemple, le fournisseur Facebook). L'URI mis à jour à autoriser ressemble à https://<the-domain-that-serves-your-app>/__/auth/handler. Le /__/auth/handler final est important.

    De même, si vous utilisez un fournisseur SAML, ajoutez le nouveau authDomain à l'URL du service ACS (Assertion Consumer Service) SAML.

Option 2: Passer à signInWithPopup()

Utilisez signInWithPopup() au lieu de signInWithRedirect(). Le reste du code de votre application reste le même, mais l'objet UserCredential est récupéré différemment.

Version Web 9 

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

Version Web 8 

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

La connexion par pop-up n'est pas toujours idéale pour les utilisateurs : les fenêtres pop-up étant parfois bloquées par l'appareil ou la plate-forme, la navigation est moins fluide pour les mobinautes. Si l'utilisation de pop-ups pose problème dans votre application, vous devez suivre l'une des autres options.

Option 3: Requêtes d'authentification du proxy vers firebaseapp.com

Le parcours signInWithRedirect commence par la redirection du domaine de votre application vers le domaine spécifié dans le paramètre authDomain de la configuration Firebase (.firebaseapp.com par défaut). authDomain héberge le code d'aide à la connexion qui redirige vers le fournisseur d'identité, qui, en cas de réussite, redirige vers le domaine de l'application.

Lorsque le flux d'authentification revient à votre domaine d'application, l'espace de stockage du navigateur du domaine de l'outil d'aide à la connexion est utilisé. Cette option et la suivante (pour auto-héberger le code) éliminent l'accès au stockage multi-origine, qui est sinon bloqué par les navigateurs.

  1. Configurez un proxy inverse sur votre serveur d'application afin que les requêtes GET/POST envoyées à https://<app domain>/__/auth/ soient transférées vers https://<project>.firebaseapp.com/__/auth/. Assurez-vous que ce transfert est transparent pour le navigateur. Vous ne pouvez pas effectuer cette redirection via une redirection 302.

    Si vous utilisez nginx pour diffuser votre domaine personnalisé, la configuration du proxy inverse se présentera comme suit:

    # reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
  proxy_pass https://<project>.firebaseapp.com;
}

  2. Suivez les étapes de l'option 1 pour mettre à jour redirect_uri autorisé, l'URL ACS et votre authDomain. Une fois votre application redéployée, l'accès au stockage multi-origine ne devrait plus avoir lieu.

Option 4: Auto-hébergez le code d'aide à la connexion dans votre domaine

Une autre manière d'éliminer l'accès au stockage multi-origine est d'héberger lui-même le code d'aide à la connexion Firebase. Cependant, cette approche ne fonctionne pas pour la connexion Apple ni pour SAML. N'utilisez cette option que si la configuration du proxy inverse de l'option 3 n'est pas possible.

Pour héberger le code d'aide, procédez comme suit:

  1. Téléchargez les fichiers à héberger à partir de l'emplacement <project>.firebaseapp.com en exécutant les commandes suivantes:

    mkdir signin_helpers/ && cd signin_helpers
wget https://<project>.firebaseapp.com/__/auth/handler
wget https://<project>.firebaseapp.com/__/auth/handler.js
wget https://<project>.firebaseapp.com/__/auth/experiments.js
wget https://<project>.firebaseapp.com/__/auth/iframe
wget https://<project>.firebaseapp.com/__/auth/iframe.js

  2. Hébergez les fichiers ci-dessus dans le domaine de votre application. Assurez-vous que votre serveur Web peut répondre à https://<app domain>/__/auth/<filename>.

    Voici un exemple d'implémentation de serveur qui télécharge et héberge les fichiers.

  3. Suivez les étapes de l'option 1 pour mettre à jour redirect_uri autorisé et votre authDomain. Une fois votre application redéployée, l'accès au stockage multi-origine ne devrait plus avoir lieu.

Option 5: Gérer la connexion du fournisseur indépendamment

Le SDK Firebase Authentication fournit signInWithPopup() et signInWithRedirect() comme méthodes pratiques pour encapsuler une logique compliquée et éviter d'avoir à impliquer un autre SDK. Pour éviter d'utiliser l'une ou l'autre de ces méthodes, connectez-vous de manière indépendante à votre fournisseur, puis utilisez signInWithCredential() pour échanger les identifiants du fournisseur contre des identifiants Firebase Authentication. Par exemple, vous pouvez utiliser le SDK Google Sign-In, un exemple de code pour obtenir des identifiants de compte Google, puis instancier de nouveaux identifiants Google en exécutant le code suivant:

Version Web 9 

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

Version Web 8 

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

Une fois que vous avez appelé signInWithCredential(), le reste de votre application fonctionne de la même manière qu'auparavant.

Pour savoir comment obtenir des identifiants Apple, cliquez ici.