Logowanie przez Google zarządza przepływem OAuth 2.0 i cyklem życia tokena, upraszczając integrację z interfejsami API Google. Użytkownik zawsze ma możliwość cofnięcia dostępu do aplikacji w dowolnym momencie.
W tym dokumencie opisano, jak przeprowadzić podstawową integrację logowania przez Google.
Utwórz dane uwierzytelniające
Każda aplikacja korzystająca z protokołu OAuth 2.0 w celu uzyskania dostępu do interfejsów API Google musi mieć dane uwierzytelniające, które identyfikują aplikację na serwerze Google OAuth 2.0. Poniższe kroki wyjaśniają, jak utworzyć poświadczenia dla swojego projektu. Twoje aplikacje mogą następnie użyć poświadczeń, aby uzyskać dostęp do interfejsów API, które zostały włączone dla tego projektu.
- Go to the Credentials page.
- Kliknij Utwórz poświadczenia > Identyfikator klienta OAuth .
- Wybierz typ aplikacji internetowej .
- Nazwij swojego klienta OAuth 2.0 i kliknij Utwórz
Po zakończeniu konfiguracji zanotuj utworzony identyfikator klienta. Do wykonania kolejnych kroków potrzebny będzie identyfikator klienta. (Utworzony zostaje również klucz tajny klienta, ale jest on potrzebny tylko do operacji po stronie serwera).
Załaduj bibliotekę platformy Google
Musisz umieścić Bibliotekę Platformy Google na swoich stronach internetowych, które integrują Logowanie przez Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Podaj identyfikator klienta swojej aplikacji
Podaj identyfikator klienta utworzony dla swojej aplikacji w Google Developers Console za pomocą elementu meta google-signin-client_id
.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Dodaj przycisk logowania Google
Najłatwiejszym sposobem dodania przycisku logowania przez Google do witryny jest użycie automatycznie renderowanego przycisku logowania. Za pomocą kilku linijek kodu możesz dodać przycisk, który automatycznie konfiguruje się tak, aby zawierał odpowiedni tekst, logo i kolory dla stanu logowania użytkownika i żądanych zakresów.
Aby utworzyć przycisk logowania Google korzystający z ustawień domyślnych, dodaj element div
z klasą g-signin2
do strony logowania:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Uzyskaj informacje o profilu
Po zalogowaniu użytkownika w Google przy użyciu domyślnych zakresów możesz uzyskać dostęp do identyfikatora Google, nazwy, adresu URL profilu i adresu e-mail użytkownika.
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.
}
Wyloguj użytkownika
Możesz umożliwić użytkownikom wylogowanie się z aplikacji bez wylogowywania się z Google, dodając przycisk wylogowania lub link do swojej witryny. Aby utworzyć link wylogowania, dołącz funkcję, która wywołuje 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>