Nesta página, descrevemos como implementar recursos relacionados à forma como os usuários fazem login ou saem com o Google One Tap.
Fazer login de usuários automaticamente
O Google One Tap é compatível com o login automático, que oferece uma experiência do usuário (UX) sem complicações, removendo as etapas manuais que os usuários precisam seguir ao retornar ao seu site. Os usuários não precisam se lembrar de qual Conta do Google selecionaram durante a última visita, o que diminui as chances de criação de contas duplicadas desnecessárias na sua plataforma.
O login automático complementa o botão Fazer login com o Google e as caixas de diálogo do recurso Um toque. Ele foi projetado para ser usado em todo o site, com inscrição manual ou troca de contas ocorrendo somente depois que o usuário sair do site.
Para que o login automático ocorra, as seguintes condições são necessárias:
- os usuários precisam estar conectados à Conta do Google; e
- já tiver dado consentimento para compartilhar o perfil da conta com seu app; e
- Ao usar a FedCM, fez apenas uma tentativa de login nos últimos 10 minutos. O recurso de um toque é exibido quando ocorrem tentativas repetidas de login durante esse período.
- Ao usar a FedCM, o Chrome exige que os usuários confirmem novamente que querem fazer login no site com a Conta do Google em cada instância do Chrome, mesmo que o usuário tenha aprovado o site antes do lançamento da FedCM. Essa mudança pode afetar a taxa de conversão no seu site atual que usa o One Tap. Na atualização do Chrome M121, a melhoria do login automático reduz o problema de queda na taxa de conversão.
Nas páginas em que o login automático está ativado e se essas condições forem atendidas, a credencial do token de ID do usuário será retornada automaticamente sem qualquer interação do usuário. Se essas condições não forem atendidas, mesmo que o login automático esteja ativado na página, o usuário vai usar o fluxo de Um Toque para fazer login ou dar consentimento. Se um usuário tiver várias Contas do Google e visitar seu site, ele precisará fazer login em uma única Conta do Google e dar consentimento para essa conta.
É possível medir a taxa de sucesso do login automático usando o valor auto no campo select_by do objeto CredentialResponse retornado ao processar a resposta em um callback do JavaScript (callback ou data-callback). select_by não está incluído nas solicitações HTTP POST enviadas para login_uri ou data-login_uri.
Para ativar o login automático, adicione data-auto_select="true" ao seu código, conforme
mostrado no snippet a seguir:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
Sair
Quando um usuário sai do seu site, ele pode ser direcionado para uma página em que uma mensagem do Google One Tap é mostrada automaticamente. Para essa configuração, a seleção automática precisa ser proibida. Caso contrário, o usuário será conectado automaticamente de novo, o que leva a uma UX de loop infinito.
Como usar a FedCM
Para melhorar a experiência do usuário, há um período de silêncio de 10 minutos entre cada tentativa de login automático. Durante esse período, a solicitação do One Tap é exibida. Os usuários precisam clicar explicitamente no One Tap para fazer login.
Sem FedCM
Para proibir a seleção automática depois que um usuário sair, adicione o nome de classe
g_id_signout a todos os links e botões de logout. Confira o seguinte snippet de código:
<div class="g_id_signout">Sign Out</div>
O snippet de código JavaScript a seguir também pode ser usado para sair:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Para evitar uma UX de loop morto, o status de saída do usuário é armazenado em um cookie chamado
g_state, que é definido pela biblioteca dos Serviços de Identificação do Google. Por padrão, o domínio do cookie é definido como o domínio da página atual. Se o One Tap for exibido
no domínio pai e nos subdomínios, o cookie de estado precisará estar visível em
todos os seus domínios. Use o atributo data-state_cookie_domain para definir o domínio do cookie g_state como seu domínio pai. Por exemplo, adicione
data-state_cookie_domain="example.com" ao elemento g_id_onload para um
domínio pai de example.com e um subdomínio chamado webapp.example.com.
Se você tiver um serviço que monitora todos os cookies usados no seu domínio,
notifique-o sobre o cookie g_state.
Se você não quiser carregar a biblioteca de cliente nas páginas pós-login, use estas soluções para evitar uma UX de loop morto após o logout:
- Ao sair, redirecione os usuários para uma página (por exemplo,
https://example.com/logged_out) em que o recurso de um toque não seja exibido ou em que o login automático esteja sempre desativado. - Ao sair, adicione um parâmetro ao URL. Por exemplo,
logged_out=1. Ao renderizar o One Tap pela API JavaScript, verifique esse parâmetro de URL e desative o login automático quando ele estiver presente.
Principais jornadas do usuário
A página de login automático.
Como usar a FedCM
Os usuários podem fechar a solicitação do One Tap clicando no botão X. Por motivos de acessibilidade, um token de ID é compartilhado com seu site, mesmo que os usuários cliquem no botão X.
Para melhorar a experiência do usuário, há um período de silêncio de 10 minutos entre cada tentativa de login automático. Durante esse período, a solicitação do One Tap é exibida. Os usuários precisam clicar explicitamente no One Tap para fazer login.
Sem FedCM
Se os usuários não clicarem no botão Cancelar em até cinco segundos, um token de ID será compartilhado com seu site.
Quando o login é cancelado, com base no número de sessões ativas do Google, a página do seletor de contas ou a página do usuário recorrente é exibida.
- Várias sessões do Google
- Sessões únicas do Google
