Login do Google com APIs FedCM

Este guia aborda o impacto da descontinuação dos cookies de terceiros no Google Biblioteca da plataforma de login. Os tópicos incluem a linha do tempo e Próximas etapas para uma atualização da biblioteca compatível com versões anteriores, como Realize uma avaliação de impacto e verifique se o login do usuário continua o funcionamento esperado e, se necessário, instruções para atualizar seu aplicativo da web. Opções para Gerenciar o período de transição e como receber ajuda também serão abordados.

Status da biblioteca

Os novos apps da Web não podem usar a plataforma descontinuada de Login do Google biblioteca, enquanto os aplicativos que a usam podem continuar até segunda ordem. Um a data final de desativação (encerramento) da biblioteca não foi estabelecida. Consulte Descontinuação do suporte e desativação para mais informações.

O bloqueio de cookies de terceiros do Sandbox de privacidade do Chrome afeta os apps da Web. que usam a biblioteca de plataforma do Login do Google. Para preservar o comportamento atual, sem exigir o uso de cookies de terceiros, uma atualização compatível com versões anteriores adiciona APIs FedCM a essa biblioteca. Embora a maioria das mudanças seja perfeita, a introduz diferenças nas solicitações de consentimento do usuário, no iframe permissions-policy e Política de Segurança de Conteúdo (CSP). Essas mudanças pode afetar seu aplicativo da web e exigir alterações no código do aplicativo e configuração do Terraform.

Durante o período de transição, uma opção de configuração controla se As APIs FedCM são usadas durante o login do usuário.

Cronograma

Última atualização em julho de 2024

Estas são as datas e alterações que afetam o comportamento de login do usuário:

  • Março de 2023 Descontinuação do suporte para a plataforma de Login do Google biblioteca.
  • Janeiro de 2024: o Chrome bloqueia 1% dos cookies de terceiros, o Login do Google uma exceção temporária de cookies de terceiros com um teste de descontinuação.
  • Início do período de transição de julho de 2024 e biblioteca da plataforma Login do Google compatibilidade com as APIs FedCM foi adicionada. Por padrão, o Google controla o percentual de solicitações de login de usuários usando o FedCM durante esse período. Os apps da Web podem substituir explicitamente esse comportamento pelo parâmetro use_fedcm.
  • Adoção obrigatória (data a ser determinada) das APIs do FedCM pelo Google Biblioteca da plataforma de login, em que o parâmetro use_fedcm é ignorado. e todas as solicitações de login dos usuários usam o FedCM.

Depois de migrar para as APIs FedCM, a biblioteca da plataforma de Login do Google não é mais são afetadas pelo bloqueio de cookies de terceiros. Para atualizações sobre cookies de terceiros de bloqueio, consulte a linha do tempo do Sandbox de privacidade do Chrome.

Próximas etapas

Há três opções que você pode escolher seguir:

  1. Faça uma avaliação de impacto e, se necessário, atualize seu app da Web. Essa abordagem avalia se os recursos que exigem mudanças no seu app da Web são em uso. As instruções são fornecidas na próxima seção deste guia.
  2. Mover para biblioteca dos Serviços de Identificação do Google (GIS). Migrar para a versão mais recente é altamente recomendável usar uma biblioteca de login com suporte. Faça isso seguindo estas instruções.
  3. Não fazer nada: Seu aplicativo da web será atualizado automaticamente quando o A biblioteca de Login do Google foi movida para as APIs do FedCM para o login do usuário. Esta é a não funcionam, mas existe o risco de os usuários não conseguirem fazer login seu app da Web.

Realizar uma avaliação de impacto

Siga estas instruções para determinar se seu aplicativo da web pode ser atualizado com facilidade por meio de uma atualização compatível com versões anteriores ou se forem necessárias alterações para evitar os usuários não conseguem fazer login quando a biblioteca da plataforma de Login do Google está totalmente adota as APIs do FedCM.

Configuração

As APIs de navegador e a versão mais recente da biblioteca da plataforma de Login do Google estão necessário para usar o FedCM durante o login do usuário.

