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 comomediumousmall. - 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
Botão sem FedCM
O botão "Fazer login com o Google".
Página do seletor de contas.
A nova página de consentimento do usuário.
Depois que o usuário confirma, um token de ID é compartilhado com seu site.
Os usuários podem adicionar uma nova sessão do Google clicando no botão Usar outra conta. Consulte a seção No-Google-session.
Botão usando FedCM
A penúltima tela do fluxo é a tela de carregamento, que redireciona automaticamente os usuários para o endpoint de login sem que eles precisem fazer nada.
Jornada do usuário recorrente com sessão do Google
Botão sem FedCM
O botão "Fazer login com o Google".
Página do seletor de contas.
Depois que o usuário escolhe uma conta recorrente, um token de ID é compartilhado com seu site.
Os usuários podem adicionar uma nova sessão do Google clicando no botão Usar outra conta. Consulte a seção "Jornadas do usuário sem sessão do Google".
Botão usando FedCM
A penúltima tela do fluxo é a tela de carregamento, que redireciona automaticamente os usuários para o endpoint de login sem que eles precisem fazer nada.
Tem sessão do Google com jornada de usuário recorrente de seleção automática
Botão sem FedCM
O botão "Fazer login com o Google" sem o FedCM não tem o recurso de seleção automática.
Botão usando FedCM
Os usuários recorrentes com uma sessão ativa do Google serão selecionados automaticamente
após clicar no botão, ignorando a solicitação do Seletor de contas. Defina
o atributo auto select como verdadeiro (HTML/JavaScript).
Jornada do novo usuário sem sessão do Google
Botão sem FedCM
O botão "Fazer login com o Google".
A primeira página para adicionar uma nova sessão do Google.
A segunda página para adicionar uma nova sessão do Google.
A nova página de consentimento do usuário.
Depois que o usuário confirma, um token de ID é compartilhado com seu site.
Botão usando FedCM
A penúltima tela do fluxo é a tela de carregamento, que redireciona automaticamente os usuários para o endpoint de login sem que eles precisem fazer nada.
Jornada do usuário que retorna sem sessão do Google
Botão sem FedCM
O botão "Fazer login com o Google".
A primeira página para adicionar uma nova sessão do Google.
A segunda página para adicionar uma nova sessão do Google.
Depois que o usuário clica no botão Próxima, um token de ID é compartilhado com seu site.
Botão usando FedCM
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.
Botão sem FedCM
No-Google-session
O botão "Fazer login com o Google".
A primeira página para adicionar uma nova sessão da criança (e-mail da Conta do Google da criança).
A segunda página para adicionar uma nova sessão da criança (senha da Conta do Google da criança).
A primeira página para receber a aprovação do responsável para adicionar uma nova sessão filha do Google.
A segunda página para receber a aprovação do familiar responsável para adicionar uma nova sessão filha do Google.
Terceira página para receber a aprovação do responsável para adicionar uma nova sessão filha do Google.
A primeira página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.
A segunda página para receber a aprovação do familiar responsável para fazer login com uma Conta do Google de uma criança no app.
Terceira página para receber a aprovação do responsável para fazer login com uma Conta do Google de uma criança no app.
Página final para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.
Depois que o responsável clica no botão Continuar, um token de ID é compartilhado com seu site.
Has-Google-session
O botão "Fazer login com o Google".
Página do seletor de contas.
A primeira página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.
A segunda página para receber a aprovação do familiar responsável para fazer login com uma Conta do Google de uma criança no app.
Terceira página para receber a aprovação do responsável para fazer login com uma Conta do Google de uma criança no app.
Página final para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.
Depois que o responsável clica no botão Continuar, um token de ID é compartilhado com seu site.
Botão usando FedCM
No momento, o botão "Fazer login com o Google" com o FedCM ativado não oferece suporte a contas do Family Link.
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.
