Integracja Logowania przez Google z aplikacją internetową

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

Z tego dokumentu dowiesz się, 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ć dane logowania autoryzacji, które identyfikują aplikację na serwerze OAuth 2.0 Google. Poniżej znajdziesz instrukcje tworzenia danych logowania do projektu. Aplikacje mogą wtedy używać danych logowania do uzyskiwania dostępu do interfejsów API włączonych w tym projekcie.

  1. Go to the Clients page.
  2. Kliknij Utwórz klienta.
  3. Wybierz typ aplikacji Aplikacja internetowa.
  4. Nadaj nazwę klientowi OAuth 2.0 i kliknij Utwórz.

Po zakończeniu konfiguracji zapisz utworzony identyfikator klienta. Aby wykonać następne kroki, musisz mieć identyfikator klienta. (Tworzony jest też klucz klienta, ale jest on potrzebny tylko w przypadku operacji po stronie serwera).

Wczytywanie biblioteki Google Platform

Musisz umieścić Bibliotekę platformy Google na stronach internetowych, które integrują 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">

Dodawanie przycisku logowania przez Google

Najprostszym sposobem dodania przycisku logowania przez Google do witryny jest użycie automatycznie renderowanego przycisku logowania. Za pomocą zaledwie kilku wierszy kodu możesz dodać przycisk, który automatycznie konfiguruje się tak, aby zawierał odpowiedni tekst, logo i kolory w zależności od stanu logowania użytkownika i zakresów, o które prosisz.

Aby utworzyć przycisk logowania 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 o profilu

Po zalogowaniu użytkownika za pomocą Google przy użyciu domyślnych zakresów możesz uzyskać dostęp do jego identyfikatora Google, imienia i nazwiska, 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, dodając do witryny przycisk lub link do wylogowania. Aby utworzyć link do wylogowania, dołącz funkcję, która wywołuje metodę GoogleAuth.signOut() w zdarzeniu 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>