Antes de continuar:

  • Atualize para a versão mais recente do Chrome para computador. Google Chrome para Android Requer a versão M128 ou mais recente e não pode ser testado usando versões anteriores.

  • Abra chrome://flags e defina os seguintes recursos com estes valores:

    • #fedcm-authz Ativado, caso seu site use uma Política de Segurança de Conteúdo que bloqueia https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd Ativado
    • #third-party-cookie-deprecation-trial Desativado
    • #tpcd-metadata-grants Desativado
    • #tpcd-heuristics-grants Desativada

    e reinicie o Chrome.

  • Defina use_fedcm como true ao inicializar a plataforma de Login do Google no seu app da Web. Normalmente, a inicialização tem esta aparência:

    • gapi.client.init({use_fedcm: true}) ou
    • gapi.auth2.init({use_fedcm: true}) ou
    • gapi.auth2.authorize({use_fedcm: true}).

  • Invalidar versões em cache da biblioteca da plataforma do Login do Google. Normalmente, esta etapa não é necessária, pois a versão mais recente da biblioteca é transferidos por download diretamente no navegador incluindo api.js, client.js ou platform.js em uma tag <script src> (a solicitação pode usar qualquer um desses nomes de pacotes para a biblioteca).

  • Confirme as configurações do OAuth para seu ID do cliente OAuth:

    1. Abra a página "Credenciais" do Google API Console

    2. Verifique se o URI do seu site está incluído no Origens JavaScript autorizadas. O URI inclui o esquema e somente nome do host totalmente qualificado. Por exemplo, https://www.example.com.

    3. Opcionalmente, as credenciais podem ser retornadas usando um redirecionamento para um endpoint hospedado por você e não por um callback de JavaScript. Se esse for o caso, Verifique se os URIs de redirecionamento estão incluídos nos URIs de redirecionamento autorizados. Os URIs de redirecionamento incluem o esquema, o nome do host totalmente qualificado e o caminho e precisa obedecer às regras de validação do URI de redirecionamento. Por exemplo, https://www.example.com/auth-receiver.

Teste

Depois de seguir as instruções na configuração:

Localizar a solicitação da biblioteca do Login do Google

Verifique se as alterações na permissions-policy e na Política de Segurança de Conteúdo estão necessário inspecionando a solicitação para a biblioteca da plataforma de Login do Google. Para fazer isso, localize a solicitação usando o nome e a origem da biblioteca:

  • No Chrome, abra o painel Rede do DevTools e atualize a página.
  • Use os valores nas colunas Domínio e Nome para localizar a biblioteca. solicitação:
    • O domínio é apis.google.com e
    • O nome é api.js, client.js ou platform.js. A página o valor de Nome depende do pacote de biblioteca solicitado pelo documento.

Por exemplo, filtre apis.google.com na coluna Domínio e platform.js na coluna Nome.

Verificar a política de permissões do iframe

Seu site pode usar a biblioteca da plataforma de Login do Google em um conjunto iframe. Nesse caso, é necessário fazer uma atualização.

Depois de seguir o artigo Localizar a solicitação da biblioteca do Login do Google instruções, selecione a solicitação da biblioteca de Login do Google no DevTools Rede e localize o cabeçalho Sec-Fetch-Site nos a seção Cabeçalhos de solicitação na guia Cabeçalhos. Se o valor do cabeçalho é:

  • same-siteou same-origin, as políticas de origem cruzada não serão aplicadas e não mudanças são necessárias.
  • Alterações no cross-origin podem ser necessárias se um iframe estiver sendo usado.

Para confirmar se um iframe está presente, faça o seguinte:

  • Selecione o painel Elementos no Chrome DevTools.
  • Use Ctrl + F para encontrar um iframe no documento.

Se um iframe for encontrado, inspecione o documento para verificar se há chamadas para gapi.auth2. de funções ou script src que carregam a biblioteca do Login do Google no iframe. Nesse caso:

Repita esse processo para cada iframe no documento. os iframes podem ser aninhados, adicione a diretiva allow em todos os iframes pai próximos.

Verifique a Política de Segurança de Conteúdo

Se seu site usa uma Política de Segurança de Conteúdo, pode ser necessário atualizar sua CSP para: permitir o uso da biblioteca do Login do Google.

