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

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

Présentation

Pour simplifier le flux signInWithRedirect() 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.

Dans la mesure où il est rarement possible de demander à vos utilisateurs de désactiver les fonctionnalités de partitionnement du stockage dans le navigateur, appliquez plutôt 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 de votre part.
  • 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: Mettre à jour votre configuration Firebase pour utiliser votre domaine personnalisé en tant que 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é en tant que 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.)

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, mais en général, vous pouvez suivre les instructions de la section "Avant de commencer" de n'importe quel fournisseur (par exemple, le fournisseur Facebook). L'URI mis à jour pour l'autorisation ressemble à https://<the-domain-that-serves-your-app>/__/auth/handler. Le /__/auth/handler de fin est important.

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

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 : elles sont parfois bloquées 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 devez choisir l'une des autres options.

Option 3: Envoyer les requêtes d'authentification par proxy à firebaseapp.com

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

Lorsque le flux d'authentification retourne dans le domaine de votre application, vous accédez à l'espace de stockage du navigateur correspondant au domaine d'aide à la connexion. Cette option et la suivante (pour auto-héberger le code) éliminent l'accès au stockage multi-origine, 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. Elle ne peut pas être effectuée via une redirection 302.

    Si vous utilisez nginx pour diffuser votre domaine personnalisé, la configuration du proxy inverse se présente 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 le fichier 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 se produire.

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

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

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

  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 de mise en œuvre de serveur qui permet de télécharger et d'héberger les fichiers. Nous vous recommandons de télécharger et de synchroniser régulièrement les fichiers pour vous assurer que les dernières corrections de bugs et fonctionnalités sont prises en compte.

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

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

Le SDK Firebase Authentication fournit les méthodes signInWithPopup() et signInWithRedirect() 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 indépendamment à 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 les identifiants d'un compte Google, puis en instancier de nouveaux 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 un identifiant Apple, cliquez ici.