UX do botão "Fazer login com o Google"

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Esta página descreve a experiência do usuário (UX) do botão "Fazer login com o Google".

Renderização do botão

Um botão personalizado mostra informações do perfil para a primeira sessão do Google que aprova seu site. Uma sessão aprovada do Google tem uma conta correspondente no seu site que já fez login usando o recurso Fazer login com o Google.

Se um botão personalizado for exibido, o usuário vai saber o seguinte:

• Há pelo menos uma sessão ativa do Google.
• Há uma conta correspondente no seu site.

Um botão personalizado indica rapidamente o status da sessão, tanto no Google quanto no seu site, antes que os usuários cliquem nele. Isso é especialmente útil para usuários finais que visitam seu site apenas ocasionalmente. Eles podem esquecer se uma conta foi criada ou não e de que forma. Um botão personalizado lembra que o recurso "Fazer login com o Google" já foi usado. Assim, ele ajuda a evitar a criação desnecessária de contas duplicadas no seu site.

Para indicar o status da sessão, o botão personalizado é mostrado das seguintes maneiras:

• Uma sessão:há apenas uma sessão do lado do Google. Essa sessão aprova o cliente, e há uma conta correspondente no seu site.

  

• Várias sessões:há várias sessões do lado do Google. Essas sessões aprovam o cliente. A aprovação é indicada pela seta de lista ao lado da conta exibida. Pelo menos uma sessão tem uma conta correspondente no seu site.

  

• Nenhuma sessão:não há sessão do lado do Google ou nenhuma das sessões ainda aprovou o cliente.

  

O botão personalizado é mostrado automaticamente quando o status da sessão é adequado, a menos que as configurações do botão não permitam que ele seja exibido. O botão personalizado não aparece se:

• O atributo data-type é icon.
• O atributo data-size é definido como medium ou small.
• O atributo data-width é definido como um número menor que 200 px.
• O cookie de terceiros está bloqueado, e a versão FedCM do botão não está ativada.

O nome ou endereço de e-mail é mostrado como uma elipse quando é muito longo para ser exibido no botão.

Gerenciador de credenciais federadas (FedCM, na sigla em inglês)

O Sandbox de privacidade para a Web introduz mudanças significativas nos Serviços de Identificação do Google e no login do usuário. Isso afeta o botão personalizado "Fazer login com o Google". Embora o fluxo de login não seja afetado pelo botão, com os cookies de terceiros bloqueados, os usuários recorrentes não veem o botão personalizado.

Com o fluxo de botões da API Federated Credentials Management (FedCM), os usuários podem ver o botão "Fazer login com o Google" personalizado no seu site. Por padrão, o FedCM está desativado, mas você pode ativá-lo mudando um atributo (HTML/JavaScript). Os benefícios do botão FedCM incluem:

• Experiência do usuário recorrente aprimorada: o processo de login de usuários recorrentes é simplificado porque eles podem reconhecer as contas atuais. Esse reconhecimento melhorado leva a uma taxa de cliques (CTR) mais alta. Além disso, ao contrário do fluxo de botões sem o FedCM ativado, o fluxo de botões do FedCM oferece suporte ao recurso de seleção automática. Os usuários que retornarem com uma sessão ativa do Google vão fazer login automaticamente após clicar no botão, sem precisar passar pelo comando do Seletor de contas.

• Melhoria na integração de recursos: integramos os recursos de um toque e de login automático, permitindo que todos os logins do FedCM (Gerenciamento de credenciais federadas) com os recursos do Google de uma única parte confiável (RP, na sigla em inglês) funcionem em conjunto. Os gestos do usuário no fluxo do botão FedCM serão registrados e aceitos pelo Chrome para cumprir a confirmação única do fluxo de login automático com um toque. Isso garante uma experiência contínua em todos os recursos.

Principais jornadas do usuário

As jornadas do usuário variam de acordo com os seguintes status.

• Status da sessão nos sites do Google. Os termos a seguir são usados para indicar diferentes status de sessão do Google quando a jornada do usuário começa.

  • Has-Google-session: há pelo menos uma sessão ativa nos sites do Google.
  • No-Google-session: não há sessão ativa nos sites do Google.

• Se a Conta do Google selecionada aprovou seu site quando a jornada do usuário começou. Os termos a seguir são usados para indicar diferentes status de aprovação.

  • Novo usuário: a conta selecionada não aprovou seu site.
  • Usuário recorrente: a conta selecionada já aprovou seu site.

Jornada do novo usuário com sessão do Google

Jornada do usuário recorrente com sessão do Google

Tem sessão do Google com jornada de usuário recorrente de seleção automática

Jornada do novo usuário sem sessão do Google

Jornada do usuário que retorna sem sessão do Google

Principais jornadas do usuário da conta do Family Link

As principais jornadas de usuário gerais da seção anterior ainda se aplicam. A imagem a seguir mostra o fluxo adicional que seria apresentado para a Conta do Google da criança ao fazer login.

Mais informações sobre o fluxo de botões da FedCM

• Adicione o atributo allow="identity-credentials-get" ao frame pai se o app da Web chamar a API Button de iframes de origem cruzada. Consulte a etapa 7 para mais informações.

• Configure corretamente a Política de Segurança de Conteúdo (CSP) do seu site. Consulte Etapa 8 para mais informações.

• O status de cooldown e as configurações de login de terceiros no Chrome não têm impacto no fluxo do botão FedCM. O status (como mostrado nas capturas de tela a seguir) afeta apenas a UX do One Tap.