Logowanie przez Google zarządza cyklem życia tokenów OAuth 2.0, co upraszcza integrację z interfejsami API Google. Użytkownik zawsze może w każdej chwili odwołać dostęp do aplikacji.
W tym dokumencie opisano, jak przeprowadzić podstawową integrację z logowaniem przez Google.
Utwórz dane logowania
Każda aplikacja korzystająca z protokołu OAuth 2.0 do uzyskiwania dostępu do interfejsów API Google musi mieć dane logowania, które pozwalają zidentyfikować aplikację na serwerze Google OAuth 2.0. Z instrukcji poniżej dowiesz się, jak utworzyć dane logowania do projektu. Aplikacje mogą używać tych danych logowania, aby 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.
- Wybierz typ aplikacji Aplikacja internetowa.
- Nazwij klienta OAuth 2.0 i kliknij Utwórz.
Po zakończeniu konfiguracji zanotuj utworzony identyfikator klienta. Do wykonania kolejnych kroków będzie Ci potrzebny identyfikator klienta. Tworzony jest też tajny klucz klienta, który będzie potrzebny tylko do wykonywania operacji po stronie serwera.
Wczytywanie biblioteki Google Platform
Na stronach internetowych obsługujących Logowanie przez Google należy umieścić bibliotekę Google Platform.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Podaj identyfikator klienta swojej aplikacji
Za pomocą metatagu 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">
Dodawanie przycisku Logowania przez Google
Najprostszym sposobem dodania do witryny przycisku Logowania przez Google jest użycie automatycznie renderowanego przycisku logowania. Wystarczy kilka linijek kodu, by dodać przycisk, który automatycznie konfiguruje się z tekstem, logo i kolorami 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 o profilu
Po zalogowaniu się użytkownika w Google przy użyciu zakresów domyślnych masz 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
Aby umożliwić użytkownikom wylogowywanie się z aplikacji bez wylogowywania się z Google, dodaj przycisk wylogowania lub link do swojej witryny. Aby utworzyć link do wylogowania, dołącz funkcję, która wywołuje metodę GoogleAuth.signOut() do zdarzenia onclick linku.
<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>