Login e logout automáticos

Esta página descreve como implementar recursos relacionados à forma como os usuários fazem login ou sair com o Google One Tap.

Fazer login automático dos usuários

O Google One Tap oferece suporte ao login automático, que proporciona uma experiência do usuário (UX) sem problemas, removendo as etapas manuais que os usuários precisam seguir ao retornar ao seu site. Os usuários não precisam lembrar qual Conta do Google selecionaram na última visita, o que diminui as chances de contas duplicadas desnecessárias serem criadas na sua plataforma.

O login automático complementa nosso botão Fazer login com o Google e as caixas de diálogo de um toque. Ele foi projetado para ser usado em todo o site, com inscrição manual ou troca de contas somente depois que o usuário tiver feito logout do site.

Para que o login automático ocorra, as seguintes condições são necessárias:

  • os usuários precisam primeiro fazer login na Conta do Google;
  • já tiverem concedido consentimento para compartilhar o perfil da conta com seu app, e
  • ao usar o FedCM, fez apenas uma tentativa de login nos últimos 10 minutos. O recurso "Um toque" é exibido quando há 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 usando o recurso "Um toque". Na atualização do Chrome M121, a melhoria do login automático reduz o problema de queda na taxa de conversão.

Para 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 do um toque para fazer login ou dar consentimento. Se um usuário tiver várias Contas do Google e acessar seu site, ele precisará fazer login em uma única Conta do Google e dar consentimento para ela.

É possível medir a taxa de sucesso do login automático usando o valor auto no campo select_by do objeto de credencial retornado.

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 a uma página em que um pedido do Google One Tap é exibido automaticamente. Para essa configuração, a seleção automática precisa ser proibida. Caso contrário, o usuário faz login automaticamente de novo, o que leva a uma experiência de loop sem fim.

Como usar a FedCM

Para melhorar a experiência do usuário, há um período de inatividade de 10 minutos entre cada tentativa de login automático. Durante esse período, o aviso de um toque será mostrado. Os usuários precisam clicar explicitamente no recurso "Um toque" para fazer login.

Sem a FedCM

Para impedir a seleção automática depois que um usuário faz logout, adicione o nome da classe g_id_signout a todos os links e botões de logout. Confira este 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 sem fim, 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 recurso Um toque for exibido no domínio principal 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 principal. Por exemplo, adicione data-state_cookie_domain="example.com" ao elemento g_id_onload para um domínio principal 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 experiência do usuário de loop sem fim após o logout:

  • Ao sair, redirecione os usuários para uma página (por exemplo, https://example.com/logged_out) em que o toque único não é exibido ou em que o login automático está sempre desativado.
  • Ao fazer logout, adicione um parâmetro ao URL. Por exemplo, logged_out=1. Ao renderizar o recurso "Um toque" pela API JavaScript, verifique o 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

Pop-up de login automático do FedCM

Os usuários podem fechar a solicitação do recurso "Um toque" clicando no botão X. Para considerações 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 inatividade de 10 minutos entre cada tentativa de login automático. Durante esse período, o aviso de um toque será mostrado. Os usuários precisam clicar explicitamente no recurso "Um toque" para fazer login.

Sem a FedCM

Exemplo de um pop-up de login automático.

Se os usuários não clicarem no botão Cancelar em 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

Exemplo de uma página do seletor de contas

  • Sessões únicas do Google

Página de usuário recorrente do um toque