Depois de seguir o artigo Localizar a solicitação da biblioteca do Login do Google instruções, selecione a solicitação da biblioteca de Login do Google no DevTools Rede e localize o cabeçalho Content-Security-Policy nos seção Cabeçalhos de resposta da guia Cabeçalhos.

Se o cabeçalho não for encontrado, nenhuma alteração será necessária. Caso contrário, verifique se há essas diretivas da CSP são definidas no cabeçalho da CSP e as atualizam da seguinte forma:

  • Adicionando https://apis.google.com/js/, https://accounts.google.com/gsi/, e https://acounts.google.com/o/fedcm/ para qualquer connect-src, default-src ou frame-src.

  • Adicionando a https://apis.google.com/js/bundle-name.js ao script-src diretiva. Substitua bundle-name.js por api.js, client.js ou platform.jscom base no pacote da biblioteca das solicitações de documento.

Verificar se há mudanças no prompt do usuário

Há algumas diferenças no comportamento dos comandos do usuário, e o FedCM adiciona uma caixa de diálogo modal. exibido pelo navegador e atualiza os requisitos de ativação do usuário.

Imagem da caixa de diálogo modal do FedCM

Inspecione o layout do seu site para confirmar se o conteúdo subjacente pode ser sobrepostas com segurança e temporariamente obscurecidas pela caixa de diálogo modal do navegador. Se esse talvez seja necessário ajustar o layout ou a posição de alguns elementos do seu site.

Ativação do usuário

O FedCM inclui requisitos atualizados de ativação do usuário. Pressionar um botão ou clicar em um link são exemplos de gestos do usuário que permitem origens de terceiros para fazer solicitações de rede ou armazenar dados. Com o FedCM, o navegador solicita o consentimento do usuário quando:

  • um usuário faz login em um app da Web pela primeira vez usando uma nova instância do navegador; ou
  • GoogleAuth.signIn é chamado.

Atualmente, se o usuário já tiver feito login em seu site, você pode obter as informações de login do usuário ao inicializar a biblioteca do Login do Google usando gapi.auth2.init, sem mais interações do usuário.

Devido à descontinuação dos cookies de terceiros, isso não é mais possível, a menos que o usuário passou pela primeira vez pelo fluxo de login do FedCM pelo menos uma vez.

Ao ativar o FedCM e chamar GoogleAuth.signIn, na próxima vez o mesmo o usuário acessar seu site, o gapi.auth2.init poderá fazer login informações durante a inicialização sem interação do usuário.

Casos de uso comuns

