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 os atributos e 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 de usuário usando um JSON Web Token (JWT). Para uma visão geral das etapas envolvidas no login e na experiência do usuário, consulte Como funciona. Em Para entender o botão personalizado, você encontra as diferentes condições e estados que afetam a exibição do botão para os usuários.

Pré-requisitos

Antes de adicionar o botão à sua página de login, faça o seguinte:

Renderização do botão

Para exibir o botão "Fazer login com o Google", escolha HTML ou JavaScript para renderizar o botão na sua 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 o botão "Fazer login com o Google" e o toque do Google One na mesma página, remova data-auto_prompt="false". Isso é recomendado para reduzir o atrito e melhorar as taxas de login.

Para ver 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 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 é mostrado 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, o método google.accounts.id.prompt() é chamado para mostrar um toque como uma segunda alternativa ao uso do botão para se inscrever ou fazer login.

A biblioteca GIS analisa o documento HTML em busca de elementos com um atributo de ID definido como g_id_onload ou atributos de classe que contenham g_id_signin. Se um elemento correspondente for encontrado, o botão vai 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 correspondentes 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. 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 de localidade ou de dados 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 para 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>

Gerenciamento de credenciais

Depois que o usuário dá o consentimento, 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 em que você escolhe receber o JWT depende de renderizar o botão usando HTML ou JavaScript e do 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. Geralmente, essa é uma experiência menos invasiva 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 seu gerenciador de callback ou
  • data-login_uri para que o Google envie o JWT diretamente para seu endpoint de login 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 gerenciador de callback para depuração.

JavaScript

É preciso especificar um callback. O modo pop-up não oferece suporte a redirecionamentos ao gerar o botão em JavaScript. Se definido, login_uri é ignorado.

Consulte Processar a resposta da credencial retornada para saber mais sobre como decodificar o JWT no seu gerenciador de callback do JS.

Modo de redirecionamento

O uso do modo UX redirect executa o fluxo de UX de login usando o redirecionamento completo de página do navegador do usuário, e o Google retorna o JWT diretamente para o endpoint de login usando uma solicitação POST. Geralmente, essa é uma experiência mais invasiva 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 endpoint de login.
  • JavaScript pode definir login_uri como o URI do endpoint de login.

Se você não fornecer um valor, o Google 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 o localhost durante o desenvolvimento: http://localhost/path.

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