Migrar para o FedCM

Neste guia, você verá as mudanças no aplicativo da Web introduzidas pela API Federated Credentials Management (FedCM).

Quando a FedCM está ativada, o navegador exibe as solicitações do usuário e nenhum cookie de terceiros é usado.

Visão geral

O Sandbox de privacidade para a Web e a remoção de cookies de terceiros do Chrome trazem mudanças significativas nos Serviços de Identificação do Google e no login do usuário.

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

Para a maioria dos sites, a migração ocorre sem problemas usando atualizações compatíveis com versões anteriores para a biblioteca JavaScript dos Serviços de Identificação do Google.

Atualizações no recurso de login automático

O Federated Credential Management (FedCM) Beta para os Serviços de Identificação do Google foi lançado em agosto de 2023. Muitos desenvolvedores testaram a API e forneceram um feedback valioso.

Uma resposta que o Google ouviu dos desenvolvedores é sobre o requisito de gesto do usuário do fluxo de login automático da FedCM. Para melhorar a privacidade, 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 reconfirmação única é feita com um único clique na solicitação de um toque para demonstrar a intenção do usuário de fazer login. Essa mudança pode causar uma 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 na UX do fluxo de login automático da FedCM. A reconfirmação só é necessária quando cookies de terceiros são restritos. Isso significa que:

  1. Antes das restrições de cookies de terceiros aumentarem para 100% no 3o trimestre de 2024, o login automático da FedCM não exige reconfirmação para usuários recorrentes. Se os usuários confirmarem novamente com a interface da FedCM, essa reconfirmação vai contar para o requisito de gestos do usuário após a terceira PCD.

  2. O login automático da FedCM vai verificar o status de reconfirmação quando os cookies de terceiros forem restritos manualmente pelos usuários hoje ou por padrão no Chrome no futuro.

Recomendamos que todos os desenvolvedores de login automático migrem para a FedCM o mais rápido possível para reduzir a interrupção das taxas de conversão de login automático.

Para o fluxo de login automático, o GIS JavaScript não acionará o FedCM em um Chrome mais antigo (anterior à versão M121), mesmo que o site opte pela ativação do FedCM.

Diferenças da jornada do usuário

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

Novo usuário de sessão única

Ao usar o FedCM, o recurso de 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 FedCM Novo usuário de sessão única sem FedCM

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

Ao usar o FedCM, o recurso de um toque mostra o nome do domínio em vez do nome do aplicativo.

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

