Wycofujemy z biblioteki internetowej biblioteki logowania Google przez Google. Po 31 marca 2023 r. biblioteka nie będzie dostępna do pobrania. Zamiast tego użyj nowych usług tożsamości Google w internecie.
Nowo utworzone identyfikatory klientów są teraz zablokowane przy użyciu starszej biblioteki platformy. Nie ma to wpływu na istniejące identyfikatory klientów. Nowe identyfikatory klienta utworzone przed 29 lipca 2022 roku mogą skonfigurować `plugin_name`, aby umożliwić korzystanie z Biblioteki Google Platform.

Integracja Google Sign-In z Twoją aplikacją internetową

Logowanie przez Google zarządza przepływem OAuth 2.0 i cyklem życia tokena, 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 przeprowadzić podstawową integrację logowania przez 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, które identyfikują aplikację na serwerze Google OAuth 2.0. Poniższe kroki wyjaśniają, jak utworzyć poświadczenia dla swojego projektu. Twoje aplikacje mogą następnie użyć poświadczeń, aby uzyskać dostęp do interfejsów API, które zostały włączone dla tego projektu.

  1. Go to the Credentials page.
  2. Kliknij Utwórz poświadczenia > 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. Do wykonania kolejnych kroków potrzebny będzie identyfikator klienta. (Utworzony zostaje również klucz tajny klienta, ale jest on potrzebny tylko do operacji po stronie serwera).

Załaduj bibliotekę platformy Google

Musisz umieścić Bibliotekę Platformy Google na swoich stronach internetowych, które integrują Logowanie przez Google.

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

Podaj identyfikator klienta swojej aplikacji

Podaj 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 przez Google do witryny jest użycie automatycznie renderowanego przycisku logowania. Za pomocą kilku linijek kodu możesz dodać przycisk, który automatycznie konfiguruje się tak, aby zawierał 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 strony logowania:

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

Uzyskaj informacje o profilu

Po zalogowaniu użytkownika w Google przy użyciu domyślnych zakresów możesz 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ę, która wywołuje 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>