Botão "Fazer login com o Google" para a Web

Botão "Fazer login com o Google" para a Web

Sobre este codelab

subjectÚltimo abr. 28, 2025 atualizado
account_circleEscrito por Brian Daugherty

1. Visão geral

Neste codelab, vamos criar uma página da Web simples para o login do usuário. Você usará a biblioteca JavaScript dos Serviços de Identificação do Google para exibir e personalizar o botão "Fazer login com o Google".

Um botão "Fazer login com o Google".

  • Como adicionar um botão "Fazer login com o Google" a uma página da Web
  • Como configurar um aplicativo da Web OAuth 2.0
  • Como decodificar um token de ID
  • Como personalizar o botão "Fazer login com o Google"

O que é necessário

  1. Um editor de texto e um local para hospedar uma página da Web, os ambientes que abordaremos neste codelab:
    • em execução localmente em um terminal na máquina, ou
    • usando uma plataforma como o Glitch.
    Escolha o ambiente mais confortável para você.
  2. Um projeto do Google Cloud. É possível usar seu projeto atual ou criar um novo. A conta e o projeto do Google Cloud Platform são sem custo financeiro.
  3. Conhecimento básico de HTML, CSS, JavaScript e Chrome DevTools (ou equivalente).

Vamos começar.

2. Criar sua página de login

Adicione esse exemplo de código a um arquivo chamado index.html. Você pode fazer isso na sua máquina usando seu editor de texto favorito ou em uma plataforma como o Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Esse código é uma mistura de HTML e JavaScript e faz várias coisas:

  • configura essa biblioteca de Serviços de Identificação do Google com o g_id_onload;
  • exibe um botão "Fazer login com o Google" usando g_id_signin,
  • adiciona um gerenciador de função de callback JavaScript chamado handleCredentialResponse para receber a credencial de login do usuário do Google; e
  • uma função decodeJWT para converter a credencial JSON Web Token (JWT) em apenas JSON simples.

Algo pode parecer um pouco errado com data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Por enquanto, apenas ignore-a, vamos voltar a ela em breve.

3. Veicule sua página da Web

Vamos discutir dois ambientes para exibir index.html no navegador:

  • executando localmente um servidor da Web na sua máquina
  • em uma plataforma remota como o Glitch.

Escolha a opção mais confortável para você. Após a configuração, vamos usar o URL para configurar um cliente OAuth da Web.

Diretamente na sua máquina

Verifique se o Python3 está instalado no sistema. A configuração varia de acordo com o SO e a plataforma. Comece com Configuração e uso do Python se precisar instalar o Python na sua máquina.

Inicie o servidor da Web Python no diretório que contém index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Um servidor da Web agora está ouvindo conexões na porta 8000 e pronto para atender à sua página de login. O URL é

http://localhost:8000

Usar uma plataforma remota

Se você optou por editar e hospedar sua página de login usando o Glitch (ou um equivalente), pode abrir index.html em um painel de visualização ou em uma nova guia do navegador.

Normalmente, o URL que você usará é o nome do projeto que você inseriu ao configurar seu projeto glich.com. Por exemplo, se o nome do projeto de falha for gis-example, o URL será https://gis-example.glitch.me. É claro que você terá escolhido um nome de projeto diferente e não poderá reutilizar este. O URL é

https://<var>your-project-name</var>.glitch.me

Carregar a página

Espere um segundo...

Primeiro, precisamos criar um cliente da Web OAuth 2.0 e configurá-lo.

Copie ou anote o URL, porque ele será usado na próxima etapa.

4. Configurar um cliente da Web OAuth

Vamos configurar o OAuth para que as pessoas possam fazer login.

  • Clique neste link para criar um cliente OAuth 2.0 da Web. Se necessário, um assistente vai ajudar você a criar e configurar um novo projeto do Google Cloud.
  • Selecione Aplicativo da Web no menu suspenso Tipo de aplicativo.
  • Pressione o botão Adicionar URI em Origens JavaScript autorizadas.
  • Insira o URL que está hospedando index.html da Etapa 3: disponibilizar sua página da Web.

    Hospedado na sua máquina local

    Origem local hospedada na sua máquina

    Hospedado em uma plataforma remota

    Usar uma plataforma de hospedagem remota
  • Pressione Criar.
  • Copie o novo ID do cliente.

Um último detalhe

Precisamos voltar e atualizar o index.html para usar o novo ID do cliente. No seu editor, substitua PUT_YOUR_WEB_CLIENT_ID_HERE pelo novo ID do cliente. Um ID do cliente é semelhante ao exemplo a seguir: 1234567890-abc123def456.apps.googleusercontent.com.

Vamos fazer login.

5. Fazer login

Primeiro, abra o console do desenvolvedor do seu navegador. Todos os erros e a credencial do token de ID do JWT retornada do Google serão registrados aqui.

Pressione o botão "Fazer login com o Google".

O que acontece a seguir pode variar um pouco:

  • Se você tiver feito login em mais de uma Conta do Google, será solicitado que selecione qual conta será usada para fazer login nesse aplicativo da Web.
  • Se esta for a primeira vez que você faz login nesse app da Web, um aviso de consentimento será exibido.

Depois de selecionar uma conta e dar seu consentimento, o Google responde com um JWT. A função de callback handleCredentialResponse em execução no navegador recebe o JWT.

Neste codelab, decodificamos e imprimimos o conteúdo do JWT. Em um app da Web de produção, você vai verificar e usar o JWT decodificado para fazer algo mais significativo, como criar uma nova conta na plataforma de back-end ou estabelecer uma nova sessão para o usuário.

6. Inspecionar token de ID do JWT

O JWT codificado é registrado no console do desenvolvedor. Após a decodificação do JWT, alguns campos de token de ID usados com frequência também são registrados no console.

É possível usar ferramentas on-line, como jwt.io, para decodificar o JWT.

Como alternativa, o jq no terminal também pode ser usado para decodificar e visualizar o JWT (pode ser necessário usar o gerenciador de pacotes para instalar o jq). Primeiro, cole a string JWT codificada entre aspas duplas:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

e use esse comando para decodificá-lo

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Algumas das chaves e valores, como e-mail, nome e imagem, devem ser fáceis de entender. Outros valores são usados para verificar o JWT antes de usá-lo. Consiga informações do usuário com o token de ID, que tem mais informações sobre o significado de todos os campos.

7. Personalizar o botão

Colocar um botão de login padrão em uma página é feito desta forma

    <div class="g_id_signin"></div>

e você verá este botão

Um botão &quot;Fazer login com o Google&quot;.

Mas talvez você queira alterar a cor, o tamanho ou o texto para combinar com o tema do seu site.

Vamos mudar a cor do botão para azul e escolher Inscrever-se com o Google.

Abra index.html, localize o elemento g_id_signin e adicione os atributos data-theme="filled_blue" e data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Depois de salvar e recarregar a página, você verá um botão azul com o novo texto.

Um botão &quot;Inscreva-se com o Google&quot;.

Você pode personalizar ainda mais o botão. Consulte Atributos de dados visuais para ver a lista completa de opções.

8. Outros recursos

Parabéns!

Você adicionou um botão "Fazer login com o Google" a uma página da Web, configurou um cliente da Web OAuth 2.0, decodificou um token de ID do JWT e aprendeu a personalizar a aparência do botão.

Estes links podem ajudar você nas próximas etapas:

Perguntas frequentes

bug_report Informar um erro