Configuração

Para adicionar um botão "Fazer login com o Google" ou solicitações de um toque e login automático ao seu site, primeiro você precisa:

1. receber um ID do cliente OAuth 2.0;
2. configurar o branding e as configurações do OAuth;
3. carregar a biblioteca de cliente dos Serviços de identidade do Google; e
4. opcionalmente, configure a Política de Segurança de Conteúdo e
5. atualizar a política de abertura entre origens

Receber o ID do cliente da API do Google

Para ativar os Serviços de identidade do Google no seu site, primeiro configure um ID do cliente da API Google. Para isso, siga estas etapas:

1. Abra a página "Clientes" do console do Google Cloud.
2. Crie ou selecione um projeto do console do Cloud. Se você já tiver um projeto para o botão "Fazer login com o Google" ou o Google One Tap, use o projeto e o ID do cliente da Web. Ao criar aplicativos de produção, talvez sejam necessários vários projetos. Repita as etapas restantes desta seção para cada projeto que você gerencia.
3. Clique em Criar cliente e, em Tipo de aplicativo, selecione Aplicativo da Web para criar um ID do cliente. Para usar um ID do cliente, selecione um do tipo Aplicativo da Web.

4. Adicione o URI do seu site em Origens JavaScript autorizadas. O 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 hospedado por você, em vez de um callback do JavaScript. Se for esse o caso, adicione seus 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 de URI de redirecionamento. Por exemplo, https://www.example.com/auth-receiver.

Inclua o ID do cliente no seu app da Web usando os campos data-client_id ou client_id.

Configurar a tela de permissão OAuth

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 aplicativo que está solicitando acesso aos dados, o tipo de dados que estão sendo solicitados e os termos aplicáveis.

1. Abra a página de branding na seção da plataforma Google Auth do console do Cloud.
2. Se solicitado, selecione o projeto que você acabou de criar.

3. Na página de branding, preencha o formulário e clique no botão "Salvar".

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

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

   3. E-mail de suporte:mostrado na tela de permissão para suporte ao usuário e aos administradores do Google Workspace que avaliam o acesso ao seu aplicativo para os usuários deles. Esse endereço de e-mail é mostrado aos usuários na tela de permissão "Fazer login com o Google" quando eles clicam no nome do aplicativo.

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

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

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

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

4. Acesse a página de acesso a dados para configurar os escopos do app.

   1. 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 sensíveis. Geralmente, é uma prática recomendada solicitar escopos de forma incremental no momento em que o acesso é necessário, em vez de fazer isso antecipadamente.

5. Verifique o "Status da verificação". Se o aplicativo precisar de verificação, clique no botão "Enviar para verificação". Consulte os requisitos de verificação do OAuth para mais detalhes.

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

Figura 1. Configurações de permissão do OAuth mostradas pelo recurso "Um toque" no Chrome.

Carregar a biblioteca de cliente

Carregue a biblioteca de cliente dos Serviços de identidade do Google em qualquer página em que um usuário possa fazer login. Use o seguinte snippet de código:

<script src="https://accounts.google.com/gsi/client" async></script>

Você pode otimizar a velocidade de carregamento das páginas se carregar o script com o atributo async.

Consulte as referências da API HTML e JavaScript para ver a lista de métodos e propriedades compatíveis com a biblioteca.

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 uma Introdução ao 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 a CSP incluir:

• Diretiva connect-src, adicione https://accounts.google.com/gsi/ para permitir que uma página carregue o URL principal para endpoints do lado do servidor dos Serviços de Identificação do Google.
• frame-src, adicione https://accounts.google.com/gsi/ para permitir o URL principal dos iframes do botão One Tap 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 identidade do Google.
• A diretiva default-src, se usada, é um substituto caso alguma das diretivas anteriores (connect-src, frame-src, script-src ou style-src) não seja especificada. Adicione https://accounts.google.com/gsi/ para permitir que uma página carregue o URL principal para os endpoints do lado do servidor dos Serviços de identidade do Google.

Evite listar URLs individuais do SIG 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 principal do GIS https://accounts.google.com/gsi/.

Este exemplo de cabeçalho de resposta permite que os Serviços de identidade do Google carreguem e executem 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 entre origens

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

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

No entanto, quando a FedCM está desativada, defina o cabeçalho COOP:

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

Se você não definir o cabeçalho adequado, a comunicação entre as janelas será interrompida, resultando em uma janela pop-up em branco ou bugs semelhantes.