Integracja Logowania przez Google z aplikacją internetową

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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.

  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. 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>