Configuração

Antes de adicionar o recurso Fazer login com o Google, o login com um toque ou o login automático ao site, defina a configuração do OAuth e, opcionalmente, defina a Política de Segurança de Conteúdo do site.

Receber seu ID do cliente da API do Google

Para ativar o recurso Fazer login com o Google 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 existente e o ID do cliente da Web. Ao criar aplicativos de produção, pode ser necessário ter vários projetos. 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 aplicativo, selecione Aplicativo da Web para criar um novo ID do cliente. Para usar um ID do cliente existente, selecione um do tipo Aplicativo da Web.

  4. Adicione o URI do seu site às origens JavaScript autorizadas. O URI inclui apenas o esquema e o nome do host totalmente qualificado. Por exemplo, https://www.example.com.

  5. Opcionalmente, as credenciais podem ser retornadas usando um redirecionamento para um endpoint hospedado por você, e não por um callback JavaScript. Nesse caso, adicione os URIs de redirecionamento a URIs de redirecionamento autorizados. Os URIs de redirecionamento incluem o esquema, o nome do host totalmente qualificado e o caminho e precisam obedecer às regras de validação do URI de redirecionamento. Por exemplo, https://www.example.com/auth-receiver.

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

  1. Abra a página Tela de permissão OAuth da seção "APIs e serviços" do Google Developers Console.
  2. Se solicitado, selecione o projeto que você acabou de criar.

  3. Na página "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 o aplicativo e ser consistente com o nome que os usuários veem em outros lugares.

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

    3. E-mail de suporte:mostrado na tela de consentimento para o suporte ao usuário e para os administradores do G Suite que avaliam o acesso ao seu aplicativo para os usuários. Esse endereço de e-mail é mostrado aos usuários na tela de permissão do recurso Fazer login com o Google quando eles clicam 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 (e-mail, perfil, openid) é suficiente. Não é necessário adicionar escopos confidenciais. Geralmente, é uma prática recomendada solicitar escopos de forma incremental no momento em que o acesso é necessário, e não antecipadamente. Saiba mais

    5. Domínios autorizados: para proteger você e seus usuários, o Google só permite que aplicativos autenticados usando o OAuth usem domínios autorizados. Os links dos aplicativos precisam estar 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 informações de exoneração de responsabilidade em conformidade com o GDPR de um toque abaixo do botão "Continuar como". Precisa estar hospedado em um domínio autorizado.

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

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

  4. Marque o "Status da verificação" se o aplicativo precisar de verificação e, em seguida, clique no botão "Enviar para verificação" para enviá-lo para verificação. Consulte os requisitos de verificação do OAuth para ver detalhes.

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

Um toque usando o FedCM

Configurações de consentimento do OAuth mostradas pelo Chrome One Tap usando a 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 mostradas por um toque

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

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

Política de Segurança de Conteúdo

Embora seja opcional, é recomendável usar uma Política de Segurança de Conteúdo para proteger o app e evitar ataques de scripting em vários locais (XSS). Para saber mais, consulte a Introdução à CSP e a 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 sua CSP incluir:

  • connect-src, 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 Identificação do Google.
  • frame-src, adiciona https://accounts.google.com/gsi/ para permitir o URL pai dos iframes do botão "Um toque e fazer login com o Google".
  • script-src, adicione https://accounts.google.com/gsi/client para permitir o URL da biblioteca JavaScript dos Serviços de Identificação do Google.
  • 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, será um substituto 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 Identificação do Google.

Evite listar URLs de SIG individuais ao usar connect-src. Isso ajuda a minimizar falhas 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 Identificação 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 toque do Google One podem exigir mudanças no Cross-Origin-Opener-Policy (COOP) para criar pop-ups.

Quando a FedCM é ativada, o navegador renderiza pop-ups diretamente, e nenhuma alteração é necessária.

No entanto, quando o FedCM estiver desativado, configure 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, levando a uma janela pop-up em branco ou bugs semelhantes.