In diesem Dokument erfahren Sie, wie Sie Nutzer mit Firebase Authentication in einem Chrome-Konto anmelden Erweiterung, die Manifest V3 verwendet.
Firebase Authentication bietet mehrere Authentifizierungsmethoden für die Anmeldung von Nutzern eine Chrome-Erweiterung, die teilweise mehr Entwicklungsaufwand erfordert als andere.
Wenn Sie die folgenden Methoden in einer Manifest V3-Chrome-Erweiterung verwenden möchten, benötigen Sie
aus firebase/auth/web-extension
importieren:
- Mit E-Mail-Adresse und Passwort anmelden (
createUserWithEmailAndPassword
undsignInWithEmailAndPassword
) - Mit E-Mail-Link anmelden (
sendSignInLinkToEmail
,isSignInWithEmailLink
undsignInWithEmailLink
) - Anonym anmelden (
signInAnonymously
) - Mit einem benutzerdefinierten Authentifizierungssystem (
signInWithCustomToken
) anmelden - Anbieteranmeldung unabhängig verarbeiten und dann
signInWithCredential
verwenden
Die folgenden Anmeldemethoden werden ebenfalls unterstützt, erfordern jedoch einige zusätzliche Schritte:
- Über ein Pop-up-Fenster anmelden (
signInWithPopup
,linkWithPopup
undreauthenticateWithPopup
) - Anmeldung über die Anmeldeseite (
signInWithRedirect
,linkWithRedirect
undreauthenticateWithRedirect
) - Über reCAPTCHA mit Telefonnummer anmelden
- Multi-Faktor-Authentifizierung per SMS mit reCAPTCHA
- reCAPTCHA Enterprise-Schutz
Wenn Sie diese Methoden in einer Manifest V3-Chrome-Erweiterung verwenden möchten, müssen Sie Nicht sichtbare Dokumente:
Einstiegspunkt „firebase/auth/web-extension“ verwenden
Durch den Import aus firebase/auth/web-extension
werden Nutzer aus einer
Chrome-Erweiterung, die einer Web-App ähnelt.
firebase/auth/web-extension wird nur in den Web SDK-Versionen v10.8.0 unterstützt. und höher.
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; });
Nicht sichtbare Dokumente verwenden
Einige Authentifizierungsmethoden, z. B. signInWithPopup
, linkWithPopup
und
reauthenticateWithPopup
, nicht direkt mit Chrome-Erweiterungen kompatibel sind,
da Code von außerhalb des Erweiterungspakets geladen werden muss.
Ab Manifest V3 ist dies nicht mehr zulässig und wird vom
Erweiterungsplattform. Um dies zu umgehen, können Sie diesen Code
in einen iFrame mit einem Offscreen-Dokument.
Implementieren Sie in dem nicht sichtbaren Dokument den normalen Authentifizierungsvorgang und stellen Sie einen Proxy für
aus dem nicht sichtbaren Dokument
an die Erweiterung zurück.
In diesem Leitfaden wird signInWithPopup
als Beispiel verwendet, aber das Konzept ist gleich.
für andere Authentifizierungsmethoden gilt.
Hinweis
Für diese Technik müssen Sie eine Webseite einrichten, die im Web verfügbar ist, die Sie in einem iFrame laden. Jeder Host kann dies tun, einschließlich Firebase Hosting. Erstellen Sie eine Website mit folgendem Inhalt:
<!DOCTYPE html> <html> <head> <title>signInWithPopup</title> <script src="signInWithPopup.js"></script> </head> <body><h1>signInWithPopup</h1></body> </html>
Föderierte Anmeldung
Wenn Sie eine föderierte Anmeldung verwenden, z. B. die Anmeldung über Google, Apple, SAML oder OIDC ist, müssen Sie Ihre Chrome-Erweiterungs-ID der Liste der autorisierten Domains:
- Öffnen Sie Ihr Projekt in der Firebase Console.
- Öffnen Sie im Bereich Authentifizierung die Seite Einstellungen.
- Fügen Sie der Liste der autorisierten Domains einen URI wie den folgenden hinzu:
chrome-extension://
CHROME_EXTENSION_ID
Fügen Sie in der Manifestdatei Ihrer Chrome-Erweiterung Folgendes hinzu:
URLs zur Zulassungsliste für content_security_policy
:
https://apis.google.com
https://www.gstatic.com
https://www.googleapis.com
https://securetoken.googleapis.com
Authentifizierung implementieren
In Ihrem HTML-Dokument ist „signInWithPopup.js“ der JavaScript-Code, mit dem Authentifizierung. Es gibt zwei Möglichkeiten, eine Methode zu implementieren, direkt in der Erweiterung unterstützt wird:
- Verwende
firebase/auth
stattfirebase/auth/web-extension
. Derweb-extension
-Einstiegspunkt ist für Code, der innerhalb der Erweiterung ausgeführt wird. Während dieser Code schließlich in der Erweiterung ausgeführt wird (in einem iFrame, in Ihrem nicht sichtbaren Dokument), wird er jedoch im Standardwebbereich ausgeführt. - Verpacken Sie die Authentifizierungslogik in einen
postMessage
-Listener, um die Authentifizierungsanfrage und -antwort über einen Proxy weiterzuleiten.
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) } });
Chrome-Erweiterung erstellen
Sobald Ihre Website online ist, können Sie sie in Ihrer Chrome-Erweiterung verwenden.
- Fügen Sie der Datei „manifest.json“ die Berechtigung „
offscreen
“ hinzu: - Erstellen Sie das Offscreen-Dokument selbst. Hierbei handelt es sich um eine minimale HTML-Datei in Ihrem Erweiterungspaket, Lädt die Logik des JavaScript-Codes für Ihr nicht sichtbares Dokument:
- Fügen Sie Ihrem Erweiterungspaket
offscreen.js
hinzu. Es fungiert als Proxy zwischen den der in Schritt 1 eingerichteten öffentlichen Website und Ihrer Erweiterung. - Richten Sie das Offscreen-Dokument von Ihrem background.js-Service Worker ein.
{ "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; }
Wenn Sie firebaseAuth()
jetzt in Ihrem Service Worker aufrufen, wird das Offscreen-Dokument erstellt und die Website in einem iFrame geladen. Dieser iFrame verarbeitet
im Hintergrund ausgeführt werden und Firebase
durchläuft die Standardauthentifizierung
Ablauf. Sobald das Problem behoben oder abgelehnt wurde,
wird über den Offscreen-Bildschirm
von Ihrem iFrame an Ihren Service Worker weitergeleitet
Dokument.