Google Log-in in Ihre Webanwendung einbinden

Google Log-in verwaltet den OAuth 2.0-Vorgang und den Lebenszyklus von Tokens 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 beschrieben, wie Sie eine grundlegende Integration von Google Log-in durchführen.

Anmeldedaten für die Autorisierung erstellen

Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google APIs verwendet, benötigt Autorisierungsanmeldedaten, die die Anwendung beim 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 das 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. Benennen Sie Ihren OAuth 2.0-Client 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. (Auch ein Clientschlüssel wird erstellt, aber Sie benötigen ihn nur für serverseitige Vorgänge.)

Google Platform-Bibliothek laden

Du musst die Google Platform Library in deine Webseiten einbinden, auf denen Google Log-in eingebunden ist.

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

Client-ID der Anwendung angeben

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

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

Google Log-in-Schaltfläche hinzufügen

Am einfachsten kannst du deiner Website eine Google Log-in-Schaltfläche hinzufügen, indem du eine automatisch gerenderte Anmeldeschaltfläche verwendest. Mit nur wenigen Codezeilen können Sie eine Schaltfläche hinzufügen, die sich automatisch so konfiguriert, dass sie den entsprechenden Text, das Logo und die Farben für den Anmeldestatus des Nutzers und die von Ihnen angeforderten Bereiche enthält.

Wenn du eine Google Log-in-Schaltfläche erstellen möchtest, die die Standardeinstellungen verwendet, 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 einen Nutzer über 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.

Verwenden Sie die Methode getBasicProfile(), um Profilinformationen für einen Nutzer abzurufen.

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

Du kannst es Nutzern ermöglichen, sich von deiner App abzumelden, ohne sich bei Google abzumelden, indem du eine Abmeldeschaltfläche oder einen Link zu deiner Website hinzufügst. Um einen Abmeldelink zu erstellen, hängen Sie eine Funktion an, die die Methode GoogleAuth.signOut() an das Ereignis onclick des Links aufruft.

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