A documentação do desenvolvedor da biblioteca do Login do Google inclui guias e códigos amostras de casos de uso comuns. Esta seção discute como a FedCM afeta as do seu modelo.

  • Como integrar o Login do Google ao seu app da Web

    Nesta demo, um elemento <div> e uma classe renderizam o botão. para os usuários já conectados, o evento da página onload retorna o usuário credenciais. A interação do usuário é necessária para fazer login e estabelecer um novo sessão.

    A inicialização da biblioteca é feita pela classe g-signin2, que chama gapi.load e gapi.auth2.init.

    Um gesto do usuário, um evento onclick do elemento <div>, chama auth2.signIn durante o login ou auth2.signOut ao sair.

  • Como criar um botão personalizado do Login do Google

    Na demonstração 1, os atributos personalizados são usados para controlar a aparência dos o botão de login e, para os usuários já conectados, o evento onload da página retorna credenciais do usuário. A interação do usuário é necessária para fazer login e estabelecer uma nova sessão.

    A inicialização da biblioteca é feita por um evento onload para o platform.js biblioteca e o botão é mostrado por gapi.signin2.render.

    Um gesto do usuário pressionando o botão de login chama auth2.signIn.

    Na demonstração 2, um elemento <div>, estilos CSS e um gráfico personalizado estão usada para controlar a aparência do botão de login. A interação do usuário é necessário para fazer login e estabelecer uma nova sessão.

    A inicialização da biblioteca é feita no carregamento do documento usando uma função start que chama gapi.load, gapi.auth2.init e gapi.auth2.attachClickHandler

    Um gesto do usuário, um evento onclick do elemento <div>, chama auth2.signIn usando o auth2.attachClickHandler durante o login ou auth2.signOut em logout.

  • Como monitorar o estado da sessão do usuário

    Nesta demo, o pressionamento de um botão é usado para login e logout do usuário. A interação do usuário é necessária para fazer login e estabelecer uma nova sessão.

    A inicialização da biblioteca é feita chamando gapi.load diretamente, gapi.auth2.init e gapi.auth2.attachClickHandler() depois platform.js é carregado usando script src.

    Um gesto do usuário, um evento onclick do elemento <div>, chama auth2.signIn usando o auth2.attachClickHandler durante o login ou auth2.signOut em logout.

  • Como solicitar permissões adicionais

    Nesta demo, o pressionamento de um botão é usado para solicitar mais acesso ao OAuth 2.0 obter um novo token de acesso e, para usuários já conectados, o o evento da página onload retorna as credenciais do usuário. A interação do usuário é obrigatória para fazer login e estabelecer uma nova sessão.

    A inicialização da biblioteca é feita pelo evento onload para o platform.js usando uma chamada para gapi.signin2.render.

    Um gesto do usuário, clicando em um elemento <button>, aciona uma solicitação de escopos OAuth 2.0 adicionais usando googleUser.grant ou auth2.signOut ao sair.

  • Como integrar o Login do Google usando listeners

    Nesta demo, para usuários já conectados, o evento onload da página retorna credenciais do usuário. A interação do usuário é necessária para fazer login e estabelecer uma nova sessão.

    A inicialização da biblioteca é feita no carregamento do documento usando uma função start que chama gapi.load, gapi.auth2.init e gapi.auth2.attachClickHandler A seguir, auth2.isSignedIn.listen e Os auth2.currentUser.listen são usados para configurar notificações de mudanças em estado da sessão. Por fim, auth2.SignIn é chamado para retornar credenciais de usuários conectados.

    Um gesto do usuário, um evento onclick do elemento <div>, chama auth2.signIn usando o auth2.attachClickHandler durante o login ou auth2.signOut em logout.

  • Login do Google para apps do lado do servidor

    Nesta demo, um gesto do usuário é usado para solicitar um código de autenticação do OAuth 2.0 e um retorno de chamada JS faz uma chamada AJAX para enviar a resposta ao back-end servidor para verificação.

    A inicialização da biblioteca é feita usando um evento onload para o platform.js. que usa uma função "start" para chamar gapi.load e gapi.auth2.init.

    Um gesto do usuário, clicando em um elemento <button>, aciona uma solicitação de um código de autorização chamando auth2.grantOfflineAccess.

  • SSO multiplataforma

    A FedCM exige consentimento para todas as instâncias do navegador, mesmo que os usuários do Android já tiver feito login, é necessário dar um consentimento único.

Gerenciar o período de transição

Durante o período de transição, uma porcentagem dos logins de usuários pode usar o FedCM, a a porcentagem exata pode variar e mudar com o tempo. Por padrão, o Google controla Quantas solicitações de login usam o FedCM, mas você pode ativar ou desativar o recurso usando o FedCM durante o período de transição. No final do período de transição O FedCM se torna obrigatório e é usado para todas as solicitações de login.

A ativação direciona o usuário pelo fluxo de login do FedCM, enquanto escolhe para recusar, direciona os usuários pelo fluxo de login existente. Esse comportamento é controlado usando o parâmetro use_fedcm.

Ativar

Pode ser útil controlar se todas ou algumas tentativas de login usam as APIs FedCM. Para fazer isso, defina use_fedcm como true ao inicializar biblioteca da plataforma. A solicitação de login do usuário usa APIs FedCM nesse caso.

Desativar

Durante o período de transição, uma porcentagem das tentativas de login dos usuários no seu site vai usar as APIs do FedCM por padrão. Se precisar de mais tempo para fazer alterações app, você pode desativar temporariamente o uso das APIs FedCM. Para fazer isso, defina use_fedcm para false ao inicializar a biblioteca da plataforma. Login do usuário não usará APIs do FedCM nesse caso.

Após a adoção obrigatória, todas as configurações do use_fedcm serão ignoradas pelo Biblioteca da plataforma do Login do Google.

Ajuda

Pesquise ou faça perguntas no StackOverflow usando a tag google-signin.