Google Log-in in Ihre Webanwendung einbinden

<ph type="x-smartling-placeholder">

Google Log-in verwaltet den OAuth 2.0-Vorgang und den Lebenszyklus von Tokens. eine vereinfachte Einbindung in Google APIs. Nutzende haben immer die Möglichkeit, Zugriff widerrufen jederzeit bewerben.

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, muss über Anmeldedaten zur Autorisierung verfügen. über die die Anwendung beim 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 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. (Ein Clientschlüssel ist auch erstellt wurde, benötigen ihn aber nur für serverseitige Vorgänge.)

Google Platform-Bibliothek laden

Sie müssen die Google Platform Library in Ihre Webseiten aufnehmen, auf denen Google Log-in.

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

Client-ID der Anwendung angeben

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

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

Google Log-in-Schaltfläche hinzufügen

Die einfachste Methode zum Hinzufügen einer Google Log-in-Schaltfläche zu Ihrer Website ist die Verwendung eines automatisch gerenderte Anmeldeschaltfläche. Mit nur wenigen Codezeilen können Sie eine Schaltfläche hinzufügen, die sich automatisch so konfiguriert, dass sie den entsprechenden Text enthält, Logo sowie Farben für den Anmeldestatus des Nutzers und die von Ihnen angeforderten Bereiche.

Wenn du eine Google Log-in-Schaltfläche mit den Standardeinstellungen erstellen möchtest, füge eine div hinzu mit der Klasse g-signin2 zu Ihrer Anmeldeseite 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.

Verwenden Sie zum Abrufen von Profilinformationen für einen Nutzer 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.
}

Nutzer abmelden

Du kannst es Nutzern ermöglichen, sich von deiner App abzumelden, ohne dich von Google abzumelden. Gehe dazu wie folgt vor: eine Abmeldeschaltfläche oder einen Link zu Ihrer Website hinzufügen. Um einen Abmeldelink zu erstellen, hängen Sie eine Funktion, die die GoogleAuth.signOut() zum Ereignis onclick des Links hinzu.

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