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

1. Visão geral

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

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

O que você vai aprender

  • 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 lugar para hospedar uma página da Web, ambientes que vamos abordar neste codelab:
    • execução localmente em um terminal na sua máquina ou
    • uso de uma plataforma como o Glitch.
    Escolha o ambiente com que você tem mais familiaridade.
  2. Um projeto na nuvem do Google. Você pode usar seu projeto atual ou criar um novo. Uma conta e um 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 este exemplo de código a um arquivo chamado index.html. Você pode fazer isso na sua máquina usando o editor de texto preferido ou em uma plataforma como 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 a biblioteca dos Serviços de Identificação do Google usando g_id_onload,
  • mostra 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 do JSON Web Token (JWT) em JSON simples.

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

Por enquanto, ignore isso. Vamos voltar a ele em breve.

3. Veicular sua página da Web

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

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

Escolha o que você tem mais familiaridade. Após a configuração, vamos usar o URL para configurar um cliente da Web OAuth.

Localmente na sua máquina

Verifique se o Python 3 está instalado no seu sistema. A configuração varia de acordo com o SO e a plataforma. Comece com a configuração e o 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á detectando conexões na porta 8000 e pronto para veicular sua página de login. O URL é

http://localhost:8000

De uma plataforma de desenvolvimento da Web

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

Normalmente, o URL que você vai usar é o nome do projeto inserido ao configurar o projeto glich.com. Por exemplo, se o projeto do Glitch for chamado de 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 esse. O URL é

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

Carregar a página

Aguarde um momento...

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

Copie ou anote o URL. 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 da Web OAuth 2.0. 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 na Etapa 3: veicular 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 index.html para usar o novo ID do cliente. No 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 navegador. Todos os erros e a credencial do token de ID JWT retornada do Google serão registrados aqui.

Pressione o botão Fazer login com o Google.

O que acontece em seguida pode variar um pouco:

  • Se você estiver conectado a mais de uma Conta do Google, será solicitado que selecione qual conta será usada para fazer login nesse app da Web.
  • Se esta for a primeira vez que você faz login nesse app da Web, uma solicitação de consentimento será mostrada.

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 o token de ID JWT

O JWT codificado é registrado no console do desenvolvedor. Depois de decodificar o JWT, alguns campos de token de ID usados com frequência também são registrados no console.

Você pode usar ferramentas on-line como jwt.io (em inglês) para decodificar o JWT.

Como alternativa, jq no terminal também pode ser usado para decodificar e visualizar o JWT. Talvez seja 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 este 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. Receber informações do usuário do token de ID tem mais informações sobre o que todos os campos significam.

7. Personalizar o botão

A colocação de um botão de login padrão em uma página é feita assim

    <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 mudar a cor, o tamanho ou o texto para corresponder ao tema do seu site.

Vamos mudar a cor do botão para azul e, em vez disso, dizer Inscreva-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;Inscrever-se no Google&quot;.

Você pode personalizar ainda mais o botão. Consulte Atributos de dados visuais para conferir a lista completa de opções e testar nosso gerador de código HTML.

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 JWT e aprendeu a personalizar a aparência do botão.

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

Perguntas frequentes