Migrar para o FedCM

Este guia ajuda a entender as mudanças no seu aplicativo da Web introduzido pelo API Federated Credentials Management (FedCM).

Quando o FedCM está ativado, o navegador mostra as solicitações do usuário e nenhum método de terceiros cookies são usados.

Visão geral

O FedCM permite mais fluxos de login particulares sem exigir o uso de cookies de terceiros. O navegador controla as configurações do usuário, exibe comandos e só entra em contato com um provedor de identidade como o Google depois que o usuário consentimento é fornecido.

Para a maioria dos sites, a migração ocorre perfeitamente por meio de compatibilidade com versões anteriores atualizações na biblioteca JavaScript dos Serviços de Identificação do Google.

Atualizações no recurso de login automático

Gerenciamento de credenciais federadas (FedCM, na sigla em inglês) Beta para Serviços de Identificação do Google foi lançado em agosto de 2023. Muitos desenvolvedores testaram a API e forneceram feedback valioso.

Uma resposta que o Google ouviu dos desenvolvedores é sobre o login automático do FedCM requisito de gestos do usuário do fluxo. Para melhorar a privacidade, o Chrome exige que os usuários confirme novamente que deseja 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 FedCM lançamento. Essa reconfirmação única é conseguida com um único clique no Solicitação de um toque para demonstrar a intenção do usuário de fazer login. Essa mudança pode causar interrupção inicial nas taxas de conversão de login automático para alguns sites.

Recentemente, na versão M121, o Chrome fez uma mudança no login automático do FedCM fluxo de UX. A reconfirmação só é necessária quando cookies de terceiros são restritas. Isso significa que:

  1. O login automático do FedCM não exige uma nova confirmação para usuários recorrentes. Se os usuários confirmarem novamente com a interface do FedCM, essa reconfirmação contará para a requisito de gestos do usuário na era pós-3PCD.

  2. O login automático do FedCM vai verificar o status de reconfirmação quando o cookies de terceiros são atualmente restritos manualmente pelos usuários ou por padrão futuro Chrome.

Com essa mudança, recomendamos que todos os desenvolvedores de login automático migrem para o FedCM assim que possível, para reduzir a interrupção das taxas de conversão automática de login.

Para o fluxo de login automático, o SIG JavaScript não acionará o FedCM em uma versão Chrome (anterior à versão M121), mesmo que seu site ative o FedCM.

Diferenças da jornada do usuário

As experiências com um toque usando e sem o FedCM são semelhantes apenas com há pequenas diferenças.

Novo usuário de sessão única

Usando o FedCM, um toque mostra o nome do domínio em vez do nome do aplicativo.

Como usar o FedCM Sem FedCM
Novo usuário de sessão única usando o FedCM Novo usuário de sessão única sem o FedCM

Usuário recorrente de sessão única (com o login automático desativado)

Usando o FedCM, um toque mostra o nome do domínio em vez do nome do aplicativo.

Como usar o FedCM Sem FedCM
Jornada do usuário que retorna em uma sessão usando o FedCM (com o login automático desativado) Jornada do usuário recorrente de sessão única sem o FedCM (com o login automático desativado)

Usuário recorrente de sessão única (com o login automático ativado)

Com o FedCM, os usuários podem clicar no X para cancelar o login automático em até cinco segundos em vez de clicar no botão Cancelar.

Como usar o FedCM Sem FedCM
Jornada do usuário que retorna em uma sessão usando o FedCM (com o login automático ativado) Jornada do usuário recorrente de sessão única sem o FedCM (com o login automático ativado)

Várias sessões

Usando o FedCM, um toque mostra o nome do domínio em vez do nome do aplicativo.

Como usar o FedCM Sem FedCM
Usuário de várias sessões que usa FedCM Usuário de várias sessões sem FedCM

Antes de começar

Verifique se as configurações e a versão do navegador são compatíveis com a API FedCM, é recomendável atualizar para a versão mais recente.

  • A API FedCM está disponível no Chrome 117 ou em versões mais recentes.

  • A configuração Login de terceiros está ativada no Chrome.

  • Se a versão do navegador Chrome for 119 ou anterior, abra chrome://flags e ativar o recurso experimental FedCmWithoutThirdPartyCookies. Esta etapa não é necessária no navegador Chrome versão 120 ou mais recente.

Migrar seu app da Web

Siga estas etapas para ativar o FedCM, avaliar o possível impacto da migração e se necessário para fazer alterações no seu aplicativo da Web atual:

1. Adicione uma flag booleana para ativar o FedCM ao inicializar usando:

2. Remova o uso dos métodos isDisplayMoment(), isDisplayed(), isNotDisplayed() e getNotDisplayedReason() no código.

Para melhorar a privacidade do usuário, o callback google.accounts.id.prompt não permite mais retorna qualquer notificação de momento de exibição na objeto PromptMomentNotication. Remova qualquer código que dependa mostrar métodos relacionados ao momento. São eles: isDisplayMoment(), isDisplayed(), isNotDisplayed() e getNotDisplayedReason().

3. Remova o uso do método getSkippedReason() no código.

O momento de pular, isSkippedMoment(), ainda é chamado pelo Callback google.accounts.id.prompt no PromptMomentNotication objeto, o motivo detalhado não será fornecido. Remova todos os códigos que dependam o método getSkippedReason() do seu código.

Observe que a notificação de momento dispensada, isDismissedMoment(), e o método de motivo detalhado relacionado, getDismissedReason(), não foram alterados quando o FedCM está ativado.

4. Remova os atributos de estilo position de data-prompt_parent_id e intermediate_iframes.

O navegador controla o tamanho e a posição dos comandos do usuário e as posições personalizadas para um toque em computadores não são compatíveis.

