Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Firebase in einer Chrome-Erweiterung authentifizieren

In diesem Dokument erfahren Sie, wie Sie Nutzer mit Firebase Authentication in einer Chrome-Erweiterung anmelden, die Manifest V3 verwendet.

Firebase Authentication bietet mehrere Authentifizierungsmethoden zum Anmelden von Nutzern über eine Chrome-Erweiterung. Einige erfordern mehr Entwicklungsaufwand als andere.

Wenn Sie die folgenden Methoden in einer Chrome-Erweiterung mit Manifest V3 verwenden möchten, müssen Sie sie nur aus firebase/auth/web-extension importieren:

Mit E-Mail-Adresse und Passwort anmelden (createUserWithEmailAndPassword und signInWithEmailAndPassword)
Mit E-Mail-Link anmelden (sendSignInLinkToEmail, isSignInWithEmailLink und signInWithEmailLink)
Anonym anmelden (signInAnonymously)
Mit einem benutzerdefinierten Authentifizierungssystem anmelden (signInWithCustomToken)
Anmeldung beim Anbieter unabhängig verarbeiten und dann signInWithCredential verwenden

Die folgenden Anmeldemethoden werden ebenfalls unterstützt, erfordern aber zusätzlichen Aufwand:

Mit einem Pop‑up-Fenster anmelden (signInWithPopup, linkWithPopup und reauthenticateWithPopup)
Anmelden durch Weiterleitung zur Anmeldeseite (signInWithRedirect, linkWithRedirect und reauthenticateWithRedirect)
Mit Telefonnummer anmelden mit reCAPTCHA
Multi-Faktor-Authentifizierung per SMS mit reCAPTCHA
reCAPTCHA Enterprise-Schutz

Wenn Sie diese Methoden in einer Chrome-Erweiterung mit Manifest V3 verwenden möchten, müssen Sie Offscreen Documents verwenden.

Einstiegspunkt „firebase/auth/web-extension“ verwenden

Durch den Import aus firebase/auth/web-extension ähnelt die Anmeldung von Nutzern über eine Chrome-Erweiterung der Anmeldung über eine Webanwendung.

firebase/auth/web-extension wird nur in Web-SDK-Versionen ab v10.8.0 unterstützt.

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

Offscreen-Dokumente verwenden

Einige Authentifizierungsmethoden wie signInWithPopup, linkWithPopup und reauthenticateWithPopup sind nicht direkt mit Chrome-Erweiterungen kompatibel, da Code von außerhalb des Erweiterungspakets geladen werden muss. Ab Manifest V3 ist dies nicht mehr zulässig und wird von der Erweiterungsplattform blockiert. Um dieses Problem zu umgehen, können Sie den Code in einem iFrame mit einem Offscreen-Dokument laden. Implementieren Sie im Offscreen-Dokument den normalen Authentifizierungsablauf und leiten Sie das Ergebnis aus dem Offscreen-Dokument zurück an die Erweiterung.

In dieser Anleitung wird signInWithPopup als Beispiel verwendet. Das gleiche Konzept gilt jedoch auch für andere Authentifizierungsmethoden.

Hinweis

Für diese Methode müssen Sie eine Webseite einrichten, die im Web verfügbar ist und die Sie in einem iFrame laden. Dafür kann ein beliebiger Host verwendet werden, z. B. 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>

Wenn Sie die föderierte Anmeldung verwenden, z. B. die Anmeldung mit Google, Apple, SAML oder OIDC, müssen Sie die ID Ihrer Chrome-Erweiterung der Liste der autorisierten Domains hinzufügen:

Öffnen Sie Ihr Projekt in der Firebase-Konsole.
Ö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 die folgenden URLs der content_security_policy-Zulassungsliste hinzu:

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, der die Authentifizierung übernimmt. Es gibt zwei verschiedene Möglichkeiten, eine Methode zu implementieren, die direkt in der Erweiterung unterstützt wird:

Verwenden Sie firebase/auth/web-extension in Ihrem Erweiterungscode, z. B. in Hintergrundskripts, Service Workern oder Pop-up-Skripts. Verwenden Sie firebase/auth nur in Ihrem Offscreen-iFrame, da dieser iFrame in einem Standard-Webseitenkontext ausgeführt wird.
Schließen Sie die Authentifizierungslogik in einen postMessage-Listener ein, um die Authentifizierungsanfrage und -antwort 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

Nachdem Ihre Website veröffentlicht wurde, können Sie sie in Ihrer Chrome-Erweiterung verwenden.

Fügen Sie die Berechtigung offscreen der Datei „manifest.json“ hinzu:

    {
      "name": "signInWithPopup Demo",
      "manifest_version" 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": [
        "offscreen"
      ]
    }

Erstellen Sie das Offscreen-Dokument. Dies ist eine minimale HTML-Datei in Ihrem Erweiterungspaket, die die Logik Ihres Offscreen-Dokument-JavaScript lädt:

    <!DOCTYPE html>
    <script src="./offscreen.js"></script>

Fügen Sie offscreen.js in Ihr Erweiterungspaket ein. Sie fungiert als Proxy zwischen der in Schritt 1 eingerichteten öffentlichen Website und Ihrer Erweiterung.

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

Richten Sie das Offscreen-Dokument über Ihren Service Worker „background.js“ ein.

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

    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 nun firebaseAuth() in Ihrem Service Worker aufrufen, wird das Offscreen-Dokument erstellt und die Website in einem iFrame geladen. Dieser iFrame wird im Hintergrund verarbeitet und Firebase durchläuft den Standardauthentifizierungsablauf. Sobald das Problem behoben oder der Antrag abgelehnt wurde, wird das Authentifizierungsobjekt über das Offscreen-Dokument von Ihrem iFrame an Ihren Service Worker weitergeleitet.

Mit Firebase in einer Chrome-Erweiterung authentifizieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.