Jesteśmy zaprzestanie Platform Biblioteka Google Sign-In JavaScript do sieci . Dla uwierzytelniania i logowania użytkownika, użyj Google Identity Services SDK dla obu sieci i Androida zamiast.

Integracja logowania Google z Twoją aplikacją internetową

Logowanie przez Google zarządza przepływem i cyklem życia tokena OAuth 2.0, upraszczając integrację z interfejsami API Google. Użytkownik zawsze ma możliwość cofnięcia dostępu do aplikacji w dowolnym momencie.

W tym dokumencie opisano, jak zakończyć podstawową integrację logowania Google.

Utwórz dane uwierzytelniające

Każda aplikacja korzystająca z protokołu OAuth 2.0 w celu uzyskania dostępu do interfejsów API Google musi mieć dane uwierzytelniające identyfikujące aplikację na serwerze Google OAuth 2.0. Poniższe kroki wyjaśniają, jak utworzyć poświadczenia dla projektu. Twoje aplikacje mogą następnie używać poświadczeń do uzyskiwania dostępu do interfejsów API, które zostały włączone dla tego projektu.

  1. Go to the Credentials page.
  2. Kliknij Utwórz dane logowania> Identyfikator klienta OAuth .
  3. Wybierz typ aplikacji internetowej .
  4. Nazwij swojego klienta OAuth 2.0 i kliknij Utwórz

Po zakończeniu konfiguracji zanotuj utworzony identyfikator klienta. Aby wykonać kolejne kroki, będziesz potrzebować identyfikatora klienta. (Tworzony jest również klucz klienta, ale jest on potrzebny tylko do operacji po stronie serwera).

Załaduj bibliotekę Google Platform

Musisz dołączyć Bibliotekę Platformy Google do swoich stron internetowych, które integrują Logowanie Google.

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

Podaj identyfikator klienta swojej aplikacji

Określ identyfikator klienta utworzony dla swojej 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 Google

Najłatwiejszym sposobem dodania przycisku logowania 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 miał odpowiedni tekst, logo i kolory dla stanu logowania użytkownika i żądanych zakresów.

Aby utworzyć przycisk logowania Google korzystający z ustawień domyślnych, dodaj element div z klasą g-signin2 do swojej strony logowania:

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

Poniżej znajduje się przykład domyślnego przycisku logowania Google:

Uzyskaj informacje o profilu

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

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

Wyloguj użytkownika

Możesz umożliwić użytkownikom wylogowanie się z aplikacji bez wylogowywania się z Google, dodając przycisk wylogowania lub link do swojej witryny. Aby utworzyć link wylogowania, dołącz funkcję wywołującą 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>