Nutzer mit Google anmelden

In diesem Artikel erfahren Sie, wie Sie Nutzer mit Identity Platform in Google anmelden.

Hinweis

In dieser Anleitung wird davon ausgegangen, dass Sie Identity Platform bereits aktiviert und eine einfache Webanwendung erstellt haben, die mit HTML und JavaScript geschrieben wurde. Weitere Informationen dazu finden Sie in der Kurzanleitung.

Google als Anbieter konfigurieren

So konfigurieren Sie Google als Identitätsanbieter:

  1. Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.

    Zur Seite "Identitätsanbieter"

  2. Klicken Sie auf Anbieter hinzufügen.

  3. Wählen Sie Google aus der Liste aus.

  4. Geben Sie Ihre Google Web-Client-ID und das Web-Secret ein. Wenn noch keine ID und kein Secret haben, können Sie diese auf der APIs und Dienste Seite.

  5. Konfigurieren Sie den unter Google konfigurieren aufgeführten URI als gültigen OAuth-Weiterleitungs-URI für Ihre Google-Anwendung. Wenn Sie in Identity Platform eine benutzerdefinierte Domain konfiguriert haben, aktualisieren Sie den Weiterleitungs-URI in der Google App-Konfiguration, damit die benutzerdefinierte Domain anstelle der Standarddomain verwendet wird. Ändern Sie beispielsweise https://myproject.firebaseapp.com/__/auth/handler zu https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Klicken Sie unter Autorisierte Domains auf Domain hinzufügen, um die Domains Ihrer Anwendung zu registrieren. Für Entwicklungszwecke ist localhost bereits standardmäßig aktiviert.

  7. Klicken Sie unter Anwendung konfigurieren auf Einrichtungsdetails. Kopieren Sie das Snippet in den Code Ihrer Anwendung, um das Identity Platform Client SDK zu initialisieren.

  8. Klicken Sie auf Speichern.

Nutzer mit dem Client SDK anmelden

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

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Webversion 8

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js

  1. Optional: Fügen Sie OAuth-Bereiche hinzu. Die Bereiche legen fest, welche Daten Sie von Google anfordern. Für sensiblere Daten sind möglicherweise spezielle Bereiche erforderlich. In der Dokumentation des Anbieters können Sie ermitteln, welche Bereiche Ihre Anwendung benötigt.

    Web version 9

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

    Webversion 8

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

  1. Optional: Lokalisieren Sie den Authentifizierungsablauf. Sie können eine Sprache angeben oder die Standardsprache des Geräts verwenden:

    Web version 9

    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

    Webversion 8

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

  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an. Sie gelten speziell für Google und werden meist verwendet, um das Authentifizierungserlebnis anzupassen. Sie können keine von OAuth oder Identity Platform reservierten Parameter übergeben.

Webversion 9

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

Webversion 8

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

  1. Verwenden Sie das Google-Anbieterobjekt, um den Nutzer anzumelden. Sie können entweder ein Pop-up-Fenster öffnen oder die aktuelle Seite weiterleiten. Für Nutzer von Mobilgeräten ist die Weiterleitung einfacher.

    Rufen Sie signInWithPopup() auf, um ein Pop-up-Fenster einzublenden:

    Web version 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;
    // 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

    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;
    // 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

    Rufen Sie zum Weiterleiten der Seite zuerst signInWithRedirect() auf.

    Beachten Sie die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden.

    Webversion 9

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

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

    Webversion 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    Rufen Sie dann das Google-Token beim Laden der Seite ab. Rufen Sie dazu getRedirectResult() auf:

    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;
    // 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 version 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;
    // 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

Sobald Sie ein Zugriffstoken haben, können Sie es zum Aufrufen der Google API verwenden. Beispiel:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

Nutzer manuell anmelden

Wenn Sie das Client SDK nicht verwenden möchten, können Sie den Anmeldevorgang auch manuell ausführen:

  1. Binden Sie die Google-Authentifizierung in Ihre Anwendung ein. Folgen Sie dazu den Schritten in der Entwicklerdokumentation.

  2. Melden Sie sich in Google an. Verwenden Sie dazu den Ablauf, den Sie im vorherigen Schritt implementiert haben.

  3. Tauschen Sie das Token, das Sie von Google erhalten, gegen Anmeldedaten für Identity Platform ein:

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);
    auth_google_provider_credential.js

    Web version 8

    var credential = firebase.auth.GoogleAuthProvider.credential(idToken);
    google-signin.js

  4. Verwenden Sie die Anmeldedaten, um den Nutzer mit Identity Platform anzumelden:

    Web version 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });
    auth_signin_credential.js

    Web version 8

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });
    index.js

Nächste Schritte