Mit Google mit JavaScript authentifizieren

Sie können Ihren Nutzern erlauben, sich mit ihren Google-Konten bei Firebase zu authentifizieren. Sie können entweder das Firebase SDK verwenden, um den Google-Anmeldevorgang auszuführen, oder den Anmeldevorgang manuell mit der „Über Google anmelden“-Bibliothek ausführen und das resultierende ID-Token an Firebase übergeben.

Hinweis

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Aktivieren Sie Google als Anmeldemethode in der Firebase Console:
    1. Öffnen Sie in der Firebase Console den Bereich Auth.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode Google und klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Webanwendung entwickeln, ist das Firebase JavaScript SDK die einfachste Möglichkeit, Ihre Nutzer mit ihren Google-Konten bei Firebase zu authentifizieren. Wenn Sie einen Nutzer in Node.js oder einer anderen nicht browserbasierten Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell abwickeln.

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz des Google-Anbieter-Objekts:

    Web

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie vom Authentifizierungsanbieter anfordern möchten. Wenn Sie einen Umfang hinzufügen möchten, rufen Sie addScope auf. Beispiel:

    Web

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

    Web

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    Weitere Informationen finden Sie in der Dokumentation des Authentifizierungsanbieters.
  3. Optional: Wenn du den OAuth-Ablauf des Anbieters in der bevorzugten Sprache des Nutzers lokalisieren möchtest, ohne die entsprechenden benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisiere den Sprachcode in der Auth-Instanz, bevor du den OAuth-Ablauf startest. Beispiel:

    Web

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Anbieterparameter an, die mit der OAuth-Anfrage gesendet werden sollen. Wenn Sie einen benutzerdefinierten Parameter hinzufügen möchten, rufen Sie setCustomParameters beim initialisierten Anbieter mit einem Objekt auf, das den in der OAuth-Anbieterdokumentation angegebenen Schlüssel und den entsprechenden Wert enthält. Beispiel:

    Web

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

    Web

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Weitere Informationen finden Sie in der Referenz zum Authentifizierungsanbieter.
  5. Authentifizieren Sie sich mit Firebase über das Google-Anbieterobjekt. Sie können Nutzer auffordern, sich mit ihren Google-Konten anzumelden, indem Sie ein Pop-up-Fenster öffnen oder sie zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.
    • Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie signInWithPopup:

      Web

      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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Web

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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;
    // ...
  });
      google-signin.js
      Sie können auch das OAuth-Token des Google-Anbieters abrufen, mit dem Sie zusätzliche Daten mithilfe der Google APIs abrufen können.

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

    • Rufen Sie signInWithRedirect auf, um sich anzumelden und zur Anmeldeseite weiterzuleiten: Beachten Sie die Best Practices für die Verwendung von „signInWithRedirect“.

      Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Anschließend können Sie auch das OAuth-Token des Google-Anbieters abrufen, indem Sie beim Laden der Seite getRedirectResult aufrufen:

      Web

      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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Web

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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;
    // ...
  });
      google-signin.js
      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

In einer Chrome-Erweiterung mit Firebase authentifizieren

Wenn Sie eine Chrome-Erweiterung entwickeln, lesen Sie den Leitfaden zu Offscreen-Dokumenten.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.

  • In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das Auth-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

Web

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

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

Web

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