Nutzer über eine Chrome-Erweiterung anmelden

In diesem Artikel erfahren Sie, wie Sie Nutzer mit Identity Platform über eine Chrome-Erweiterung anmelden.

Hinweis

  • Aktivieren Sie Identity Platform und konfigurieren Sie einen Identitätsanbieter. Weitere Informationen dazu finden Sie in der Kurzanleitung.

  • Fügen Sie der content_security_policy-Zulassungsliste für die Erweiterung die folgenden URLs hinzu:

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

    Weitere Informationen finden Sie in der CSP-Dokumentation (Content Security Policy).

ID Ihrer Erweiterung registrieren

Um Nutzer über eine Chrome-Erweiterung anzumelden, müssen Sie die ID Ihrer Erweiterung als autorisierte Domain registrieren:

  1. Rufen Sie in der Cloud Console die Identity Platform-Seite Einstellungen auf.

    Zur Seite "Einstellungen"

  2. Wählen Sie den Tab Sicherheit aus.

  3. Klicken Sie unter Autorisierte Domains auf Domain hinzufügen.

  4. Geben Sie den URI der Erweiterung ein. Er sollte etwa folgendermaßen aussehen: chrome-extension://CHROME_EXTENSION_ID

  5. Klicken Sie auf Hinzufügen.

Nutzer anmelden

Die Anmeldung von Nutzern über eine Chrome-Erweiterung funktioniert ähnlich wie bei einer Webanwendung. Es gibt jedoch einige Unterschiede:

  • Telefon- und Multi-Faktor-Authentifizierung werden nicht unterstützt.

  • Chrome-Erweiterungen können keine HTTP-Weiterleitungen verwenden. Daher müssen Sie Pop-up-Vorgänge (signInWithPopup() und linkWithPopup()) verwenden, um Nutzer anzumelden.

  • Durch den Aufruf von Authentifizierungsmethoden aus einer Browseraktion heraus wird die Aktion des Browsers abgebrochen. Rufen Sie die Methoden stattdessen über ein Hintergrundskript auf.

Das folgende Beispiel zeigt die Anmeldung eines Nutzers bei 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);
  });
};

Nächste Schritte