Logowanie przez Google zarządza przepływem i cyklem życia tokenów OAuth 2.0, upraszczając integrację z interfejsami API Google. Użytkownik zawsze może w każdej chwili odwołać dostęp do aplikacji.
Ten dokument opisuje, jak przeprowadzić podstawową integrację Logowania przez Google.
Tworzenie danych uwierzytelniających
Każda aplikacja korzystająca z protokołu OAuth 2.0 do uzyskiwania dostępu do interfejsów API Google musi mieć dane uwierzytelniające, które identyfikują aplikację na serwerze Google OAuth 2.0. Poniżej wyjaśniamy, jak utworzyć dane logowania do projektu. Aplikacje mogą wtedy korzystać z tych danych logowania, by uzyskiwać dostęp do interfejsów API włączonych w tym projekcie.
- Go to the Credentials page.
- Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
- Jako typ aplikacji wybierz Aplikacja internetowa.
- Nazwij klienta OAuth 2.0 i kliknij Utwórz
Po zakończeniu konfiguracji zapisz identyfikator klienta. Aby wykonać kolejne czynności, będziesz potrzebować identyfikatora klienta. Tworzony jest też tajny klucz klienta, ale potrzebujesz go tylko do operacji po stronie serwera.
Wczytaj bibliotekę Google Platform
Na swoich stronach internetowych, które obsługują Logowanie przez Google, musisz umieścić bibliotekę Google Platform.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Podaj identyfikator klienta aplikacji
Za pomocą elementu meta google-signin-client_id określ identyfikator klienta utworzony dla aplikacji w Google Developers Console.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
.
Dodaj przycisk Logowania przez Google
Najprostszym sposobem na dodanie do witryny przycisku logowania przez Google jest użycie przycisku logowania renderowanego automatycznie. Wystarczy kilka wierszy kodu, by dodać przycisk, który automatycznie konfiguruje się w taki sposób, aby miał odpowiedni tekst, logo i kolory odpowiednio do stanu logowania użytkownika i żądanych zakresów.
Aby utworzyć przycisk logowania przez Google z ustawieniami domyślnymi, dodaj do strony logowania element div z klasą g-signin2:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Pobierz informacje profilowe
Po zalogowaniu się użytkownika w Google za pomocą zakresów domyślnych będziesz mieć dostęp do identyfikatora Google użytkownika, jego nazwy, adresu URL profilu i adresu e-mail.
Aby pobrać informacje o profilu 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 dodać przycisk wylogowania lub link do swojej witryny, aby umożliwić użytkownikom wylogowywanie się z aplikacji bez wylogowywania się z Google. Aby utworzyć link wylogowania, dołącz do zdarzenia onclick linku funkcję wywołującą 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>