5. Atualize o layout da página se necessário.

O navegador controla o tamanho e a posição das solicitações do usuário. Dependendo da o layout de páginas individuais, alguns conteúdos podem ser sobrepostos posições para um toque no computador não são suportadas de nenhuma forma, como atributo de estilo, data-prompt_parent_id; intermediate_iframes, iframe personalizado e outras formas criativas.

Alterar o layout da página para melhorar a experiência do usuário quando houver informações importantes é ocultado. Não crie a UX com base no comando de um toque, mesmo que você presuma ele está na posição padrão. Como a API FedCM é mediada pelo navegador, diferentes fornecedores de navegador podem posicionar ligeiramente a posição do prompt de maneiras diferentes.

6. Adicione o atributo allow="identity-credentials-get" ao frame pai se o app da Web chamar a API One Tap de iframes de origem cruzada.

Um iframe é considerado de origem cruzada se seu origin não é exatamente igual ao mãe. Por exemplo:

  • Domínios diferentes: https://example1.com e https://example2.com
  • Domínios de nível superior diferentes: https://example.uk e https://example.jp

  • Subdomínios: https://example.com e https://login.example.com

    Para melhorar a privacidade do usuário, quando a API One Tap é chamada usando iframes de origem cruzada, é preciso adicionar allow="identity-credentials-get" em cada tag iframe de frame pai:

    <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

    Se o app usar um iframe que contenha outro iframe, garantir que o atributo seja adicionado a cada iframe, incluindo todos os sub-iframes.

    Por exemplo, considere este cenário:

  • O documento superior (https://www.example.uk) contém um iframe chamado "Iframe". A", que incorpora uma página (https://logins.example.com).

  • Esta página incorporada (https://logins.example.com) também contém um iframe chamada "Iframe B", que incorpora ainda mais uma página (https://onetap.example2.com) que hospeda um toque.

    Para garantir que um toque possa ser exibido corretamente, o atributo deve ser adicionado às tags iframe A e B.

    Prepare-se para consultas sobre a solicitação de um toque não exibida. Outros sites com origens diferentes podem incorporar suas páginas que hospedam um toque dentro dos iframes. Talvez você receba uma quantidade maior de tíquetes de suporte relacionadas à ausência de um toque de usuários finais ou outros proprietários do site. as atualizações só possam ser feitas pelos proprietários do site nas páginas deles, faça o a seguir para reduzir o impacto:

  • Atualizar a documentação do desenvolvedor para incluir como configurar o iframe corretamente para chamar seu site. É possível incluir um link para esta página na sua documentação.

  • Atualize a página de perguntas frequentes do desenvolvedor, se aplicável.

  • Informe sua equipe de suporte sobre essa mudança e prepare-se para a resposta à consulta com antecedência.

  • Entre em contato de forma proativa com parceiros, clientes ou proprietários de sites afetados para receber uma transição suave do FedCM.

7. Adicione estas diretivas à sua Política de Segurança de Conteúdo (CSP).

Essa etapa é opcional, já que nem todos os sites definem uma CSP.

  • Se a CSP não for usada no seu site, nenhuma mudança vai ser necessária.

  • Caso sua CSP funcione para o recurso de um toque atual e você não use connect-src, frame-src, script-src, style-src ou default-src: nenhuma alteração foi feita necessários.

  • Caso contrário, siga este guia para configurar sua CSP. Sem um CSP adequado do dispositivo, o FedCM One Tap não seria exibido no site.

8. Remover a compatibilidade com Accelerated Mobile Pages (AMP) para login.

A compatibilidade com login de usuários em AMP é um recurso opcional do SIG do seu app da Web. podem ter implementado. Se esse for o caso,

Exclua todas as referências a:

  • Elemento personalizado amp-onetap-google

  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Considere redirecionar solicitações de login de AMP para o login HTML do seu site fluxo O Intermediate Iframe Support API relacionado é sem ser afetada.

Testar e verificar sua migração

Depois de fazer as mudanças necessárias com base nas etapas anteriores, você pode verificar a migração for bem-sucedida.

  1. Confirme se seu navegador é compatível com o FedCM e se você tem uma conta do Sessão da conta.

  2. Navegue até a(s) página(s) de um toque no seu aplicativo.

  3. Confirme se a solicitação de um toque aparece e se sobrepõe com segurança conteúdo.

  4. Confirmar se uma credencial correta retorna ao endpoint ou método de callback ao fazer login no aplicativo com um toque.

  5. Se o login automático estiver ativado, verifique se o cancelamento funciona e está correto a credencial correta retorna ao endpoint ou método de callback.

Período de espera com um toque

Clicando em com um toque no canto superior direito, fecha o comando e entra no período de espera, impede que a solicitação de um toque seja mostrada temporariamente. No Chrome, se você quiser que a solicitação de um toque apareça novamente antes do término do período de espera, pode redefinir o status de espera clicando no ícone de bloqueio na barra de endereço e clicando no botão Redefinir permissão.

Login automático em período de silêncio

Ao testar o login automático com um toque usando o FedCM, ele tem uma duração de 10 minutos período de silêncio entre cada tentativa de login automático. O período de silêncio não pode ser redefinido. Você precisa esperar 10 minutos ou usar outra Conta do Google. para teste a fim de acionar o login automático novamente.

Recursos úteis

A Ferramenta de análise de dados do Sandbox de privacidade (PSAT, na sigla em inglês) é uma extensão do Chrome DevTools para ajudar na adoção de APIs alternativas, como a FedCM. Ele funciona verificar seu site em busca de recursos afetados e fornece uma lista de recomendações mudanças.