Procéder à la connexion des utilisateurs à partir d'une extension Chrome

Ce document explique comment utiliser Identity Platform pour connecter des utilisateurs à partir d'une extension Chrome.

Avant de commencer

  • Activez Identity Platform et configurer un fournisseur d'identité. Pour savoir comment, consultez le guide de démarrage rapide.

  • Ajoutez les URL suivantes à la liste d'autorisations content_security_policy de votre extension :

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

    Pour en savoir plus, consultez la documentation CSP.

Enregistrer l'ID de votre extension

Pour connecter des utilisateurs depuis une extension Chrome, vous devez enregistrer l'ID de l'extension en tant que domaine autorisé :

  1. Accédez à la page Paramètres d'Identity Platform dans Cloud Console.

    Accéder à la page Paramètres

  2. Cliquez sur l'onglet Sécurité.

  3. Dans la section Authorized Domains (Domaines autorisés), cliquez sur Add Domain (Ajouter un domaine).

  4. Saisissez l'URI de votre extension. Cette extension ressemble normalement à ceci : chrome-extension://CHROME_EXTENSION_ID.

  5. Cliquez sur Ajouter.

Procéder à la connexion des utilisateurs

La connexion d'utilisateurs depuis une extension Chrome est semblable à une application Web, à quelques différences près :

  • L'authentification par téléphone et multifacteur n'est pas prise en charge.

  • Les extensions Chrome ne peuvent pas utiliser de redirections HTTP. Vous devez donc utiliser des opérations de pop-up (signInWithPopup() et linkWithPopup()) pour connecter les utilisateurs.

  • L'appel de méthodes d'authentification depuis une action de navigateur annule l'action du navigateur. Vous devez donc plutôt les appeler à partir d'un script en arrière-plan.

L'exemple suivant illustre la connexion d'un utilisateur avec Google :

JavaScript

popup.js

// Get reference to background page.
const bgPage = chrome.extension.getBackgroundPage();
// Sign in with popup, typically attached to a button click.
bgPage.signInWithPopup();

background.js

const app = firebase.initializeApp(config);
const auth = app.auth();
const signInWithPopup = () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  return auth.signInWithPopup(provider).catch((error) => {
    console.log(error);
  });
};

Étape suivante