Integracja Logowania przez Google z aplikacją internetową

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

Z tego dokumentu dowiesz się, jak przeprowadzić podstawową integrację z Zalogowaniem w 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ć poświadczenia autoryzacyjne, które identyfikują ją na serwerze OAuth 2.0 Google. Poniżej znajdziesz instrukcje tworzenia danych logowania do projektu. Twoje aplikacje mogą wtedy używać tych danych logowania do uzyskiwania dostępu do interfejsów API, które zostały włączone 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. Podaj nazwę klienta OAuth 2.0 i kliknij Utwórz.

Po zakończeniu konfiguracji zapisz utworzony identyfikator klienta. Aby wykonać kolejne czynności, musisz mieć identyfikator klienta. (Tworzony jest też klucz klienta, ale potrzebujesz go tylko do operacji po stronie serwera).

Wczytaj bibliotekę Google Platform

Na stronach internetowych, które integrują logowanie przez Google, musisz uwzględnić Bibliotekę Google Platform.

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

Określanie identyfikatora klienta aplikacji

W polu metaelementu google-signin-client_id podaj identyfikator klienta utworzony dla aplikacji w Konsoli Google Play.

<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 Google jest użycie automatycznie renderowanego przycisku logowania. Wystarczy kilka linii kodu, aby dodać przycisk, który automatycznie skonfiguruje się tak, aby wyświetlać odpowiedni tekst, logo i kolory w zależności od stanu logowania użytkownika i zakresów, o które prosisz.

Aby utworzyć przycisk Zaloguj się 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 z profilu

Po zalogowaniu się użytkownika za pomocą Google przy użyciu domyślnych zakresów możesz uzyskać dostęp do jego identyfikatora Google, 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 wylogowanie się z aplikacji bez wylogowywania się z Google. Aby to zrobić, dodaj przycisk wylogowywania lub link do swojej witryny. Aby utworzyć link do wylogowania, dodaj do zdarzenia onclick funkcji linku funkcję, która wywołuje 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>