Die JavaScript-Plattformbibliothek für die Google Log-in wird für das Web eingestellt. Die Mediathek steht nach dem 31. März 2023 nicht mehr zum Download zur Verfügung. Verwenden Sie stattdessen die neuen Google Identity-Dienste für Web.
Standardmäßig hat die Erstellung neuer Client-IDs aufgrund der früheren Plattformbibliothek keine Auswirkungen. Bestehende Client-IDs sind davon nicht betroffen. Bei neuen Client-IDs, die vor dem 29. Juli 2022 erstellt wurden, kann `plugin_name` festgelegt werden, damit die Bibliothek verwendet werden kann.

Integration von Google Sign-In in Ihre Web-App

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Google Sign-In verwaltet den OAuth 2.0-Fluss und Token-Lebenszyklus und vereinfacht so Ihre Integration mit 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-Anmeldeintegration durchführen.

Autorisierungsdaten erstellen

Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google-APIs verwendet, muss über Autorisierungsdaten verfügen, die die Anwendung gegenüber dem 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 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. Sie benötigen die Client-ID, um die nächsten Schritte auszuführen. (Ein geheimer Clientschlüssel wird ebenfalls erstellt, Sie benötigen ihn jedoch nur für serverseitige Vorgänge.)

Laden Sie die Google Platform-Bibliothek

Sie müssen die Google Platform Library auf Ihren Webseiten einbinden, auf denen die Google-Anmeldung 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

Am einfachsten fügen Sie Ihrer Website eine Google-Anmeldeschaltfläche hinzu, indem Sie eine automatisch gerenderte Anmeldeschaltfläche verwenden. 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 aufweist.

Um eine Google-Anmeldeschaltfläche zu erstellen, die die Standardeinstellungen verwendet, fügen Sie Ihrer Anmeldeseite ein div -Element mit der Klasse g-signin2 :

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

Profilinformationen erhalten

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.

Um Profilinformationen für einen Benutzer abzurufen, verwenden Sie die Methode 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 Nutzern ermöglichen, sich von Ihrer App abzumelden, ohne sich bei Google abzumelden, indem Sie eine Abmeldeschaltfläche oder einen Link zu Ihrer Website hinzufügen. Hängen Sie zum Erstellen eines Abmeldelinks eine Funktion an, die die Methode GoogleAuth.signOut() an das onclick -Ereignis 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>