Wyświetl przycisk Zaloguj się przez Google

Dodaj do swojej strony przycisk Zaloguj się przez Google, aby umożliwić użytkownikom rejestrację lub zalogować się w aplikacji internetowej. Użyj kodu HTML lub JavaScript do renderowania przycisku oraz aby dostosować kształt, rozmiar, tekst i motyw przycisku.

Spersonalizowany przycisk logowania.

Gdy użytkownik wybierze konto Google i wyrazi zgodę, Google udostępnia profil użytkownika za pomocą tokena internetowego JSON (JWT). Informacje o tym, jak wygląda proces logowania i jakie ma to znaczenie dla użytkownika, 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

Przed dodaniem przycisku do strony logowania wykonaj te czynności:

Renderowanie przycisku

Aby wyświetlić przycisk Zaloguj się przez Google, możesz użyć kodu HTML lub JavaScriptu do renderowania 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 na tej samej stronie wyświetlić przycisk Zaloguj się przez Google i Google One Tap, usuń data-auto_prompt="false". Zalecamy to, aby zmniejszyć trudności i poprawić współczynnik logowania.

Pełną listę atrybutów danych znajdziesz w dokumentacji g_id_signin strona

JavaScript

Wyświetl przycisk logowania za pomocą JavaScriptu, zwracając token JWT do obsługi wywołania zwrotnego JavaScriptu 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 buttonDiv jest używany do renderowania kliknij przycisk na stronie. Przycisk jest dostosowywany za pomocą atrybutów określoną w drugim parametrze do renderButton.

Aby ułatwić użytkownikom obsługę, aplikacja google.accounts.id.prompt() jest wywoływana do wyświetlania jedno dotknięcie jako druga alternatywa dla użycia przycisku do rejestracji lub logowania;

Biblioteka GIS analizuje dokument HTML pod kątem elementów z atrybutem identyfikatora ustawionym na g_id_onload lub atrybutami klasy zawierającymi 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, tzn. z konfliktowymi parametrami, nie dodawaj elementów HTML o tych nazwach do swoich stron HTML.

Język przycisku

Język przycisku jest określany automatycznie na podstawie domyślnego ustawienia przeglądarki język lub preferencje 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 udzieleniu zgody przez użytkownika Google zwraca dane logowania tokena internetowego JSON (JWT). nazywanym tokenem identyfikatora, który jest wysyłany do przeglądarki użytkownika lub bezpośrednio do logowania. który jest hostowany przez Twoją platformę.

Wybór miejsca otrzymania tokena JWT zależy od tego, czy przycisk jest renderowany za pomocą HTML lub JavaScript oraz czy używany jest tryb UX wyskakującego okienka lub przekierowania.

Tryb UX popup służy do logowania się w wyskakującym okienku. To jest mniej uciążliwe dla użytkowników i jest domyślnym trybem UX.

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 data-login_uri Ustawienie obu wartości może być przydatne podczas debugowania za pomocą funkcji obsługi wywołania zwrotnego.

JavaScript

Musisz podać atrybut callback. Tryb wyskakującego okienka nie obsługuje przekierowań podczas wypożyczania przycisku w JavaScripcie. Jeśli jest skonfigurowana, zasada login_uri jest ignorowana.

Zobacz obsługę zwróconej odpowiedzi dotyczącej danych logowania, aby uzyskać więcej informacji na temat dekodowania JWT w module obsługi wywołania zwrotnego JS.

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 login_uri na identyfikator URI punktu końcowego logowania.

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

Identyfikator URI punktu logowania

Konfigurując data-login_uri lub login_uri, używaj 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.