Integracja Logowania przez Google z aplikacją internetową

Logowanie przez Google zarządza przepływem i cyklem życia tokenów OAuth 2.0, do uproszczenia integracji z interfejsami API Google. Użytkownik zawsze może unieważnić dostęp do aplikacji.

Ten dokument opisuje, jak przeprowadzić podstawową integrację Logowania 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ą aplikację na serwerze Google OAuth 2.0. Poniżej opisujemy, jak utworzysz dane logowania dla swojego projektu. Dzięki temu aplikacje mogą uzyskiwać dostęp do interfejsów API za pomocą danych logowania włączone w tym projekcie.

  1. Go to the Credentials page.
  2. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
  3. Jako typ aplikacji wybierz Aplikacja internetowa.
  4. Nazwij klienta OAuth 2.0 i kliknij Utwórz

Po zakończeniu konfiguracji zapisz identyfikator klienta. Aby wykonać kolejne czynności, będziesz potrzebować identyfikatora klienta. (Tajny klucz klienta jest również został utworzony, ale potrzebujesz go tylko do operacji po stronie serwera).

Wczytaj bibliotekę Google Platform

Na swoich stronach internetowych, które integrują się, musisz umieścić bibliotekę Google Platform 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 z elementem 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 przez Google do witryny jest użycie automatycznie renderowany przycisk logowania. Za pomocą kilku linijek kodu możesz dodać przycisk, który automatycznie się konfiguruje i zawiera odpowiedni tekst, oraz kolory stanu logowania użytkownika i zakresy, o które prosisz.

Aby utworzyć przycisk logowania przez Google z ustawieniami domyślnymi, dodaj div element z klasą g-signin2 na stronie logowania:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Pobierz informacje profilowe

Po zalogowaniu się użytkownika w Google przy użyciu zakresów domyślnych możesz uzyskać dostęp do identyfikatora Google użytkownika, jego nazwy, adresu URL profilu i adresu e-mail.

Aby pobrać informacje profilowe użytkownika, użyj funkcji 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

Aby umożliwić użytkownikom wylogowywanie się z aplikacji bez wylogowywania się z Google, możesz: dodając przycisk wylogowania lub link do witryny. Aby utworzyć link do wylogowania, dołącz funkcję, która wywołuje funkcję 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>