Google Log-in verwaltet den OAuth 2.0-Vorgang und -Lebenszyklus von Tokens und vereinfacht dadurch 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 du eine grundlegende Google Log-in-Integration vornimmst.
Anmeldedaten für die Autorisierung erstellen
Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google APIs verwendet, muss über Autorisierungsanmeldedaten verfügen, 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.
- Go to the Credentials page.
- Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.
- Wählen Sie den Anwendungstyp Webanwendung aus.
- Benennen Sie Ihren OAuth 2.0-Client und klicken Sie auf Erstellen.
Notieren Sie sich nach Abschluss der Konfiguration die Client-ID, die erstellt wurde. Sie benötigen die Client-ID für die nächsten Schritte. Ein Clientschlüssel wird ebenfalls erstellt, wird aber nur für serverseitige Vorgänge benötigt.
Google Platform Library laden
Du musst die Google Platform Library auf deinen 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
Geben Sie die Client-ID an, die Sie in der Google Developers Console für Ihre App erstellt haben, mit dem 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 lässt sich eine Google Log-in-Schaltfläche auf deiner Website mit einer automatisch gerenderten Anmeldeschaltfläche hinzufügen. 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 mit den Standardeinstellungen erstellen möchtest, 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 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 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 von Ihrer App abzumelden, ohne sich von Google abzumelden, indem Sie eine Abmeldeschaltfläche oder einen Link zu Ihrer Website hinzufügen. Wenn Sie einen Abmeldelink erstellen möchten, 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>