Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Integration von Google Sign-In in Ihre Web-App

Google Sign-In verwaltet den OAuth 2.0-Fluss und den Token-Lebenszyklus und vereinfacht so die Integration in Google APIs. Ein Benutzer hat immer die Möglichkeit, den Zugriff auf eine Anwendung jederzeit zu widerrufen .

In diesem Dokument wird beschrieben, wie Sie eine grundlegende Google Sign-In-Integration durchführen.

Erstellen Sie Berechtigungsnachweise

Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google-APIs verwendet, muss über Berechtigungsnachweise verfügen, die die Anwendung für den OAuth 2.0-Server von Google identifizieren. In den folgenden Schritten wird erläutert, wie Sie Anmeldeinformationen für Ihr Projekt erstellen. Ihre Anwendungen können dann die Anmeldeinformationen verwenden, um auf APIs zuzugreifen, die Sie für dieses Projekt aktiviert haben.

  1. Go to the Credentials page.
  2. Klicken Sie auf Anmeldeinformationen erstellen> OAuth-Client-ID .
  3. Wählen Sie den Webanwendungsanwendungstyp 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. Sie benötigen die Client-ID, um die nächsten Schritte ausführen zu können. (Ein Client-Geheimnis wird ebenfalls erstellt, aber Sie benötigen es nur für serverseitige Vorgänge.)

Laden Sie die Google Platform Library

Sie müssen die Google Platform Library in Ihre Webseiten aufnehmen, in die Google Sign-In integriert ist.

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

Geben Sie die Client-ID Ihrer App an

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

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

Fügen Sie eine Google-Anmeldeschaltfläche hinzu

Der einfachste Weg, Ihrer Website eine Google-Anmeldeschaltfläche hinzuzufügen, ist die Verwendung einer automatisch gerenderten Anmeldeschaltfläche. 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 Benutzers und die von Ihnen angeforderten Bereiche enthält.

g-signin2 Ihrer g-signin2 ein div Element mit der Klasse g-signin2 , um eine Google g-signin2 mit den Standardeinstellungen zu erstellen:

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

Das folgende Beispiel zeigt die standardmäßige Google-Anmeldeschaltfläche:

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.

Verwenden Sie die Methode getBasicProfile() , um getBasicProfile() für einen Benutzer getBasicProfile() .

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

Melden Sie einen Benutzer ab

Sie können Benutzern ermöglichen, sich von Ihrer App abzumelden, ohne sich von Google abzumelden, indem Sie eine Abmeldeschaltfläche oder einen Link zu Ihrer Website hinzufügen. Um einen GoogleAuth.signOut() zu erstellen, fügen Sie dem onclick Ereignis des Links eine Funktion hinzu, die die GoogleAuth.signOut() -Methode onclick .

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