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

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

Aperçu

Pour rendre le flux signInWithRedirect() transparent pour vous et vos utilisateurs, le SDK JavaScript d'authentification Firebase utilise une iframe d'origine croisée qui se connecte au domaine d'hébergement Firebase de votre application. Cependant, ce mécanisme ne fonctionne pas avec les navigateurs qui bloquent l'accès au stockage tiers.

Étant donné que demander à vos utilisateurs de désactiver les fonctionnalités de partitionnement du stockage sur le navigateur est rarement une option, 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 , 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 Option 2 , Option 3 , Option 4 ou 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 utiliser 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 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 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>"
};

  2. Ajoutez le nouveau authDomain à la liste des URI de redirection autorisés de votre fournisseur OAuth. La manière de procéder 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 exactes (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 SAML Assertion Consumer Service (ACS).

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

  4. Redéployez avec Firebase Hosting si nécessaire pour récupérer le fichier de configuration Firebase le plus à jour hébergé sur /__/firebase/init.json .

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.

API modulaire Web

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

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

API avec espace de noms 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 contextuelle n'est pas toujours idéale pour les utilisateurs : les fenêtres contextuelles sont parfois bloquées par l'appareil ou la plate-forme, et le flux est moins fluide pour les utilisateurs mobiles. Si l'utilisation des fenêtres contextuelles pose un problème pour votre application, vous devrez suivre l'une des autres options.

Option 3 : demandes d'authentification proxy à firebaseapp.com

Le flux signInWithRedirect commence par la redirection depuis votre domaine d'application vers le domaine spécifié dans le paramètre authDomain dans 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 succès, redirige vers le domaine de l'application.

Lorsque le flux d'authentification revient à votre domaine d'application, le stockage du navigateur du domaine d'aide à la connexion est accessible. Cette option et la suivante (pour auto-héberger le code) éliminent l'accès au stockage cross-origin, qui serait autrement bloqué par les navigateurs.

  1. Configurez un proxy inverse sur votre serveur d'applications afin que les requêtes GET/POST adressées à https://<app domain>/__/auth/ soient transmises à https://<project>.firebaseapp.com/__/auth/ . Assurez-vous que cette redirection est transparente pour le navigateur ; cela ne peut pas être fait via une redirection 302.

    Si vous utilisez nginx pour servir votre domaine personnalisé, la configuration du proxy inverse ressemblera à ceci :

    # 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 que vous avez redéployé votre application, l'accès au stockage d'origine croisée ne devrait plus se produire.

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

Une autre façon d'éliminer l'accès au stockage d'origine croisée consiste à héberger automatiquement le code d'aide à la connexion Firebase. Cependant, cette approche ne fonctionne pas pour la connexion Apple ou SAML. Utilisez cette option uniquement si la configuration du proxy inverse dans l’option 3 est irréalisable.

L'hébergement du code d'assistance comporte les étapes suivantes :

  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/__/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 les fichiers périodiquement pour garantir que les dernières corrections de bogues et fonctionnalités sont récupérées.

  3. Suivez les étapes de l'option 1 pour mettre à jour redirect_uri autorisé et votre authDomain . Une fois que vous avez redéployé votre application, l'accès au stockage d'origine croisée ne devrait plus se produire.

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

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

API modulaire 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);

API avec espace de noms 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);

Après avoir appelé signInWithCredential() , le reste de votre application fonctionne de la même manière qu’auparavant.

Les instructions pour obtenir un identifiant Apple sont ici .