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

Ce document décrit les bonnes pratiques à suivre pour utiliser les connexions de redirection dans 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.

Présentation

Pour que le Flux signInWithRedirect() pour vous et vos utilisateurs, le SDK JavaScript Firebase Authentication utilise 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 les applications tierces l'accès à l'espace de stockage.

Il est rare de demander à vos utilisateurs de désactiver les fonctionnalités de partitionnement du stockage dans le navigateur. C'est pourquoi nous vous conseillons plutôt d'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 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 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é 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. Ce garantit que votre application et l'iFrame d'authentification utilisent le même domaine, ce qui empêche le problème de connexion. (Si vous n'utilisez pas Firebase Hosting, vous devez utiliser un option différente). Assurez-vous d'avoir configuré le domaine personnalisé sur le même que vous utilisez pour l'authentification.

Pour mettre à jour votre configuration Firebase afin d'utiliser votre domaine personnalisé comme domaine d'authentification : les éléments suivants:

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

  1. Ajoutez le nouveau authDomain à la liste des noms autorisés de votre fournisseur OAuth des URI de redirection. La procédure dépend du fournisseur, mais en général, vous pouvez suivre la section "Avant de commencer" dans n'importe quel fournisseur pour connaître instructions (par exemple, fournisseur Facebook). L'URI mis à jour vers ressemble à https://<the-domain-that-serves-your-app>/__/auth/handler : fin /__/auth/handler est important.

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

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

  3. Si nécessaire, effectuez un nouveau déploiement 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() au lieu de signInWithRedirect(). La le reste du code de votre application reste le même, mais l'objet UserCredential est récupérées 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 pop-ups sont parfois bloqués par l'appareil ou la plate-forme, et le flux est moins fluide pour les mobinautes. Si vous utilisez pop-ups posent problème pour votre application, suivez l'une des autres procédures options.

Option 3: Envoyer des 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 de Firebase (".firebaseapp.com" par défaut). authDomain héberge l'outil d'aide à la connexion. code qui redirige vers le fournisseur d'identité qui, en cas de réussite, redirige au domaine de l'application.

Lorsque le flux d'authentification revient dans le domaine de votre application, le stockage le domaine de l'outil d'aide à la connexion est accessible. Cette option et les le suivant (pour auto-héberger le code) élimine l'accès au stockage multi-origine, qui autrement est bloqué par les navigateurs.

  1. Configurez un proxy inverse sur votre serveur d'applications afin que les requêtes GET/POST vers Les https://<app domain>/__/auth/ sont transférées à https://<project>.firebaseapp.com/__/auth/. Assurez-vous que ce transfert est transparent pour le navigateur. vous ne pouvez pas le faire 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 la procédure décrite dans l'article Option 1 pour mettre à jour les éléments redirect_uri autorisés, l'URL ACS et votre authDomain. Une fois que vous aurez redéployé votre application, l'accès au stockage multi-origine ne devrait plus avoir lieu.

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

Un autre moyen d'éliminer l'accès au stockage multi-origine consiste à héberger l'auto-hébergement le code d'aide à la connexion Firebase. Toutefois, cette approche ne fonctionne pas pour Apple de connexion ou SAML. N'utilisez cette option que si la configuration du proxy inverse 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 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 dans 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 que les dernières corrections de bugs et fonctionnalités sont activées.

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

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

Le SDK Firebase Authentication fournit signInWithPopup() et signInWithRedirect() en tant que des méthodes pratiques pour intégrer une logique complexe et éviter d'avoir à impliquer un autre SDK. Vous pouvez éviter d'utiliser l'une ou l'autre méthode en signant indépendamment à votre fournisseur, puis en utilisant signInWithCredential() jusqu'à et échanger les identifiants du fournisseur contre des identifiants Firebase Authentication. Par exemple, vous pouvez utiliser la SDK Google Sign-In exemple de code pour obtenir des identifiants de compte Google, puis instanciez 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 comme précédemment.

Pour obtenir des identifiants Apple, suivez les instructions ci-dessous : cliquez ici.