Authentification avec Firebase dans une extension Chrome

Ce document vous montre comment utiliser l'authentification Firebase pour connecter les utilisateurs à une extension Chrome qui utilise Manifest V3 .

L'authentification Firebase fournit plusieurs méthodes d'authentification pour connecter les utilisateurs à partir d'une extension Chrome, certaines nécessitant plus d'efforts de développement que d'autres.

Pour utiliser les méthodes suivantes dans une extension Chrome Manifest V3, il vous suffit de les importer depuis firebase/auth/web-extension :

  • Connectez-vous avec votre e-mail et votre mot de passe ( createUserWithEmailAndPassword et signInWithEmailAndPassword )
  • Connectez-vous avec le lien de courrier électronique ( sendSignInLinkToEmail , isSignInWithEmailLink et signInWithEmailLink )
  • Connectez-vous de manière anonyme ( signInAnonymously )
  • Connectez-vous avec un système d'authentification personnalisé ( signInWithCustomToken )
  • Gérez la connexion du fournisseur de manière indépendante, puis utilisez signInWithCredential

Les méthodes de connexion suivantes sont également prises en charge mais nécessitent un travail supplémentaire :

  • Connectez-vous avec une fenêtre contextuelle ( signInWithPopup , linkWithPopup et reauthenticateWithPopup )
  • Connectez-vous en redirigeant vers la page de connexion ( signInWithRedirect , linkWithRedirect et reauthenticateWithRedirect )
  • Connectez-vous avec votre numéro de téléphone avec reCAPTCHA
  • Authentification multifacteur SMS avec reCAPTCHA
  • Protection d'entreprise reCAPTCHA

Pour utiliser ces méthodes dans une extension Chrome Manifest V3, vous devez utiliser Offscreen Documents .

Utilisez le point d'entrée firebase/auth/web-extension

L'importation depuis firebase/auth/web-extension rend la connexion des utilisateurs à partir d'une extension Chrome similaire à une application Web.

firebase/auth/web-extension n'est pris en charge que sur les versions Web SDK v10.8.0 et supérieures.

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth/web-extension';

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Utiliser des documents hors écran

Certaines méthodes d'authentification, telles que signInWithPopup , linkWithPopup et reauthenticateWithPopup , ne sont pas directement compatibles avec les extensions Chrome, car elles nécessitent que le code soit chargé depuis l'extérieur du package d'extension. À partir de Manifest V3, cela n’est pas autorisé et sera bloqué par la plateforme d’extension. Pour contourner ce problème, vous pouvez charger ce code dans une iframe à l'aide d'un document hors écran . Dans le document hors écran, implémentez le flux d’authentification normal et transmettez le résultat du document hors écran à l’extension.

Ce guide utilise signInWithPopup comme exemple, mais le même concept s'applique à d'autres méthodes d'authentification.

Avant que tu commences

Cette technique nécessite de mettre en place une page web disponible sur le web, que vous chargerez dans une iframe. N'importe quel hôte fonctionne pour cela, y compris Firebase Hosting . Créez un site Web avec le contenu suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>signInWithPopup</title>
    <script src="signInWithPopup.js"></script>
  </head>
  <body><h1>signInWithPopup</h1></body>
</html>

Connexion fédérée

Si vous utilisez la connexion fédérée, par exemple avec Google, Apple, SAML ou OIDC, vous devez ajouter votre ID d'extension Chrome à la liste des domaines autorisés :

  1. Ouvrez votre projet dans la console Firebase .
  2. Dans la section Authentification , ouvrez la page Paramètres .
  3. Ajoutez un URI comme celui-ci à la liste des domaines autorisés :
    chrome-extension://CHROME_EXTENSION_ID

Dans le fichier manifeste de votre extension Chrome, assurez-vous d'ajouter les URL suivantes à la liste verte content_security_policy :

  • https://apis.google.com
  • https://www.gstatic.com
  • https://www.googleapis.com
  • https://securetoken.googleapis.com

Implémenter l'authentification

Dans votre document HTML, signInWithPopup.js est le code JavaScript qui gère l'authentification. Il existe deux manières différentes d'implémenter une méthode directement prise en charge dans l'extension :

  • Utilisez firebase/auth plutôt que firebase/auth/web-extension . Le point d’entrée web-extension concerne le code exécuté dans l’extension. Bien que ce code s'exécute finalement dans l'extension (dans une iframe, dans votre document hors écran), le contexte dans lequel il s'exécute est le Web standard.
  • Enveloppez la logique d'authentification dans un écouteur postMessage , afin de transmettre par proxy la demande et la réponse d'authentification.
import { signInWithPopup, GoogleAuthProvider, getAuth } from'firebase/auth';
import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebaseConfig.js'

const app = initializeApp(firebaseConfig);
const auth = getAuth();

// This code runs inside of an iframe in the extension's offscreen document.
// This gives you a reference to the parent frame, i.e. the offscreen document.
// You will need this to assign the targetOrigin for postMessage.
const PARENT_FRAME = document.location.ancestorOrigins[0];

