Esta página foi traduzida pela API Cloud Translation.

Migrar para o FedCM

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

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

Informações gerais

O Sandbox de privacidade para a Web e a remoção de cookies de terceiros da Web pelo Chrome introduzem 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 do usuário e só entra em contato com um provedor de identidade, como o Google, depois que o consentimento explícito do usuário é fornecido.

Na maioria dos sites, a migração ocorre perfeitamente com atualizações compatíveis com versões anteriores da biblioteca JavaScript dos Serviços de Identificação do Google.

Antes de começar

Verifique se o navegador e a versão dele são compatíveis com a API FedCM. Atualize para uma versão mais recente, se necessário.

Antes de testar os fluxos de login com cookies de terceiros bloqueados, abra chrome://flags e ative o recurso experimental FedCmWithoutThirdPartyCookies. Essa etapa só é necessária até que se torne o padrão. Além disso, a configuração Login de terceiros precisa estar ativada no Chrome.

Migrar seu app da Web

Siga estas etapas para ativar o 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:

HTML, defina o atributo data-use_fedcm_for_prompt como true.
JavaScript, defina use_fedcm_for_prompt como true no objeto IdConfiguration.

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 dependam dos métodos relacionados ao momento de 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.

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

A notificação do momento dispensado, isDismissedMoment(), e o método de motivo detalhado relacionado, getDismissedReason(), não são modificados 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 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, 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 da solicitação de um toque, mesmo que você presuma que ela esteja na posição padrão. Como a API FedCM é mediada pelo navegador, fornecedores de navegadores diferentes podem posicionar a posição do prompt 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 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 for chamada usando iframes de origem cruzada, você precisa 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 subiframes.

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 chamado "Iframe B", que também incorpora uma página (https://onetap.example2.com) que hospeda o recurso "Um toque".

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

Observação: a API de iframe intermediário é compatível com iframes de origem cruzada da FedCM. Nenhum atributo adicional é necessário. No entanto, se você incorporar uma página usando a API de iframe intermediário em outro iframe, será necessário adicionar o atributo allow="identity-credentials-get" a todos os iframes pai. Ative o FedCM para testar e garantir a configuração da política de permissão adequada em todas as camadas.

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 exibidos para usuários finais ou outros proprietários de sites. As atualizações só podem ser feitas pelos proprietários do site 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 seu site. É possível incluir um link para essa 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 se prepare para responder à consulta com antecedência.
Entre em contato de maneira proativa com parceiros, clientes ou proprietários de sites afetados para facilitar a transição da 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 alteração será necessária. * Se sua 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 do CSP adequada, o um toque do FedCM não será exibido no site.

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

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

Exclua todas as referências a:

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

Recomendamos redirecionar as solicitações de login da AMP para o fluxo de login HTML do seu site. Os Intermediate Iframe Support API relacionados não são afetados.