Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Authentifizieren Sie sich über die Google-Anmeldung mit JavaScript

Sie können Ihren Nutzern ermöglichen, sich mit ihren Google-Konten bei Firebase zu authentifizieren, indem Sie Google Log-in in Ihre App integrieren. Sie können die Google-Anmeldung integrieren, indem Sie entweder das Firebase SDK verwenden, um den Anmeldevorgang durchzuführen, oder indem Sie den Google-Anmeldevorgang manuell ausführen und das resultierende ID-Token an Firebase übergeben.

Bevor Sie beginnen

  1. In Firebase zu Ihrem JavaScript - Projekt .
  2. Aktivieren Sie die Google-Anmeldung in der Firebase-Konsole:
    1. In der Firebase Konsole , öffnen Sie den Abschnitt Auth.
    2. Auf dem Anmelden Methode Registerkarte, aktivieren Sie die Google-Anmeldemethode und klicken Sie auf Speichern.

Verwalten Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Nutzer am einfachsten über ihre Google-Konten bei Firebase authentifizieren, indem Sie den Anmeldevorgang mit dem Firebase JavaScript SDK durchführen. (Wenn Sie einen Benutzer in Node.js oder einer anderen Nicht-Browser-Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell durchführen.)

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu handhaben:

  1. Erstellen Sie eine Instanz des Google-Anbieterobjekts:

    Webversion 9

    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();

    Webversion 8

    var provider = new firebase.auth.GoogleAuthProvider();
  2. Optional: Geben Sie zusätzliche OAuth 2.0 Bereiche , die Sie Anfrage vom Authentifizierungs - Provider wollen. Um einen Rahmen hinzuzufügen, rufen Sie addScope . Zum Beispiel:

    Webversion 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    Webversion 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    Siehe die Authentifizierungs - Provider - Dokumentation .
  3. Optional: Um den Anbieter OAuth Fluss in den bevorzugten Sprache des Benutzers zu lokalisieren , ohne explizit die entsprechenden benutzerdefinierte OAuth Parameter übergeben, aktualisieren Sie den Sprachcode auf der Auth - Instanz vor dem OAuth Fluss zu starten. Zum Beispiel:

    Webversion 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Webversion 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth - Anbieter Parameter , die Sie mit dem OAuth Anfrage senden möchten. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters auf dem initialisierten Anbieter mit einem Objekt mit dem Schlüssel wie von der OAuth - Anbieter Dokumentation zu entnehmen und dem entsprechenden Wert. Zum Beispiel:

    Webversion 9

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    Webversion 8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Siehe den Authentifizierungsanbieter Referenz für weitere Details.
  5. Authentifizieren Sie sich bei Firebase mithilfe des Google-Anbieterobjekts. Sie können Ihre Nutzer auffordern, sich mit ihren Google-Konten anzumelden, indem Sie entweder ein Pop-up-Fenster öffnen oder auf die Anmeldeseite umleiten. Die Umleitungsmethode wird auf mobilen Geräten bevorzugt.
    • So melden Sie sich mit einem Pop-up - Fenster, Anruf signInWithPopup :

      Webversion 9

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Webversion 8

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      Beachten Sie auch, dass Sie das OAuth-Token des Google-Anbieters abrufen können, mit dem zusätzliche Daten über die Google-APIs abgerufen werden können.

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes haben einen Blick auf die Auth Reference Docs .

    • Um sich anzumelden , indem auf die Anmeldeseite umgeleitet, rufen signInWithRedirect :

      Webversion 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Webversion 8

      firebase.auth().signInWithRedirect(provider);
      Dann können Sie auch Antworten auf die OAuth - Token des Google - Anbieter durch den Aufruf getRedirectResult wenn Ihre Seite geladen wird :

      Webversion 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Webversion 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes haben einen Blick auf die Auth Reference Docs .

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine Chrome-Erweiterungs-App erstellen, müssen Sie Ihre Chrome-Erweiterungs-ID hinzufügen:

  1. Öffnen Sie das Projekt in der Firebase Konsole .
  2. Im Abschnitt Authentifizierung, öffnen Sie das Anmelde-Verfahren Seite.
  3. Fügen Sie einen URI wie folgt aus der Liste der autorisierten Domains:
    chrome-extension://CHROME_EXTENSION_ID

Nur Popup - Operationen ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) sind auf Chrome - Erweiterungen zur Verfügung, da Chrome - Erweiterungen nicht HTTP - Redirects verwenden können. Sie sollten diese Methoden über ein Hintergrundseitenskript statt über ein Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup - Methoden können nur in Erweiterungen verwendet werden Manifest V2 . Das neuere Manifest V3 erlaubt nur Hintergrund - Skripte in Form von Service - Mitarbeitern, die nicht die Pop - up - Operationen überhaupt durchführen können.

In Ihrer Manifest - Datei macht die Chrome - Erweiterung sicher , dass Sie das Add https://apis.google.com URL zum content_security_policy AllowList.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal anmeldet, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – d. h. Benutzername und Kennwort, Telefonnummer oder Authentifizierungsanbieterinformationen – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Anwendungen, ist der empfohlene Weg , den Auth - Status Ihres Benutzers zu kennen , einen Beobachter auf dem einzustellen Auth Objekt. Sie können dann bekommen den grundlegenden Profilinformationen des Benutzers aus dem User Siehe Benutzer verwalten .

  • In Ihrer Datenbank und Firebase Realtime Cloud Storage Sicherheitsregeln , können Sie die angemeldeten Nutzer die eindeutige Benutzer - ID aus der bekommen auth Variable, und es verwenden , um steuern kann ein Benutzer Zugriff , welche Daten.

Sie können Benutzer erlauben , durch mehrere Authentifizierungsanbieter anmelden, um Ihre App Verknüpfung Auth - Provider - Anmeldeinformationen zu einem vorhandenen Benutzerkonto.

Um einen Benutzer abzumelden, rufen signOut :

Webversion 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Webversion 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});