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

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 as informações do perfil da 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 dá aos usuários uma indicação rápida do status da sessão, tanto no Google quanto no seu site, antes que eles cliquem no botão. Isso é especialmente útil para usuários finais que visitam seu site apenas ocasionalmente. Elas 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 no 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 aprovou o cliente ainda.

  

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

• O atributo data-type é icon.
• O atributo data-size está 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 é abreviado quando é muito longo para ser exibido dentro do botão.

Gerenciador de credenciais federadas (FedCM)

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 com o botão, com os cookies de terceiros bloqueados, os usuários recorrentes não verão o botão personalizado.

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

• Experiência aprimorada para usuários recorrentes: o processo de login de usuários recorrentes é simplificado porque eles reconhecem as contas que já têm. Essa melhoria comprovadamente aumenta a taxa de cliques (CTR). Além disso, ao contrário do fluxo de botões sem o FedCM ativado, o fluxo de botões do FedCM é compatível com o recurso de seleção automática. Os usuários recorrentes com uma sessão ativa do Google vão fazer login automaticamente depois de clicar no botão, ignorando a solicitação do seletor de contas.

• Integração de recursos aprimorada: integramos as funcionalidades do um toque e do login automático, permitindo que todos os recursos de Fazer login com o Google do Gerenciador de credenciais federadas (FedCM) de uma única parte confiável (RP) funcionem em conjunto. Os gestos do usuário no fluxo do botão FedCM serão registrados e respeitados pelo Chrome para atender à reconfirmação única do fluxo de login automático com um toque. Isso garante uma experiência integrada 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á uma sessão ativa em sites do Google.

• Se a Conta do Google selecionada aprovou seu site quando a jornada do usuário começa. 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 uma sessão do Google

Has-Google-session com seleção automática retornando a jornada do usuário recorrente.

Jornada de novos usuários sem sessão do Google

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

Principais jornadas do usuário da conta do Family Link

As jornadas gerais do usuário da seção anterior ainda se aplicam. A seguir, mostramos 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 web app 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 a etapa 8 para mais informações.

• O status de espera e as configurações de login de terceiros no Chrome não têm impacto no fluxo de botões da FedCM. O status (conforme mostrado nas capturas de tela a seguir) afeta apenas a UX do toque único.