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:
   WebWeb
   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

   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:
   WebWeb
   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

   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:
   WebWeb
   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

   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

   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:
   WebWeb
   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   auth_google_provider_params.js

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   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:
     WebWeb
     Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

     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

     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“.
     WebWeb
     Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

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

     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:
     WebWeb
     Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

     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

     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.

Fehler beim Vorhandensein eines Kontos mit unterschiedlichen Anmeldedaten beheben

Google dient sowohl als E-Mail-Anbieter als auch als Anbieter sozialer Identität. E-Mail-IdPs sind für alle E-Mail-Adressen, die mit ihrer gehosteten E-Mail-Domain in Verbindung stehen, verbindlich sind, während soziale IdPs E-Mail-Identitäten auf der Grundlage einer einmaligen Bestätigung der E-Mail-Adresse durchsetzen Nutzer eine Anmeldung über Google führt nie zu diesem Fehler, wenn ihr Konto bei Google gehostet wird, auch nicht zu diesem Fehler. wenn sie sich mit einem Passwort oder einem Identitätsanbieter eines sozialen Netzwerks für ihr Konto registriert haben.

Wenn Sie in der Firebase-Konsole die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben, Ein Nutzer versucht, sich mit einer E-Mail-Adresse bei einem Anbieter wie Google anzumelden, für den Anbieter eines anderen Firebase-Nutzers (z. B. Facebook) existiert, wird der Fehler auth/account-exists-with-different-credential wird zusammen mit einem AuthCredential-Objekt (Google-ID-Token). Schließen Sie die Anmeldung im muss sich der Nutzer zuerst beim vorhandenen Anbieter (Facebook) anmelden und dann auf den früheres AuthCredential (Google-ID-Token).

Pop-up-Modus

Wenn Sie signInWithPopup verwenden, können Sie auth/account-exists-with-different-credential Fehler mit einem Code wie dem folgenden Beispiel:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Google credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Weiterleitungsmodus

Dieser Fehler wird im Weiterleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehende Anmeldedaten müssen zwischen Seitenweiterleitungen im Cache gespeichert werden (z. B. über Sitzungsspeicher).

Erweitert: Anmeldevorgang manuell ausführen

Sie können sich auch mit einem Google-Konto bei Firebase authentifizieren, indem Sie Anmeldevorgang mit der „Über Google anmelden“-Bibliothek:

1. Integriere „Über Google anmelden“ in deine App, indem du der Leitfaden für den Einstieg. Konfigurieren Sie Google Log-in mit der Google Client-ID, die für Ihr Firebase-Projekt generiert wurde. Sie finden die Google-Client-ID Ihres Projekts in der Developers Console auf der Seite "Anmeldedaten" Ihres Projekts.
2. Tauschen Sie im Callback für das Anmeldeergebnis das ID-Token aus der Google-Authentifizierungsantwort gegen ein Firebase-Anmeldedaten aus und verwenden Sie es, um sich bei Firebase zu authentifizieren:

   function handleCredentialResponse(response) {
     // Build Firebase credential with the Google ID token.
     const idToken = response.credential;
     const credential = GoogleAuthProvider.credential(idToken);
   
     // Sign in with credential from the Google user.
     signInWithCredential(auth, credential).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 credential that was used.
       const credential = GoogleAuthProvider.credentialFromError(error);
       // ...
     });
   }

Erweitert: Mit Firebase in Node.js authentifizieren

So authentifizieren Sie sich in einer Node.js-Anwendung mit Firebase:

1. Melden Sie den Nutzer mit seinem Google-Konto an und rufen Sie das Google-ID-Token des Nutzers ab. Sie können dies auf verschiedene Arten erreichen. Beispiel:
   • Wenn Ihre App ein Browser-Frontend hat, verwenden Sie Google Log-in wie beschrieben im Feld Handle the Abschnitt „Manueller Anmeldevorgang manuell“. Rufe das Google-ID-Token aus der Authentifizierungsantwort ab:

     var id_token = googleUser.getAuthResponse().id_token

     Senden Sie dieses Token dann an Ihre Node.js-Anwendung.
   • Wenn Ihre App auf einem Gerät mit eingeschränkten Eingabefunktionen ausgeführt wird, z. B. einem Fernseher, können Sie die Google Anmeldung für Fernseher und Geräte.
2. Nachdem du das Google-ID-Token des Nutzers erhalten hast, kannst du damit Anmeldedaten erstellen und melden Sie sich dann mit den Anmeldedaten an:
   WebWeb
   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

   import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";
   
   // Build Firebase credential with the Google ID token.
   const credential = GoogleAuthProvider.credential(id_token);
   
   // Sign in with credential from the Google user.
   const auth = getAuth();
   signInWithCredential(auth, credential).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_build_signin.js

   // Build Firebase credential with the Google ID token.
   var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
   
   // Sign in with credential from the Google user.
   firebase.auth().signInWithCredential(credential).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

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.

Weiterleitungsdomain für Google Log-in anpassen

Bei der Projekterstellung stellt Firebase eine eindeutige Subdomain für Ihr Projekt bereit: https://my-app-12345.firebaseapp.com

Diese wird auch als Weiterleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domain muss für alle unterstützten OAuth-Anbieter zulässig sein. Das bedeutet jedoch, dass Nutzer wenn Sie sich in Google anmelden, bevor Sie zur Anwendung zurückkehren: Weiter zu: https://my-app-12345.firebaseapp.com.

Wenn Sie verhindern möchten, dass Ihre Subdomain angezeigt wird, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

1. Folgen Sie den Schritten 1 bis 3 unter Domain für Hosting einrichten. Nach der Bestätigung Ihrer Domaininhaberschaft erhalten, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
2. Fügen Sie Ihre benutzerdefinierte Domain der Liste der autorisierten Domains in der Firebase-Konsole: auth.custom.domain.com.
3. Setzen Sie in der Google Developer Console oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die weiße Liste. auf die Sie in Ihrer benutzerdefinierten Domain zugreifen können: https://auth.custom.domain.com/__/auth/handler
4. Beim Initialisieren der JavaScript-Bibliothek geben Sie Ihre benutzerdefinierte Domain mit dem Feld authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'PROJECT_ID.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://PROJECT_ID.firebaseio.com',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_ID'
   };
   firebase.initializeApp(config);

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:

WebWeb

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

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

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