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 für die Google-Anmeldung verwenden oder den Anmeldevorgang manuell mit der „Über Google anmelden“-Bibliothek ausführen und und übergeben das ID-Token an Firebase.

Hinweis

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

Anmeldevorgang mit dem Firebase SDK durchführen

Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer zu authentifizieren. mit Firebase über ihre Google-Konten das Firebase JavaScript SDK. Wenn Sie einen Nutzer in Node.js oder einer anderen nicht browserbasierten Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell abwickeln.

Gehen Sie wie folgt vor, um den Anmeldevorgang mit dem Firebase JavaScript SDK durchzuführen: Schritte:

  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 Authentifizierungsanbieter beantragen möchten. Um einen Bereich hinzuzufügen, rufen Sie addScope 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
    Siehe Authentifizierungsanbieter Dokumentation.
  3. Optional: Um den OAuth-Ablauf des Anbieters für den vom Nutzer bevorzugten Dienst zu lokalisieren ohne die relevanten benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisieren Sie auf der Auth-Instanz, bevor Sie den OAuth-Ablauf starten. 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: Zusätzliche benutzerdefinierte OAuth-Anbieterparameter angeben die Sie mit der OAuth-Anfrage senden möchten. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters beim initialisierten Anbieter mit einem Objekt, das den Schlüssel enthält wie in der Dokumentation des OAuth-Anbieters angegeben, und im entsprechenden Wert. 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. Siehe Weitere Informationen finden Sie in der Referenz des Authentifizierungsanbieters.
  5. Authentifizieren Sie sich bei Firebase mithilfe des Google-Anbieterobjekts. Sie können Nutzer auffordern, sich mit ihren Google-Konten anzumelden. Dazu können Sie ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode ist 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 erkennen und beheben. Eine Liste der Fehlercodes finden Sie in der Referenzdokumentation zur Authentifizierung.

    • Wenn Sie sich durch Weiterleitung zur Anmeldeseite anmelden möchten, rufen Sie signInWithRedirect auf: Folgen Sie den Best Practices für die Verwendung von „signInWithWeiterleitung“.

      Web

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

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

      Web

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

      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 erkennen und beheben. Eine Liste der Fehlercodes finden Sie in der Referenzdokumentation zur Authentifizierung.

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine App für eine Chrome-Erweiterung erstellen, lesen Sie die Leitfaden zu nicht sichtbaren Dokumenten.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, 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. Sie können dann die E-Mail-Adresse des Nutzers abrufen, grundlegende Profilinformationen aus dem User-Objekt. 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 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