Integracja Logowania przez Google z aplikacją internetową

Logowanie przez Google zarządza procesem i cyklem życia tokenów OAuth 2.0, co upraszcza integrację z interfejsami API Google. Użytkownik może w każdej chwili odwołać dostęp do aplikacji.

Ten dokument zawiera opis sposobu przeprowadzania podstawowej integracji z logowaniem 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ą ją na serwerze Google OAuth 2.0. Poniżej znajdziesz instrukcje tworzenia danych logowania do projektu. Aplikacje mogą następnie używać tych danych logowania, aby uzyskiwać dostęp do interfejsów API włączonych w danym projekcie.

  1. Go to the Credentials page.
  2. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
  3. Wybierz typ aplikacji Aplikacja internetowa.
  4. 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. Zostanie też utworzony tajny klucz klienta, ale potrzebny tylko do operacji po stronie serwera.

Wczytaj bibliotekę Google Platform

Musisz umieścić Bibliotekę Google Platform na swoich stronach internetowych zawierających Logowanie przez Google.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Podaj identyfikator klienta aplikacji

Podaj identyfikator klienta utworzony dla aplikacji w Google Developers Console za pomocą metaelementu google-signin-client_id.

<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, aby dodać przycisk, który automatycznie konfiguruje się tak, aby wyświetlał odpowiedni tekst, logo i kolory odpowiednio do stanu zalogowania 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>

Uzyskaj informacje o profilu

Gdy zalogujesz się w Google za pomocą zakresów domyślnych, uzyskasz 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 umożliwić użytkownikom wylogowywanie się z aplikacji bez wylogowywania się z Google, dodając 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>