Integracja Logowania przez Google z aplikacją internetową

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

W tym dokumencie opisujemy, jak przeprowadzić podstawową integrację z logowaniem przez Google.

Tworzenie danych uwierzytelniających

Każda aplikacja korzystająca z OAuth 2.0 do uzyskiwania dostępu do interfejsów API Google musi mieć dane uwierzytelniające, które identyfikują aplikację z serwerem Google OAuth 2.0. Poniższy opis wyjaśnia, jak utworzyć dane logowania do projektu. Dzięki temu Twoje aplikacje mogą 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 potrzebny identyfikator klienta. (Tajny klucz klienta też zostanie utworzony, ale będzie potrzebny tylko do operacji po stronie serwera).

Wczytywanie biblioteki Google Platform

Na stronach internetowych, które obsługują Logowanie przez Google, musisz umieścić Bibliotekę Google Platform.

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

Określanie identyfikatora klienta aplikacji

Za pomocą metaelementu 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 przycisku logowania przez Google do witryny jest użycie renderowanego automatycznie przycisku logowania. Wystarczy kilka linijek kodu, by dodać przycisk, który automatycznie konfiguruje się do wyświetlania odpowiedniego tekstu, logo i kolorów odpowiednio do stanu logowania użytkownika i żądanych 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>

Pobierz informacje profilowe

Gdy zalogujesz się w Google przy użyciu zakresów domyślnych, uzyskasz dostęp do identyfikatora Google użytkownika, imienia i nazwiska, adresu URL jego profilu oraz 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>