Wyświetl przycisk Zaloguj się przez Google

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

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 związanych z logowaniem się i wrażeniami użytkownika znajdziesz w artykule Jak to działa. Informacje o przycisku spersonalizowanym zawiera informacje o różnych warunkach i stanach wpływające na sposób jego wyświetlania użytkownikom.

Wymagania wstępne

Przed dodaniem przycisku do strony logowania wykonaj następujące czynności:

Renderowanie przycisku

Aby wyświetlić przycisk Zaloguj się przez Google, możesz wybrać kod HTML lub JavaScript, który będzie renderowany na stronie logowania:

HTML

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

<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 renderuje się jako przycisk Zaloguj się przez Google. Przycisk jest dostosowywany na podstawie parametrów podanych w atrybutach danych.

Aby wyświetlać przycisk Zaloguj się przez Google i Google One Tap na tej samej stronie, usuń data-auto_prompt="false". Warto to zrobić, aby zmniejszyć liczbę problemów i poprawić współczynnik logowania.

Pełną listę atrybutów danych znajdziesz na stronie z informacjami o g_id_signin.

JavaScript

Renderuj przycisk logowania za pomocą JavaScriptu, zwracając token JWT do modułu obsługi wywołania zwrotnego JavaScript 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 przycisk buttonDiv służy do renderowania przycisku na stronie. Przycisk jest dostosowywany za pomocą atrybutów określonych w drugim parametrze renderButton.

Aby zminimalizować niedogodności, w aplikacji google.accounts.id.prompt() wyświetla się jedno dotknięcie jako druga alternatywa dla rejestracji lub logowania się za pomocą przycisku.

Biblioteka GIS analizuje dokument HTML pod kątem elementów z atrybutem identyfikatora ustawionym na g_id_onload lub atrybutami klas zawierającymi g_id_signin. Po znalezieniu pasującego elementu przycisk jest renderowany w języku HTML, niezależnie od tego, czy został on wyrenderowany także w języku JavaScript. Aby uniknąć dwukrotnego wyświetlenia przycisku, być może z parametrami powodującymi konflikt nie umieszczaj na stronach HTML elementów HTML pasujących do tych nazw.

Język przycisku

Język przycisku jest określany automatycznie na podstawie domyślnego języka przeglądarki lub ustawień 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 język data-locale w kodzie HTML lub języka w kodzie JavaScript.

HTML

Poniższy fragment kodu pokazuje, jak wyświetlać język przycisku w języku francuskim, dodając parametr hl do adresu URL biblioteki klienta i ustawiając atrybut data-locale na 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

Po udzieleniu zgody użytkownika Google zwraca dane logowania tokenu internetowego (JWT) JSON (token identyfikatora) do przeglądarki użytkownika lub bezpośrednio do punktu końcowego logowania hostowanego przez Twoją platformę.

Miejsce otrzymania tokena JWT zależy od tego, czy wyrenderujesz przycisk za pomocą HTML czy JavaScriptu i czy używany jest tryb UX wyskakującego lub przekierowania.

Używanie trybu UX popup umożliwia proces logowania w wyskakującym okienku. Zazwyczaj jest to mniej uciążliwe dla użytkowników i jest domyślnym trybem UX.

Podczas renderowania przycisku z użyciem:

HTML

Możesz wybrać jedną z tych opcji:

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

Jeśli ustawisz obie wartości, data-callback ma pierwszeństwo przed wartością data-login_uri. Ustawienie obu wartości może być przydatne, jeśli do debugowania używasz modułu obsługi wywołania zwrotnego.

JavaScript

Musisz określić właściwość callback. Tryb wyskakującego okienka nie obsługuje przekierowań podczas wypożyczania przycisku w kodzie JavaScript. Jeśli zasada jest skonfigurowana, login_uri jest ignorowana.

Więcej informacji o dekodowaniu tokena JWT w module obsługi wywołania zwrotnego JS znajdziesz w artykule o obsłudze zwróconej odpowiedzi z danymi logowania.

Tryb przekierowania

W trybie UX redirect proces logowania jest realizowany z wykorzystaniem pełnego przekierowania do strony przeglądarki użytkownika. Google zwraca token JWT bezpośrednio do punktu końcowego logowania za pomocą żądania POST. Jest to zwykle bardziej uciążliwe, ale uważa się za najbezpieczniejszą metodę logowania.

Podczas renderowania przycisku z użyciem:

  • HTML opcjonalnie ustaw data-login_uri jako identyfikator URI punktu końcowego logowania.
  • JavaScript opcjonalnie ustaw login_uri jako 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żyj protokołu HTTPS i bezwzględnego identyfikatora URI. Na przykład: https://example.com/path.

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

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