Wyświetl przycisk Zaloguj się przez Google

Dodaj do swojej witryny przycisk Zaloguj się przez Google, aby umożliwić użytkownikom rejestrację lub logowanie w aplikacji internetowej. Do renderowania przycisku i atrybutów służących do dostosowywania jego kształtu, rozmiaru, tekstu i motywu możesz użyć kodu HTML lub JavaScript.

spersonalizowany przycisk logowania,

Gdy użytkownik wybierze konto Google i wyrazi zgodę, Google udostępni jego profil za pomocą tokena internetowego JSON (JWT). Omówienie czynności wykonywanych podczas logowania i wrażeń użytkownika znajdziesz w artykule Jak to działa. Informacje o spersonalizowanym przycisku zawierają opis różnych warunków i stanów wpływających na sposób wyświetlania przycisku użytkownikom.

Wymagania wstępne

Aby skonfigurować ekran zgody OAuth, uzyskać identyfikator klienta i wczytać bibliotekę klienta, wykonaj czynności opisane w sekcji Konfiguracja.

Renderowanie przycisku

Aby wyświetlić przycisk Zaloguj się przez Google, możesz użyć kodu HTML lub JavaScript do renderowania przycisku na stronie logowania:

HTML

Renderuj przycisk logowania za pomocą kodu HTML, zwracając token JWT do punktu końcowego logowania na platformie.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

Element z klasą g_id_signin jest renderowany jako przycisk Zaloguj się przez Google. Przycisk jest dostosowywany za pomocą parametrów podanych w atrybutach danych.

Aby wyświetlić na tej samej stronie przycisk Zaloguj się przez Google i Google One Tap, usuń data-auto_prompt="false". Zalecamy to, aby zmniejszyć trudności i zwiększyć współczynnik logowania.

Pełną listę atrybutów danych znajdziesz na stronie referencyjnej g_id_signin

JavaScript

Renderuj przycisk logowania za pomocą JavaScriptu, zwracając token JWT do obsługi wywołania zwrotnego JavaScript w przeglądarce.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

Element określony jako pierwszy parametr renderButton jest wyświetlany jako przycisk Zaloguj się przez Google. W tym przykładzie do renderowania przycisku na stronie używany jest element buttonDiv. Przycisk jest dostosowywany za pomocą atrybutów określonych w drugim parametrze renderButton.

Aby zminimalizować trudności użytkowników, wywoływana jest funkcja google.accounts.id.prompt(), która wyświetla One Tap jako drugą alternatywę dla użycia przycisku do rejestracji lub logowania.

Biblioteka GIS analizuje dokument HTML pod kątem elementów z atrybutem ID ustawionym na g_id_onload lub atrybutami klasy zawierającymi g_id_signin. Jeśli zostanie znaleziony pasujący element, przycisk zostanie wyrenderowany za pomocą kodu HTML, niezależnie od tego, czy został on wyrenderowany w JavaScript. Aby uniknąć wyświetlania przycisku 2 razy, być może z konfliktowymi parametrami, nie umieszczaj na stronach HTML elementów HTML pasujących do tych nazw.

Język przycisku

Język przycisku jest automatycznie określany przez domyślny język przeglądarki lub preferencje użytkownika sesji Google. Możesz też wybrać język ręcznie, dodając parametr hl i kod języka do dyrektywy src podczas wczytywania biblioteki oraz dodając opcjonalny parametr data-locale lub locale data-locale w HTML-u albo locale w JavaScript.

HTML

Ten fragment kodu pokazuje, jak wyświetlić język przycisku w języku francuskim, dodając parametr hl do adresu URL biblioteki klienta i ustawiając atrybut data-locale na język francuski:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Ten fragment kodu pokazuje, jak wyświetlić język przycisku w języku francuskim, dodając parametr hl do adresu URL biblioteki klienta i wywołując metodę google.accounts.id.renderButton z parametrem locale ustawionym na język francuski:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Obsługa danych logowania

Gdy użytkownik wyrazi zgodę, Google zwróci token internetowy JSON (JWT) znany jako token identyfikatora do przeglądarki użytkownika lub bezpośrednio do punktu końcowego logowania hostowanego przez Twoją platformę.

Miejsce, w którym chcesz otrzymywać token JWT, zależy od tego, czy renderujesz przycisk za pomocą kodu HTML czy JavaScript oraz czy używasz trybu UX wyskakującego okienka czy przekierowania.

W trybie UX popup proces logowania odbywa się w wyskakującym okienku. Zwykle jest to mniej uciążliwe dla użytkowników i jest to domyślny tryb UX.

Podczas renderowania przycisku za pomocą:

HTML

Możesz ustawić:

  • data-callback, aby zwrócić token JWT do obsługi wywołania zwrotnego, lub
  • data-login_uri aby Google wysłało token JWT bezpośrednio do punktu końcowego logowania za pomocą żądania POST.

Jeśli ustawione są obie wartości, data-callback ma pierwszeństwo przed data-login_uri. Ustawienie obu wartości może być przydatne podczas korzystania z obsługi wywołania zwrotnego do debugowania.

JavaScript

Musisz określić callback, ponieważ tryb wyskakującego okienka nie obsługuje przekierowań podczas renderowania przycisku w JavaScript. Jeśli jest ustawiony, login_uri jest ignorowany.

Więcej informacji o dekodowaniu tokena JWT w module obsługi wywołania zwrotnego JS znajdziesz w artykule Obsługa odpowiedzi na zwrócone dane logowania.

Tryb przekierowania

W trybie UX redirect proces logowania odbywa się za pomocą przekierowania całej strony w przeglądarce użytkownika, a Google zwraca token JWT bezpośrednio do punktu końcowego logowania za pomocą żądania POST. Zwykle jest to bardziej uciążliwe dla użytkowników, ale uważa się, że jest to najbezpieczniejsza metoda logowania.

Podczas renderowania przycisku za pomocą:

  • HTML opcjonalnie ustaw data-login_uri na identyfikator URI punktu końcowego logowania.
  • JavaScript opcjonalnie ustaw login_uri na identyfikator URI punktu końcowego logowania.

Jeśli nie podasz wartości, Google zwróci token JWT do identyfikatora URI bieżącej strony.

Identyfikator URI punktu końcowego logowania

Podczas ustawiania data-login_uri lub login_uri używaj protokołu HTTPS i bezwzględnego identyfikatora URI. Na przykład https://example.com/path.

Protokół HTTP jest dozwolony tylko podczas korzystania z hosta lokalnego w trakcie programowania: http://localhost/path.

Pełny opis wymagań i reguł weryfikacji Google znajdziesz w artykule Używanie bezpiecznych źródeł JavaScript i identyfikatorów URI przekierowania.