Google Sign-in verwaltet den OAuth 2.0-Ablauf und den Token-Lebenszyklus und vereinfacht so die Integration mit Google APIs. Nutzer haben jederzeit die Möglichkeit, den Zugriff auf eine Anwendung zu widerrufen.
In diesem Dokument wird beschrieben, wie Sie eine einfache Google-Anmeldung einrichten.
Anmeldedaten für die Autorisierung erstellen
Für jede Anwendung, die OAuth 2.0 für den Zugriff auf Google APIs verwendet, müssen Autorisierungsanmeldedaten vorhanden sein, mit denen die Anwendung auf dem OAuth 2.0-Server von Google identifiziert wird. In den folgenden Schritten wird beschrieben, 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.
- Go to the Clients page.
- Klicken Sie auf Create Client.
- Wählen Sie den Anwendungstyp Webanwendung aus.
- Geben Sie einen Namen für Ihren 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, den Sie aber nur für serverseitige Vorgänge benötigen.
Google Platform Library laden
Sie müssen die Google Platform Library auf Ihren Webseiten einbinden, auf denen Google Log-in verwendet wird.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Client-ID Ihrer App angeben
Geben Sie die Client-ID an, die Sie für Ihre App in der Google Developers Console erstellt haben, und verwenden Sie dazu das google-signin-client_id-Meta-Element.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">Google Log-in-Schaltfläche hinzufügen
Am einfachsten fügen Sie Ihrer Website eine „Über Google anmelden“-Schaltfläche hinzu, indem Sie eine automatisch gerenderte Anmeldeschaltfläche verwenden. Mit nur wenigen Codezeilen können Sie eine Schaltfläche hinzufügen, die automatisch mit dem entsprechenden Text, Logo und den entsprechenden Farben für den Anmeldestatus des Nutzers und die von Ihnen angeforderten Bereiche konfiguriert wird.
Wenn Sie eine Schaltfläche „Über Google anmelden“ 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 Google mit den Standardskopes 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
Sie können Nutzern ermöglichen, sich aus Ihrer App abzumelden, ohne sich von Google abzumelden. Dazu müssen Sie Ihrer Website eine Schaltfläche oder einen Link zum Abmelden hinzufügen. Wenn Sie einen Abmeldelink erstellen möchten, hängen Sie eine Funktion, die die Methode GoogleAuth.signOut() aufruft, an das onclick-Ereignis des Links an.
<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>