Logowanie przez Google zarządza przepływem pracy OAuth 2.0 i cyklem życia tokena, co upraszcza integrację z interfejsami API Google. Użytkownik może w dowolnym momencie unieważnić dostęp do aplikacji.
Ten dokument zawiera opis podstawowej integracji funkcji Logowanie przez Google.
Tworzenie danych logowania
Każda aplikacja, która uzyskuje dostęp do interfejsów API Google z użyciem protokołu OAuth 2.0, musi mieć dane uwierzytelniające, które identyfikują aplikację na serwerze OAuth 2.0 Google. Poniżej wyjaśniamy, jak utworzyć dane logowania w projekcie. Twoje aplikacje mogą następnie 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 > 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. Będzie Ci potrzebny do wykonania kolejnych kroków. Zostanie też utworzony tajny klucz klienta, ale będzie potrzebny tylko w przypadku operacji po stronie serwera.
Wczytaj bibliotekę Google Platform
Musisz dodać Bibliotekę Google Platform na swoich stronach internetowych, na których jest włączona Logowanie przez Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Podaj identyfikator klienta aplikacji
Określ identyfikator klienta utworzony dla 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 przez Google
Najłatwiejszym sposobem dodania przycisku logowania Google do witryny jest użycie automatycznie renderowanego przycisku logowania. Wystarczy, że dodasz tylko kilka wierszy kodu, a potem dodasz przycisk, który automatycznie doda odpowiedni tekst, logo i kolory odpowiednio do stanu logowania użytkownika i zakresów.
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ę przez użytkownika w Google przy użyciu zakresów domyślnych, uzyskasz dostęp do jego identyfikatora Google, imienia i nazwiska, adresu URL profilu oraz adresu e-mail.
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 wylogowanie się z aplikacji bez wylogowywania się z Google przez dodanie przycisku wylogowania lub linku do witryny. Aby utworzyć link do wylogowania, dołącz do zdarzenia onclick linka 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>