// This demo uses the Google auth provider, but any supported provider works.
// Make sure that you enable any provider you want to use in the Firebase Console.
// https://console.firebase.google.com/project/_/authentication/providers
const PROVIDER = new GoogleAuthProvider();

function sendResponse(result) {
  globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME);
}

globalThis.addEventListener('message', function({data}) {
  if (data.initAuth) {
    // Opens the Google sign-in page in a popup, inside of an iframe in the
    // extension's offscreen document.
    // To centralize logic, all respones are forwarded to the parent frame,
    // which goes on to forward them to the extension's service worker.
    signInWithPopup(auth, PROVIDER)
      .then(sendResponse)
      .catch(sendResponse)
  }
});

Créez votre extension Chrome

Une fois votre site Web en ligne, vous pouvez l'utiliser dans votre extension Chrome.

  1. Ajoutez l'autorisation offscreen à votre fichier manifest.json :
    2.     {
      "name": "signInWithPopup Demo",
      "manifest_version" 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": [
        "offscreen"
      ]
    }
  2. Créez le document hors écran lui-même. Il s'agit d'un fichier HTML minimal à l'intérieur de votre package d'extension qui charge la logique JavaScript de votre document hors écran :
    3.     <!DOCTYPE html>
    <script src="./offscreen.js"></script>
  3. Incluez offscreen.js dans votre package d’extension. Il fait office de proxy entre le site Web public configuré à l'étape 1 et votre extension.
    4.     // This URL must point to the public site
    const _URL = 'https://example.com/signInWithPopupExample';
    const iframe = document.createElement('iframe');
    iframe.src = _URL;
    document.documentElement.appendChild(iframe);
    chrome.runtime.onMessage.addListener(handleChromeMessages);

    function handleChromeMessages(message, sender, sendResponse) {
      // Extensions may have an number of other reasons to send messages, so you
      // should filter out any that are not meant for the offscreen document.
      if (message.target !== 'offscreen') {
        return false;
      }

      function handleIframeMessage({data}) {
        try {
          if (data.startsWith('!_{')) {
            // Other parts of the Firebase library send messages using postMessage.
            // You don't care about them in this context, so return early.
            return;
          }
          data = JSON.parse(data);
          self.removeEventListener('message', handleIframeMessage);

          sendResponse(data);
        } catch (e) {
          console.log(`json parse failed - ${e.message}`);
        }
      }

      globalThis.addEventListener('message', handleIframeMessage, false);

      // Initialize the authentication flow in the iframed document. You must set the
      // second argument (targetOrigin) of the message in order for it to be successfully
      // delivered.
      iframe.contentWindow.postMessage({"initAuth": true}, new URL(_URL).origin);
      return true;
    }
  4. Configurez le document hors écran à partir de votre service worker background.js.
    5.     const OFFSCREEN_DOCUMENT_PATH = '/offscreen.html';

    // A global promise to avoid concurrency issues
    let creatingOffscreenDocument;

    // Chrome only allows for a single offscreenDocument. This is a helper function
    // that returns a boolean indicating if a document is already active.
    async function hasDocument() {
      // Check all windows controlled by the service worker to see if one
      // of them is the offscreen document with the given path
      const matchedClients = await clients.matchAll();
      return matchedClients.some(
        (c) => c.url === chrome.runtime.getURL(OFFSCREEN_DOCUMENT_PATH)
      );
    }

    async function setupOffscreenDocument(path) {
      // If we do not have a document, we are already setup and can skip
      if (!(await hasDocument())) {
        // create offscreen document
        if (creating) {
          await creating;
        } else {
          creating = chrome.offscreen.createDocument({
            url: path,
            reasons: [
                chrome.offscreen.Reason.DOM_SCRAPING
            ],
            justification: 'authentication'
          });
          await creating;
          creating = null;
        }
      }
    }

    async function closeOffscreenDocument() {
      if (!(await hasDocument())) {
        return;
      }
      await chrome.offscreen.closeDocument();
    }

    function getAuth() {
      return new Promise(async (resolve, reject) => {
        const auth = await chrome.runtime.sendMessage({
          type: 'firebase-auth',
          target: 'offscreen'
        });
        auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth);
      })
    }

    async function firebaseAuth() {
      await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);

      const auth = await getAuth()
        .then((auth) => {
          console.log('User Authenticated', auth);
          return auth;
        })
        .catch(err => {
          if (err.code === 'auth/operation-not-allowed') {
            console.error('You must enable an OAuth provider in the Firebase' +
                          ' console in order to use signInWithPopup. This sample' +
                          ' uses Google by default.');
          } else {
            console.error(err);
            return err;
          }
        })
        .finally(closeOffscreenDocument)

      return auth;
    }

    Désormais, lorsque vous appelez firebaseAuth() dans votre service worker, il créera le document hors écran et chargera le site dans une iframe. Cette iframe sera traitée en arrière-plan et Firebase suivra le flux d'authentification standard. Une fois qu'il a été résolu ou rejeté, l'objet d'authentification sera transmis par proxy de votre iframe à votre service worker, à l'aide du document hors écran.