Bonnes pratiques pour utiliser signInWithRedirect sur les navigateurs qui bloquent l'accès au stockage tiers

Ce document décrit les bonnes pratiques à suivre pour utiliser les connexions par redirection sur les navigateurs qui bloquent les cookies tiers. Vous devez suivre l'une des options listées ici pour que signInWithRedirect() fonctionne comme prévu dans les environnements de production, sur tous les navigateurs.

Présentation

Pour que le flux signInWithRedirect() soit fluide pour vous et vos utilisateurs, le SDK Firebase Authentication JavaScript utilise un iFrame cross-origin 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 au stockage tiers.

Étant donné qu'il est rarement possible de demander à vos utilisateurs de désactiver les fonctionnalités de partitionnement du stockage dans le navigateur, vous devez plutôt 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, ce problème ne vous concerne pas et vous n'avez rien à faire.
  • 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 l'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 choisir une autre option.) Assurez-vous d'avoir configuré le domaine personnalisé dans le même projet que celui que vous utilisez pour l'authentification.

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

  1. Configurez le SDK Firebase JS pour utiliser votre domaine personnalisé comme authDomain :

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

  1. Ajoutez le nouveau authDomain à la liste des URI de redirection autorisés de votre fournisseur OAuth. La procédure à suivre dépend du fournisseur, mais en général, vous pouvez 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 pour l'autorisation se présente comme suit : https://<the-domain-that-serves-your-app>/__/auth/handler. Le /__/auth/handler à la fin est important.

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

  2. Assurez-vous que votre continue_uri figure dans la liste des domaines autorisés.

  3. Si nécessaire, redéployez avec Firebase Hosting pour récupérer le fichier de configuration Firebase le plus récent hébergé sur /__/firebase/init.json.

Option 2 : Passer à signInWithPopup()

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

Web 

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

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

Web 

  // 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 via pop-up n'est pas toujours idéale pour les utilisateurs. Les pop-ups sont parfois bloqués par l'appareil ou la plate-forme, et le flux est moins fluide pour les utilisateurs mobiles. Si l'utilisation de pop-ups pose problème pour votre application, vous devrez suivre l'une des autres options.

Option 3 : Transférer les requêtes d'authentification vers firebaseapp.com

Le flux signInWithRedirect commence par une 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'assistance à la connexion qui redirige vers le fournisseur d'identité, lequel, en cas de succès, redirige vers le domaine de l'application.

Lorsque le flux d'authentification revient au domaine de votre application, le stockage du navigateur du domaine de l'assistant de connexion est consulté. Cette option et la suivante (pour auto-héberger le code) éliminent l'accès au stockage d'origine croisée, qui est autrement bloqué par les navigateurs.

  1. Configurez un proxy inverse sur le serveur de votre application afin que les requêtes GET/POST vers https://<app domain>/__/auth/ soient transférées vers https://<project>.firebaseapp.com/__/auth/. Assurez-vous que ce transfert est transparent pour le navigateur. Il ne peut pas être effectué 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 les redirect_uri autorisés, l'URL ACS et votre authDomain. Une fois que vous avez redéployé votre application, l'accès au stockage multi-origine ne devrait plus se produire.

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

Une autre façon d'éliminer l'accès au stockage multi-origines consiste à auto-héberger le code d'assistance à la connexion Firebase. Toutefois, cette approche ne fonctionne pas pour la connexion avec Apple ni pour SAML. N'utilisez cette option que si la configuration du proxy inverse de l'option 3 est impossible.

Pour héberger le code d'assistance, 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
wget https://<project>.firebaseapp.com/__/auth/links
wget https://<project>.firebaseapp.com/__/auth/links.js
wget https://<project>.firebaseapp.com/__/firebase/init.json

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

    Voici un exemple d'implémentation de serveur qui télécharge et héberge les fichiers. Nous vous recommandons de télécharger et de synchroniser régulièrement les fichiers pour vous assurer de bénéficier des dernières corrections de bugs et fonctionnalités.

  3. Suivez la procédure décrite dans l'option 1 pour mettre à jour les redirect_uri autorisés et votre authDomain. Une fois que vous avez redéployé votre application, l'accès au stockage multi-origine ne devrait plus se produire.

Option 5 : Gérer la connexion du fournisseur de manière indépendante

Le SDK Firebase Authentication fournit signInWithPopup() et signInWithRedirect() comme méthodes pratiques pour encapsuler une logique complexe et éviter d'avoir à impliquer un autre SDK. Vous pouvez éviter d'utiliser l'une ou l'autre de ces méthodes en vous connectant indépendamment à votre fournisseur, puis en utilisant signInWithCredential() pour échanger les identifiants du fournisseur contre des identifiants Firebase Authentication. Par exemple, vous pouvez utiliser l'exemple de code du SDK Google Sign-In pour obtenir un identifiant de compte Google, puis instancier un nouvel identifiant Google en exécutant le code suivant :

Web 

  // `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);

Web 

  // `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 comme avant.

Pour obtenir un identifiant Apple, cliquez ici.