Logowanie przez Google zarządza cyklem życia protokołu OAuth 2.0 i cyklem życia tokena, upraszczając integrację z interfejsami API Google. Użytkownik może w dowolnym momencie unieważnić dostęp do aplikacji.
W tym dokumencie opisujemy, jak przeprowadzić podstawową integrację z logowaniem przez Google.
Tworzenie danych logowania
Każda aplikacja korzystająca z protokołu OAuth 2.0, która uzyskuje dostęp do interfejsów API Google, musi mieć dane logowania umożliwiające identyfikację aplikacji na serwerze OAuth 2.0 Google. Wykonanie tych czynności wyjaśnia, jak utworzyć dane logowania w projekcie. Aplikacje mogą używać danych logowania do uzyskiwania dostępu do interfejsów API włączonych w tym projekcie.
- Go to the Credentials page.
- Kliknij Utwórz dane logowania i identyfikator klienta OAuth.
- Wybierz typ aplikacji Aplikacja internetowa.
- Nazwij klienta OAuth 2.0 i kliknij Utwórz.
Po zakończeniu konfiguracji zanotuj utworzony identyfikator klienta. Identyfikator klienta jest potrzebny do wykonania kolejnych kroków. Zostanie utworzony też tajny klucz klienta, ale jest potrzebny tylko do operacji po stronie serwera.
Wczytywanie biblioteki Google Platform
Musisz dodać Bibliotekę Google Platform do swoich stron internetowych, które obsługują Logowanie przez Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Określ identyfikator klienta aplikacji
Określ identyfikator klienta utworzony dla aplikacji w Google Developers Console za pomocą elementu google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Dodaj przycisk logowania Google
Najprostszym sposobem dodania przycisku logowania Google do witryny jest użycie automatycznie renderowanego przycisku logowania. Wystarczy kilka wierszy kodu, aby dodać przycisk, który automatycznie konfiguruje odpowiedni tekst, logo i kolory dla stanu logowania użytkownika oraz zakresów, które chcesz uzyskać.
Aby utworzyć przycisk logowania Google z ustawieniami domyślnymi, dodaj do strony logowania element div z klasą g-signin2:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Uzyskaj informacje o profilu
Gdy zalogujesz się w Google za pomocą zakresów domyślnych, uzyskasz dostęp do identyfikatora Google, nazwy, adresu URL profilu i adresu e-mail użytkownika.
Aby pobrać informacje profilowe użytkownika, użyj metody 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.
}
Wylogowywanie użytkownika
Możesz umożliwić użytkownikom wylogowywanie się z aplikacji bez konieczności wylogowywania się z Google przez dodanie przycisku wylogowania lub linku do Twojej witryny. Aby utworzyć link wylogowywania, dołącz do zdarzenia onclick funkcję, która wywołuje metodę GoogleAuth.signOut().
<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>