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

Conteúdo

  • 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:
    • executando localmente em um terminal na sua máquina ou
    • usando uma plataforma como o Glitch.
    Escolha o ambiente que mais agrada você.
  2. Um projeto do Google Cloud. 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 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 a biblioteca do Google Identity Services 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;
  • 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 esse assunto em breve.

3. Exibir sua página da Web

Vamos falar sobre 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 a opção mais adequada para você. Após a configuração, vamos usar o URL para configurar um cliente da Web OAuth.

Localmente na sua máquina

Verifique se o Python3 está instalado no seu 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 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 o Glitch (ou equivalente), é possível abrir index.html em um painel de visualização ou em uma nova guia do navegador.

Normalmente, o URL usado é o nome do projeto inserido ao configurar o projeto do glich.com. Por exemplo, se o projeto do Glitch se chamar 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

Aguarde um momento…

Primeiro, precisamos criar e configurar um cliente da Web OAuth 2.0.

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

4. Configurar um cliente OAuth da Web

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.
  • Clique no botão Adicionar URI em Origens JavaScript autorizadas.
  • Insira o URL que está hospedando index.html na Etapa 3: veicule 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 pelo Google serão registrados aqui.

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

O que acontece depois pode variar um pouco:

  • Se você tiver feito login em mais de uma Conta do Google, será necessário selecionar qual delas será usada para fazer login no web app.
  • Se esta for a primeira vez que você faz login no web app, 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, vamos decodificar e imprimir 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 sua 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.

Use 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 as aspas duplas:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

e use este comando para decodificar

$ 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": "[email protected]",   "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 foto, são fáceis de entender. Outros valores são usados para verificar o JWT antes de você usá-lo. Obter informações do usuário do token de ID tem mais detalhes sobre o significado de todos os campos.

7. Personalizar o botão

Para colocar um botão de login padrão em uma página, faça o seguinte:

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

e você vai 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 fazer com que ele diga 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ê vai ver um botão azul com o novo texto.

Um botão &quot;Inscrever-se com o 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 com as próximas etapas:

Perguntas frequentes