Configuração

Antes de adicionar o recurso "Fazer login com o Google", "One Tap" ou o login automático ao seu site, configure o OAuth e, opcionalmente, a política de segurança de conteúdo do site.

Receber o ID do cliente da API do Google

Para ativar o recurso no seu site, primeiro você precisa configurar o ID do cliente da API do Google. Para isso, siga estas etapas:

  1. Abra a página Credenciais do Console de APIs do Google.
  2. Crie ou selecione um projeto de APIs do Google. Se você já tiver um projeto para o botão "Fazer login com o Google" ou o Google One Tap, use o projeto atual e o ID do cliente da Web. Ao criar aplicativos de produção, vários projetos forem necessários, repita as etapas restantes. desta seção para cada projeto que você gerencia.
  3. Clique em Criar credenciais > ID do cliente OAuth e, em Tipo de app, selecione Aplicativo da Web para criar um novo ID do cliente. Para usar um ID de cliente existente, selecione um do tipo Aplicativo da Web.

  4. Adicione o URI do site a Origens JavaScript autorizadas. URI inclui apenas o esquema e o nome do host totalmente qualificado. Por exemplo, https://www.example.com.

  5. Como opção, as credenciais podem ser retornadas usando um redirecionamento para um endpoint que você hospeda, em vez de um callback do JavaScript. Se este for o caso, adicione seus URIs de redirecionamento para URIs de redirecionamento autorizados. Os URIs de redirecionamento incluem o esquema, o nome de host totalmente qualificado e o caminho e precisam obedecer às regras de validação de URI de redirecionamento. Por exemplo, https://www.example.com/auth-receiver.

Tanto o recurso "Fazer login com o Google" quanto a autenticação com um toque incluem uma tela de consentimento que informa aos usuários o aplicativo que está solicitando acesso aos dados, o tipo de dados solicitados e os termos aplicáveis.

  1. Abra a página Tela de consentimento OAuth do APIs e Seção "Serviços" do Google Developer Console.
  2. Se for solicitado, selecione o projeto que você acabou de criar.

  3. Na "Tela de permissão OAuth" preencha o formulário e clique no botão "Salvar" .

    1. Nome do aplicativo: o nome do aplicativo que solicita o consentimento. O nome precisa refletir com precisão seu aplicativo e ser consistente. com o nome do aplicativo que os usuários veem em outros lugares.

    2. Logotipo do aplicativo: essa imagem aparece na tela de consentimento para ajudar os usuários a reconhecerem seu app. O logotipo aparece na tela de consentimento do "Fazer login com o Google" e nas configurações da conta, mas não aparece na caixa de diálogo "Um toque".

    3. E-mail de suporte:mostrado na tela de consentimento para o suporte ao usuário e para o G Administradores do Suite que avaliam o acesso ao seu aplicativo para os usuários. Esse endereço de e-mail é mostrado aos usuários no consentimento do recurso Fazer login com o Google quando o usuário clicar no nome do aplicativo.

    4. Escopos para APIs do Google: os escopos permitem que seu aplicativo acesse os dados particulares do usuário. Para a autenticação, o escopo padrão (email, profile, openid) é suficiente, você não precisa adicionar nenhum escopos confidenciais. Geralmente, é recomendável solicitar escopos de forma incremental, no momento em que o acesso é necessário, em vez de fazer isso com antecedência. Saiba mais

    5. Domínios autorizados: para proteger você e seus usuários, o Google permite que apenas aplicativos que autenticam usando o OAuth usem domínios autorizados. Os links dos seus aplicativos precisam ser hospedados em domínios autorizados. Saiba mais.

    6. Link da página inicial do aplicativo: mostrado na tela de consentimento do recurso "Fazer login com o Google" e nas informações de exoneração de responsabilidade em conformidade com o GDPR em um toque, abaixo do botão "Continuar como". Precisa ser hospedado em um domínio autorizado.

    7. Link da Política de Privacidade do aplicativo: exibido na tela de consentimento do recurso "Fazer login com o Google" e nas informações de exoneração de responsabilidade em conformidade com o GDPR em um toque no botão "Continuar como". Precisa ser hospedado em um domínio autorizado.

    8. Link dos Termos de Serviço do aplicativo (opcional): mostrado em "Fazer login com". Tela de consentimento do Google e informações de exoneração de responsabilidade em conformidade com o GDPR com um toque na coluna "Continuar como" . Precisa ser hospedado em um domínio autorizado.

  4. Verifique o "Status de verificação". Se o aplicativo precisar de verificação, clique no botão "Enviar para verificação". Consulte Requisitos de verificação do OAuth para mais detalhes.

Exibição das configurações de OAuth durante o login

Um toque usando o FedCM

Configurações de consentimento OAuth exibidas pelo Chrome com um toque usando o FedCM

O domínio autorizado de nível superior é exibido durante o consentimento do usuário no Chrome.

Um toque sem FedCM

Configurações de consentimento do OAuth exibidas pelo One Tap

O nome do aplicativo é exibido durante o consentimento do usuário.

Figura 1. Configurações de consentimento OAuth exibidas por um toque no Chrome.

Política de Segurança de Conteúdo

Embora seja opcional, uma política de segurança de conteúdo é recomendada para proteger seu app e evitar ataques de scripting em vários sites (XSS). Para saber mais, consulte um Introdução à CSP e CSP e XSS.

Sua Política de Segurança de Conteúdo pode incluir uma ou mais diretivas, como: connect-src, frame-src, script-src, style-src ou default-src.

Se o CSP incluir:

  • connect-src. Adicione https://accounts.google.com/gsi/ para permitir uma página para carregar o URL pai dos Serviços de Identificação do Google do lado do servidor endpoints.
  • Diretiva frame-src: adicione https://accounts.google.com/gsi/ para permitir o URL pai dos iframes do botão OneTap e do botão Fazer login com o Google.
  • Diretiva script-src, adicione https://accounts.google.com/gsi/client a permitem o URL da biblioteca JavaScript dos Serviços de Identificação do Google.
  • Diretiva style-src. Adicione https://accounts.google.com/gsi/style para permitir o URL das folhas de estilo dos Serviços de Identificação do Google.
  • A diretiva default-src, se usada, é uma alternativa se alguma das diretivas anteriores (connect-src, frame-src, script-src ou style-src) não for especificada. Adicione https://accounts.google.com/gsi/ para permitir que uma página carregue o URL pai para endpoints do lado do servidor dos Serviços de identidade do Google.

Evite listar URLs GIS individuais ao usar connect-src. Isso ajuda a minimizar quando o SIG é atualizado. Por exemplo, em vez de adicionar https://accounts.google.com/gsi/status, use o URL pai do SIG https://accounts.google.com/gsi/.

Este exemplo de cabeçalho de resposta permite que os Serviços de identidade do Google sejam carregados e executados com sucesso:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Política de abertura de origem cruzada

O botão "Fazer login com o Google" e o Google One Tap podem exigir mudanças na Cross-Origin-Opener-Policy (COOP) para criar pop-ups.

Quando o FedCM está ativado, o navegador renderiza pop-ups diretamente, e nenhuma mudança é necessária.

No entanto, quando o FedCM estiver desativado, defina o cabeçalho COOP:

  • para same-origin e
  • incluem same-origin-allow-popups.

Deixar de definir o cabeçalho adequado interrompe a comunicação entre as janelas, o que resulta para uma janela pop-up em branco ou bugs semelhantes.