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 façam login no seu app da Web. Use HTML ou JavaScript para renderizar o botão e atributos para personalizar a forma, o tamanho, o texto e o tema dele.

Botão de login personalizado.

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

Pré-requisitos

Siga as etapas descritas em Configuração para configurar a tela de permissão OAuth, receber um ID do cliente e carregar a biblioteca de cliente.

Renderização do botão

Para mostrar o botão "Fazer login com o Google", escolha 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 sua 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 e 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

Renderize o botão de login usando JavaScript, retornando o JWT ao gerenciador de callback 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 aparece 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 especificados no segundo parâmetro para renderButton.

Para minimizar o atrito do usuário, google.accounts.id.prompt() é chamado para mostrar o 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 contenham 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 que o botão seja mostrado duas vezes, possivelmente com parâmetros conflitantes, não inclua elementos HTML que correspondam a esses nomes nas 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. Você também pode escolher o idioma manualmente adicionando o parâmetro hl e o código do idioma à diretiva src ao carregar a biblioteca e adicionando o parâmetro opcional data-locale ou locale 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 atributo data-locale como 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>

Tratamento de credenciais

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

O local em que você escolhe receber o JWT depende de como o botão é renderizado (HTML ou JavaScript) e se o modo de UX de pop-up ou redirecionamento é usado.

Usar o modo de UX popup executa o fluxo de UX de login em uma janela pop-up. Essa é geralmente uma experiência menos intrusiva para os usuários e é o modo de UX padrão.

Ao renderizar o botão usando:

HTML

Você pode definir:

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

Se os dois valores forem definidos, data-callback terá prioridade sobre data-login_uri. Definir os dois valores pode ser útil ao usar um manipulador de callback para depuração.

JavaScript

Você precisa especificar um callback. O modo pop-up não aceita 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 manipulador de callback JS.

Modo de redirecionamento

Usar o modo de UX redirect realiza o fluxo de UX de login usando o redirecionamento de 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. Essa é geralmente uma experiência mais intrusiva para os usuários, mas é considerada o método de login mais seguro.

Ao renderizar o botão usando:

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

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

O 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 JavaScript seguras e URIs de redirecionamento para uma descrição completa dos requisitos e das regras de validação do Google.