Ce document explique comment utiliser Firebase Authentication pour connecter des utilisateurs à un compte Chrome qui utilise Manifest V3.
Firebase Authentication fournit plusieurs méthodes d'authentification pour connecter les utilisateurs depuis une extension Chrome, dont certaines nécessitent 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
Importez-les depuis firebase/auth/web-extension
:
- Se connecter avec une adresse e-mail et un mot de passe (
createUserWithEmailAndPassword
etsignInWithEmailAndPassword
) - Se connecter avec un lien envoyé par e-mail (
sendSignInLinkToEmail
,isSignInWithEmailLink
etsignInWithEmailLink
) - Se connecter en mode anonyme (
signInAnonymously
) - Se connecter avec un système d'authentification personnalisé (
signInWithCustomToken
) - Gérer la connexion au fournisseur indépendamment, puis utiliser
signInWithCredential
Les méthodes de connexion suivantes sont également compatibles, mais nécessitent un travail supplémentaire:
- Se connecter à l'aide d'une fenêtre pop-up (
signInWithPopup
,linkWithPopup
etreauthenticateWithPopup
) - Se connecter en redirigeant vers la page de connexion (
signInWithRedirect
,linkWithRedirect
etreauthenticateWithRedirect
) - Se connecter avec un numéro de téléphone avec reCAPTCHA
- Authentification multifacteur par SMS avec reCAPTCHA
- Protection reCAPTCHA Enterprise
Pour utiliser ces méthodes dans une extension Chrome Manifest V3, vous devez utiliser Documents hors écran :
Utiliser le point d'entrée firebase/auth/web-extension
L'importation depuis firebase/auth/web-extension
permet de se connecter
Extension Chrome semblable à une application Web.
firebase/auth/web-extension n'est compatible qu'avec les versions v10.8.0 du SDK Web et versions 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 ils nécessitent que du code soit chargé
depuis l'extérieur du package d'extension.
À partir de Manifest V3, cela n'est pas autorisé et sera bloqué par le
plate-forme d'extension. Pour contourner ce problème, vous pouvez charger ce code dans un iFrame à l'aide d'un document hors écran.
Dans le document hors écran, implémentez le flux d'authentification normal et proxy le résultat du document hors écran vers l'extension.
Ce guide utilise signInWithPopup
comme exemple, mais le même concept
s'applique à d'autres
méthodes d'authentification.
Avant de commencer
Cette technique nécessite la configuration d'une page Web disponible sur le Web, que vous allez charger dans un iFrame. Tout hôte prend en charge cette opération, 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 la connexion avec Google, Apple, SAML ou OIDC, vous devez ajouter l'ID de votre extension Chrome à la liste des domaines autorisés :
- Ouvrez votre projet dans la console Firebase.
- Dans la section Authentification, ouvrez la page Paramètres.
- Ajoutez un URI semblable à celui-ci à la liste des domaines autorisés:
chrome-extension://
CHROME_EXTENSION_ID
Dans le fichier manifeste de votre extension Chrome, veillez à ajouter les éléments suivants :
URL de la liste d'autorisation 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 unique. Il existe deux façons d'implémenter une méthode directement pris en charge dans l'extension:
- Utilisez
firebase/auth
plutôt quefirebase/auth/web-extension
. Le point d'entréeweb-extension
est destiné au code exécuté dans l'extension. Bien que ce code s'exécute finalement dans l'extension (dans un iFrame, dans votre document hors écran), il s'exécute dans le contexte Web standard. - Encapsulez la logique d'authentification dans un écouteur
postMessage
afin de mettre en proxy la requête 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éer votre extension Chrome
Une fois votre site Web en ligne, vous pouvez l'utiliser dans votre extension Chrome.
- Ajoutez l'autorisation
offscreen
à votre fichier manifest.json: - 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 du code JavaScript de votre document hors écran:
- Incluez
offscreen.js
dans votre package d'extension. Il sert de proxy entre le site Web public configuré à l'étape 1 et votre extension. - Configurez le document hors écran à partir du service worker background.js.
{ "name": "signInWithPopup Demo", "manifest_version" 3, "background": { "service_worker": "background.js" }, "permissions": [ "offscreen" ] }
<!DOCTYPE html> <script src="./offscreen.js"></script>
// 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; }
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, celui-ci crée
le document hors écran et charger
le site dans un iFrame. Cet iFrame traitera
en arrière-plan, et Firebase passe par le processus d'authentification
le flux de travail. Une fois le problème résolu ou rejeté, l'objet d'authentification
sera transmis par proxy depuis votre iFrame vers votre service worker, à l'aide de l'option
document.