Wyświetl przycisk Zaloguj się przez Google

Dodaj do swojej witryny przycisk Zaloguj się przez Google, aby umożliwić użytkownikom rejestrowanie się i logowanie w aplikacji internetowej. Użyj kodu HTML lub JavaScript, aby renderować przycisk, oraz atrybutów, aby dostosować kształt, rozmiar, tekst i motyw przycisku.

Przycisk logowania dostosowanego do potrzeb użytkownika.

Gdy użytkownik wybierze konto Google i wyraży zgodę, Google udostępnia profil użytkownika za pomocą tokena internetowego JSON (JWT). Informacje o tym, jak wygląda proces logowania i jakie wrażenia ma użytkownik, znajdziesz w sekcji Jak to działa. Poznaj przycisk spersonalizowany zawiera informacje o różnych warunkach i stanach, które wpływają 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 wyrenderowania przycisku na stronie logowania:

HTML

Wyświetl przycisk logowania za pomocą kodu HTML, zwracając token JWT do punktu końcowego logowania platformy.

<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 na podstawie parametrów podanych w atrybutach danych.

Aby wyświetlić przycisk Zaloguj się przez Google i Google One Tap na tej samej stronie, 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 g_id_signin

JavaScript

Wyświetl przycisk logowania za pomocą JavaScriptu, zwracając token JWT do obsługi wywołania zwrotnego JavaScriptu przeglądarki.

<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 funkcji renderButton wyświetla się jako przycisk Zaloguj się przez Google. W tym przykładzie ciąg buttonDiv służy do renderowania przycisku na stronie. Przycisk jest dostosowywany za pomocą atrybutów określonych w drugim parametrze funkcji renderButton.

Aby zminimalizować trudności użytkowników, wywołujemy google.accounts.id.prompt(), aby wyświetlić opcję One Tap jako drugą alternatywę dla przycisku rejestracji lub logowania.

Biblioteka GIS analizuje dokument HTML pod kątem elementów z atrybutem identyfikatora ustawionym na g_id_onload lub atrybuty klasy zawierające g_id_signin. Jeśli zostanie znaleziony element pasujący do przycisku, zostanie on wyrenderowany za pomocą kodu HTML, niezależnie od tego, czy został też wyrenderowany za pomocą kodu JavaScript. Aby uniknąć wyświetlania przycisku dwukrotnie (np. z konfliktującymi się parametrami), nie dodawaj elementów HTML o tych nazwach do stron HTML.

Język przycisku

Język przycisku jest automatycznie określany na podstawie domyślnego języka przeglądarki lub preferencji użytkownika sesji Google. Język możesz też wybrać 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 kodzie HTML lub locale w kodzie JavaScript.

HTML

Ten fragment kodu pokazuje, jak wyświetlić język przycisku w języku francuskim. Aby to zrobić, dodaj parametr hl do adresu URL biblioteki klienta i ustaw atrybut data-locale na French:

<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 po francusku. Aby to zrobić, dodaj parametr hl do adresu URL biblioteki klienta i wywołaj metodę google.accounts.id.renderButton, ustawiając parametr locale na French.

<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

Po uzyskaniu zgody użytkownika Google zwraca do przeglądarki użytkownika lub bezpośrednio do punktu logowania hostowanego przez Twoją platformę token sieciowy JSON (JWT) znany jako token identyfikacyjny.

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 wyskakującego okienka czy przekierowania.

W trybie UX popup proces logowania jest wyświetlany w wyskakującym okienku. Jest to ogólnie mniej inwazyjne dla użytkowników i jest domyślnym trybem interakcji.

Podczas renderowania przycisku za pomocą:

HTML

Możesz ustawić:

  • data-callback, aby zwrócić token JWT do modułu 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 obie wartości są ustawione, parametr data-callback ma pierwszeństwo przed parametrem data-login_uri. Ustawienie obu wartości może być przydatne podczas debugowania za pomocą funkcji obsługi wywołania zwrotnego.

JavaScript

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

Więcej informacji o dekodowaniu JWT w obsługiwanym przez Ciebie wywołaniu zwrotnym JavaScript znajdziesz w artykule handle the returned credential response (obsługa zwracanej odpowiedzi z danymi logowania).

Tryb przekierowania

Tryb redirect UX wykonuje proces logowania za pomocą przekierowania całej strony w przeglądarce użytkownika, a Google zwraca token JWT bezpośrednio do punktu logowania za pomocą żądania POST. Jest to zwykle bardziej inwazyjne dla użytkowników, ale jest uważane za najbezpieczniejszą metodę logowania.

Podczas renderowania przycisku za pomocą:

  • HTML: opcjonalnie ustaw data-login_uri na identyfikator URI punktu logowania.
  • JavaScript opcjonalnie ustaw parametr login_uri na identyfikator URI punktu logowania.

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

Identyfikator URI punktu logowania

Podczas konfigurowania wartości data-login_uri lub login_uri użyj protokołu HTTPS i bezwzględnego identyfikatora URI. Na przykład: https://example.com/path.

HTTP jest dozwolone tylko podczas korzystania z localhosta podczas tworzenia aplikacji:http://localhost/path.

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