Google One-tap sign-up

O Google possui uma excelente opção para autenticar os usuários de uma maneira muito rápida em nossos sites e aplicações, ela já era uma opção que estava em testes para alguns parceiros, que o Google tornou disponível para todos recentemente.

Tela de login apresentando o diálogo do Google one-tap, em mobile e em desktop.

Como seu principal benefício está o de autenticar o usuário para em nossas aplicações com um email válido, e principalmente, sem perder o contexto da pessoa em nosso site, sem redirecionamento ou nada que atrapalhe a experiência dela.

Começando

Para começar será necessário termos um projeto no https://console.developers.google.com/ .Para este exemplo vou criar um novo (caso sua empresa já possua um projeto não será necessário criar um novo):

Criação de um projeto no console.developers.google.com

Tento nosso projeto criado, precisaremos configurar nossa tela de consentimento OAuth que vamos utilizar, isto pode ser feito a partir do menu na lateral esquerda de nosso projeto:

navegação a partir do menu esquerdo para a tela de consentimento OAuth

Nela vamos selecionar a opção externo (pois vamos liberar o acesso para qualquer usuário com uma conta do gmail)

opção de user type externo ao criar a tela de consentimento OAuth

Neste exemplo vou configurar as urls em um domínio de teste

exemplo de urls em um domínio de teste

Com nossa tela de OAuth criada, vamos nas opções de Credenciais e criaremos uma chave para utilizarmos em nosso login

credenciais para criar um chave de api

Podemos escolher a opção criar credenciais, vamos escolher a opção ID do Cliente do OAuth:

escolha do ID do cliente de OAuth

Na tela de configuração do meu cliente escolhi um Aplicativo da Web e nele vou configurar as urls que utilizarei em meu site (notem que configurei as origens de JavaScript autorizadas)

Com nossa chave de API criada precisaremos salvar os valores de ID de cliente que vamos utilizar para fazer a requisição para o Google.

Programando

Agora que temos o id do client de nossa API, podemos criar um html (isto pode variar de acordo com a tecnologia que você esteja utilizando, mas a princípio pode ser um html simples).

Neste html precisaremos adicionar a biblioteca js do Google para fazer a autenticação e também uma biblioteca para ler o resultado, para isso vou utilizar este projeto que está disponível no GitHub https://github.com/auth0/jwt-decode

Para facilitar adicionei ele em nosso exemplo via CDN:

Com isto precisaremos adicionar também um elemento html contento as informações de nossa aplicação:

E o método que será responsável por manipular a resposta da autenticação:

Notem que como exemplo coloquei um console.log, mas é neste lugar que sua aplicação pode preencher algum formulário ou mesmo autenticar o usuário com aquele email.

Feito isto temos nossa aplicação funcionando \o/

interface de login

E ao clicar em meu perfil, minhas informações estão disponíveis para serem tratadas pela minha aplicação

console do navegador com nome e email do callback do Google

Um detalhe, caso o usuário opte por fechar o diálogo do Google, ele criará um cookie responsável por não mostrar mais o diálogo do Google para o usuário, removendo ele, o Google volta a mostrar a interface

cookie g_state

Aqui está o html inteiro, lembrem-se de trocar o data-client-id pelo de sua aplicação no Google

Com este simples projeto é possível aumentar a conversão de login e de emails válidos em nossas aplicações.

Espero que este post seja útil, estou à disposição para dúvidas, críticas e sugestões.

abs

Rodolfo