Google Log-in in Ihre Webanwendung integrieren

Google Log-in verwaltet den OAuth 2.0-Vorgang und den Tokenlebenszyklus und vereinfacht so die Einbindung in Google APIs. Ein Nutzer hat jederzeit die Möglichkeit, den Zugriff auf eine Anwendung zu widerrufen.

In diesem Dokument wird die grundlegende Integration von Google Log-in beschrieben.

Anmeldedaten für die Autorisierung erstellen

Alle Anwendungen, die OAuth 2.0 für den Zugriff auf Google APIs verwenden, benötigen Anmeldedaten für die Autorisierung, mit denen die Anwendung für den OAuth 2.0-Server von Google identifiziert wird. In den folgenden Schritten wird erläutert, wie Sie Anmeldedaten für Ihr Projekt erstellen. Ihre Anwendungen können dann die Anmeldedaten verwenden, um auf APIs zuzugreifen, die Sie für dieses Projekt aktiviert haben.

  1. Go to the Credentials page.
  2. Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.
  3. Wählen Sie den Anwendungstyp Webanwendung aus.
  4. Geben Sie einen Namen für Ihren OAuth 2.0-Client ein und klicken Sie auf Erstellen

Notieren Sie sich nach Abschluss der Konfiguration die erstellte Client-ID. Für die nächsten Schritte benötigen Sie die Client-ID. Ein Clientschlüssel wird ebenfalls erstellt, Sie benötigen ihn aber nur für serverseitige Vorgänge.

Google Platform Library laden

Du musst die Google Platform-Bibliothek auf deinen Webseiten einfügen, auf denen Google Log-in eingebunden ist.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Client-ID Ihrer App angeben

Gib die Client-ID, die du für deine App erstellt hast, in der Google Developers Console mit dem Meta-Element google-signin-client_id an.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Google Log-in-Schaltfläche hinzufügen

Am einfachsten kannst du über eine automatisch gerenderte Anmeldeschaltfläche eine Schaltfläche für die Anmeldung bei Google in deine Website einbinden. Mit nur wenigen Codezeilen können Sie eine Schaltfläche hinzufügen, die automatisch so konfiguriert wird, dass der Text, das Logo und die Farben für den Anmeldestatus des Nutzers und die angeforderten Bereiche passend sind.

Wenn du eine Google Log-in-Schaltfläche mit den Standardeinstellungen erstellen möchtest, füge deiner Anmeldeseite ein div-Element mit der Klasse g-signin2 hinzu:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Profilinformationen abrufen

Nachdem Sie sich bei Google mit den Standardbereichen angemeldet haben, können Sie auf die Google-ID, den Namen, die Profil-URL und die E-Mail-Adresse des Nutzers zugreifen.

Mit der Methode getBasicProfile() können Sie Profilinformationen für einen Nutzer abrufen.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Nutzer abmelden

Sie können Nutzern die Möglichkeit geben, sich aus Ihrer App abzumelden, ohne sich von Google abzumelden. Fügen Sie dazu eine Schaltfläche zum Abmelden oder einen Link zu Ihrer Website hinzu. Wenn Sie einen Abmeldelink erstellen möchten, hängen Sie eine Funktion an, mit der die Methode GoogleAuth.signOut() an das Ereignis onclick des Links gesendet wird.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>