Exibir o botão Fazer login com o Google

Adicione um botão "Fazer login com o Google" ao seu site para permitir que os usuários se inscrevam ou fazer login no seu app da Web. Use HTML ou JavaScript para renderizar o botão e para personalizar a forma, o tamanho, o texto e o tema do botão.

Botão de login personalizado.

Depois que um usuário seleciona uma Conta do Google e dá o consentimento, o Google compartilha o perfil do usuário usando um JSON Web Token (JWT). Para uma visão geral das etapas envolvidos no login e na experiência do usuário, consulte Como funciona. Entender o botão personalizado analisa as diferentes condições e estados que afetam como o botão é exibido aos usuários.

Pré-requisitos

Antes de adicionar o botão à página de login, siga estas etapas:

Renderização de botões

Para mostrar o botão "Fazer login com o Google", você pode escolher HTML ou JavaScript para renderizar o botão na página de login:

HTML

Renderize o botão de login usando HTML, retornando o JWT para o endpoint de login da plataforma.

<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>

Um elemento com uma classe g_id_signin é renderizado como um botão "Fazer login com o Google". O botão é personalizado pelos parâmetros fornecidos nos atributos de dados.

Para mostrar um botão "Fazer login com o Google" e o Google One Tap na mesma página, remova data-auto_prompt="false". Isso é recomendado para reduzir o atrito a melhorar as taxas de login.

Para conferir a lista completa de atributos de dados, consulte a página de referência do g_id_signin.

JavaScript

Processe o botão de login usando JavaScript, retornando o JWT para o gerenciador de callback do JavaScript do navegador.

<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>

O elemento especificado como o primeiro parâmetro para renderButton é exibido como um botão "Fazer login com o Google". Neste exemplo, buttonDiv é usado para renderizar o botão na página. O botão é personalizado usando os atributos especificado no segundo parâmetro para renderButton.

Para minimizar a fricção do usuário, google.accounts.id.prompt() é chamado para mostrar o recurso Um toque como uma segunda alternativa ao uso do botão para inscrição ou login.

A biblioteca GIS analisa o documento HTML em busca de elementos com um atributo ID definido como g_id_onload ou atributos de classe que contêm g_id_signin. Se um elemento correspondente for encontrado, o botão será renderizado usando HTML, mesmo que você também tenha renderizado o botão em JavaScript. Para evitar a exibição do botão duas vezes, possivelmente com parâmetros conflitantes, não inclua elementos HTML que correspondam a esses nomes nas suas páginas HTML.

Idioma do botão

O idioma do botão é determinado automaticamente pelo idioma padrão do navegador ou pela preferência do usuário da sessão do Google. Também é possível escolher idioma manualmente adicionando o parâmetro hl e o código do idioma ao src ao carregar a biblioteca e adicionar a localidade de dados opcional ou Parâmetro de localidade data-locale em HTML ou locale em JavaScript.

HTML

O snippet de código a seguir mostra como exibir o idioma do botão em francês adicionando o parâmetro hl ao URL da biblioteca de cliente e definindo o data-locale para o francês:

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

JavaScript

O snippet de código a seguir mostra como exibir o idioma do botão em francês adicionando o parâmetro hl ao URL da biblioteca de cliente e chamando o método google.accounts.id.renderButton com o parâmetro locale definido como francês:

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

Processamento de credenciais

Depois que o consentimento do usuário é dado, o Google retorna uma credencial JSON Web Token (JWT), conhecida como um token de ID, para o navegador do usuário ou diretamente para um endpoint de login hospedado pela sua plataforma.

O local escolhido para receber o JWT depende se você renderiza o botão usando HTML ou JavaScript e se o modo de UX de pop-up ou redirecionamento é usado.

O uso do modo de UX popup executa o fluxo de UX de login em uma janela pop-up. Isso é geralmente uma experiência menos invasiva para os usuários e é o modo UX padrão.

Ao renderizar o botão usando:

HTML

É possível definir:

  • data-callback para retornar o JWT ao gerenciador de callback ou
  • data-login_uri para que o Google envie o JWT diretamente para seu login endpoint usando uma solicitação POST.

Se ambos os valores forem definidos, data-callback terá precedência sobre data-login_uri. Definir os dois valores pode ser útil ao usar um callback gerenciador para depuração.

JavaScript

É necessário especificar um callback. O modo pop-up não oferece suporte a redirecionamentos ao renderizar o botão em JavaScript. Se definido, login_uri será ignorado.

Consulte Processar a resposta de credencial retornada para mais informações sobre como decodificar o JWT no seu manipulador de callback do JS.

Modo de redirecionamento

O uso do modo de UX redirect executa o fluxo de UX de login usando a página inteira. do navegador do usuário, e o Google retorna o JWT diretamente para seu endpoint de login usando uma solicitação POST. Em geral, essa é uma experiência mais invasiva para os usuários, mas pode é o método de login mais seguro.

Ao renderizar o botão usando:

  • HTML: defina data-login_uri como o URI do endpoint de login (opcional).
  • O JavaScript pode definir login_uri como o URI do endpoint de login.

Se você não fornecer um valor, o Google vai retornar o JWT para o URI da página atual.

URI do endpoint de login

Use HTTPS e um URI absoluto ao definir data-login_uri ou login_uri. Por exemplo, https://example.com/path.

O HTTP só é permitido ao usar localhost durante o desenvolvimento: http://localhost/path.

Consulte Usar origens seguras do JavaScript e redirecionar URIs para uma descrição completa dos requisitos e regras de validação do Google.