Logowanie przez Google zarządza przepływem i cyklem życia tokenów OAuth 2.0, upraszczając integrację z interfejsami API Google. Użytkownik 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, która używa OAuth 2.0 do uzyskiwania dostępu do interfejsów API Google, musi mieć poświadczenia autoryzacyjne, które identyfikują ją na serwerze OAuth 2.0 Google. Z tych instrukcji dowiesz się, jak utworzyć poświadczenia tożsamości dla 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.
- Wybierz typ aplikacji Aplikacja internetowa.
- Podaj nazwę klienta OAuth 2.0 i kliknij Utwórz.
Po zakończeniu konfiguracji zapisz identyfikator klienta. Do wykonania kolejnych kroków będziesz potrzebować identyfikatora klienta. (Tworzony jest też klucz klienta, ale potrzebujesz go tylko do operacji po stronie serwera).
Wczytaj bibliotekę Google Platform
Na stronach internetowych, które integrują logowanie przez Google, musisz uwzględnić Bibliotekę Google Platform.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Określanie identyfikatora 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 dodania do witryny przycisku logowania Google jest użycie automatycznie renderowanego przycisku logowania. Wystarczy kilka linii kodu, aby dodać przycisk, który automatycznie skonfiguruje się tak, aby wyświetlać odpowiedni tekst, logo i kolory w zależności od stanu logowania użytkownika i zakresów, o które prosisz.
Aby utworzyć przycisk Zaloguj się przez Google, który korzysta z ustawień domyślnych, dodaj do strony logowania element div z klasą g-signin2:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Pobieranie informacji z profilu
Po zalogowaniu się użytkownika za pomocą Google przy użyciu domyślnych zakresów możesz uzyskać dostęp do jego identyfikatora Google, 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 umożliwić użytkownikom wylogowanie się z aplikacji bez wylogowywania się z Google. Aby to zrobić, dodaj przycisk wylogowywania lub link do swojej witryny. 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>