Usuário recorrente de sessão única (com 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 recorrente de uma única sessão usando FedCM (com login automático ativado) Jornada do usuário recorrente de uma única sessão sem FedCM (com login automático ativado)

Várias sessões

Ao usar o FedCM, o recurso de 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 usando 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. Recomendamos atualizar para a versão mais recente.

  • A API FedCM está disponível no Chrome 117 ou mais recente.

  • 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 ative o recurso experimental FedCmWithoutThirdPartyCookies. Esta etapa não é necessária na versão 120 ou mais recente do navegador Chrome.

Migrar seu app da Web

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

1. Adicione uma sinalização 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 retorna mais nenhuma notificação de momento de exibição no objeto PromptMomentNotication. Remova todos os códigos que dependem dos métodos relacionados ao momento da exibição. Eles são os métodos isDisplayMoment(), isDisplayed(), isNotDisplayed() e getNotDisplayedReason().

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

Embora o momento de pular, isSkippedMoment(), ainda seria chamado a partir do callback google.accounts.id.prompt no objeto PromptMomentNotication, o motivo detalhado não seria fornecido. Remova do seu código todos os códigos que dependam do método getSkippedReason().

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

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

O navegador controla o tamanho e a posição das solicitações do usuário. Não há suporte para posições personalizadas para um toque na área de trabalho.

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 do layout das páginas individuais, alguns conteúdos podem ser sobrepostos como posições personalizadas para um toque no computador, por exemplo, atributo de estilo, data-prompt_parent_id, intermediate_iframes, iframe personalizado e outras formas criativas.

Mude o layout da página para melhorar a experiência do usuário quando informações importantes são ocultadas. Não crie sua UX em torno do comando de um toque, mesmo que você presuma que ele esteja na posição padrão. Como a API FedCM é mediada pelo navegador, diferentes fornecedores de navegador podem posicionar a posição da solicitação de maneira um pouco diferente.

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

Um iframe é considerado de origem cruzada quando a origin não é exatamente igual à origem pai. Por exemplo:

  • Domínios diferentes: https://example1.com e https://example2.com
  • Diferentes domínios de nível superior: 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, é necessário adicionar o atributo allow="identity-credentials-get" em todas as tags iframe de frame pai:

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

    Se o app usa um iframe que contém outro iframe, é necessário garantir que o atributo seja adicionado a todos os 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).

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

    Para garantir que o recurso "um toque" seja exibido corretamente, o atributo precisa ser adicionado às tags iframe A e iframe B.

    Preparar para consultas na solicitação de um toque não exibida. Outros sites com origens diferentes podem incorporar suas páginas que hospedam o recurso com um toque nos iframes. Talvez você receba um aumento na quantidade de tíquetes de suporte relacionados ao recurso de um toque que não são mostrados de usuários finais ou outros proprietários de sites. As atualizações só podem ser feitas pelos proprietários nas páginas deles, mas você pode fazer o seguinte para reduzir o impacto:

  • Atualize a documentação do desenvolvedor para incluir como configurar o iframe corretamente para chamar o site. Você pode incluir um link para esta página na sua documentação.

  • Atualize sua página de perguntas frequentes para desenvolvedores, se aplicável.

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

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

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

Essa etapa é opcional porque nem todos os sites definem uma CSP.

  • Se o CSP não for usado no seu site, nenhuma alteração será necessária.

  • Se a CSP funcionar para o "um toque" atual e você não usar connect-src, frame-src, script-src, style-src ou default-src, nenhuma mudança será necessária.

  • Caso contrário, siga este guia para configurar sua CSP. Sem a configuração adequada da CSP, o recurso de um toque do FedCM não seria exibido no site.

8. Remover o suporte a Accelerated Mobile Pages (AMP) para login.

A compatibilidade com o login do usuário para AMP é um recurso opcional do SIG que seu app da Web possa ter implementado. Nesse caso,

Exclua todas as referências ao seguinte:

  • 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 as solicitações de login da AMP para o fluxo de login HTML do site. Os Intermediate Iframe Support API relacionados não são afetados.

Testar e verificar a migração

Depois de fazer as mudanças necessárias com base nas etapas anteriores, é possível verificar se a migração foi bem-sucedida.

  1. Confirme se o navegador é compatível com o FedCM e se você tem uma sessão em uma Conta do Google.

  2. Navegue até as páginas com um toque no seu aplicativo.

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

  4. Confirme se uma credencial correta retorna ao endpoint ou método de callback ao fazer login no app usando o recurso de um toque.

  5. Se o login automático estiver ativado, verifique se o cancelamento funciona e se a credencial correta é retornada para seu endpoint ou método de callback.

Período de espera com um toque

Clicar em um toque no canto superior direito fecha a solicitação e entra no período de espera que suprime a exibição temporária dessa solicitação. No Chrome, se você quiser que a solicitação de um toque apareça novamente antes do fim do período de espera, redefina 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 a FedCM, ele tem um período de silêncio de 10 minutos entre cada tentativa de login automático. Não é possível redefinir o período de silêncio. Você teria que esperar 10 minutos ou usar outra Conta do Google para o teste a fim de acionar o login automático novamente.

Recursos úteis

A Ferramenta de análise do Sandbox de privacidade (PSAT, na sigla em inglês) é uma extensão do Chrome DevTools com recursos especializados para ajudar os desenvolvedores a lidar com a descontinuação de cookies de terceiros e a adoção de APIs alternativas. Ele verifica o site em busca de recursos afetados e fornece uma lista de mudanças recomendadas.