Google Log-in in Ihre Webanwendung einbinden

Google Log-in verwaltet den OAuth 2.0-Vorgang und den Token-Lebenszyklus und vereinfacht so die Einbindung in Google APIs. Nutzer haben jederzeit die Möglichkeit, den Zugriff auf eine App zu widerrufen.

In diesem Dokument wird beschrieben, wie Sie eine grundlegende Google Sign-In-Integration vornehmen.

Anmeldedaten für die Autorisierung erstellen

Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google APIs verwendet, muss Autorisierungsdaten enthalten, die die Anwendung für den OAuth 2.0-Server von Google identifizieren. In den folgenden Schritten wird erläutert, wie Sie Anmeldedaten für Ihr Projekt erstellen. Ihre Anwendungen können dann mit den Anmeldedaten auf APIs zugreifen, 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 den OAuth 2.0-Client ein und klicken Sie auf Erstellen.

Notieren Sie sich nach Abschluss der Konfiguration die erstellte Client-ID. Sie benötigen diese für die nächsten Schritte. Es wird auch ein Clientschlüssel erstellt, der jedoch nur für serverseitige Vorgänge erforderlich ist.

Google-Plattformbibliothek laden

Sie müssen die Google Platform Library auf Ihren Webseiten einbinden, auf denen Google Sign-in verwendet wird.

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

Client-ID Ihrer App angeben

Geben Sie mit dem Metaelement google-signin-client_id die Client-ID an, die Sie für Ihre App in der Google Developers Console erstellt haben.

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

Schaltfläche für Google Log-in hinzufügen

Am einfachsten fügen Sie Ihrer Website eine Schaltfläche für die Google-Anmeldung hinzu, indem Sie eine automatisch gerenderte Anmeldeschaltfläche verwenden. Mit nur wenigen Codezeilen können Sie eine Schaltfläche hinzufügen, die sich automatisch mit dem entsprechenden Text, Logo und den Farben für den Anmeldestatus des Nutzers und die angeforderten Berechtigungen konfiguriert.

Wenn Sie eine Schaltfläche für die Google-Anmeldung mit den Standardeinstellungen erstellen möchten, fügen Sie Ihrer Anmeldeseite ein div-Element mit der Klasse g-signin2 hinzu:

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

Profilinformationen abrufen

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

Profilinformationen für einen Nutzer kannst du mit der Methode getBasicProfile() 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 ermöglichen, sich von Ihrer App abzumelden, ohne sich von Google abzumelden. Fügen Sie dazu eine Schaltfläche oder einen Link zum Abmelden auf Ihrer Website hinzu. Wenn du einen Link zum Abmelden erstellen möchtest, verknüpfe eine Funktion, die die Methode GoogleAuth.signOut() aufruft, mit dem Ereignis onclick des Links.

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