Configuração

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

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

Receber o ID do cliente da API do Google

Para ativar os Serviços de Identificação do Google no seu site, primeiro você precisa configurar um ID do cliente da API do Google. Para isso, siga estas etapas:

1. Abra a página "Clientes" do console do Google Cloud.
2. Crie ou selecione um projeto do Cloud Console. 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, vários projetos podem ser necessários. Repita as etapas restantes desta seção para cada projeto que você gerenciar.
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 a 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 em vez de um retorno de chamada 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

A autenticação do recurso Fazer login com o Google e do One Tap inclui uma tela de permissão que informa aos usuários o aplicativo que está solicitando acesso aos dados deles, o tipo de dados solicitados e os termos aplicáveis.

1. Abra a página "Branding" da seção "Plataforma de autenticação do Google" de o Cloud Console.
2. Se solicitado, selecione o projeto que você acabou de criar.

3. Na página "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 o aplicativo e ser consistente com o nome do aplicativo 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 é mostrado 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 um toque.

   3. E-mail de suporte:mostrado na tela de permissão do suporte ao usuário e para administradores do Google Workspace 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 o usuário clica no nome do aplicativo.

   4. Domínios autorizados:para proteger você e seus usuários, o Google permite apenas os aplicativos que autenticam usando o OAuth a usar os 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 isenção de responsabilidade em conformidade com o GDPR do One Tap, abaixo do botão "Continuar como". Precisa ser hospedado em um domínio autorizado.

   6. Link da Política de Privacidade do aplicativo:mostrado na tela de permissão do recurso Fazer login com o Google e nas informações de isenção de responsabilidade em conformidade com o GDPR do One Tap, abaixo do botão "Continuar como". Precisa ser hospedado em um domínio autorizado.

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

4. Navegue até a página "Acesso a dados" para configurar os escopos do seu 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 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 One Tap no Chrome.

Carregar a biblioteca de cliente

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

<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 conferir 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 script em vários locais (XSS) ataques. Para saber mais, consulte uma 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 a CSP incluir:

• a diretiva connect-src, adicione https://accounts.google.com/gsi/ para permitir que uma página carregue o URL pai dos endpoints do lado do servidor dos Serviços de Identificação do Google.
• a diretiva frame-src, adicione https://accounts.google.com/gsi/ para permitir o URL pai dos iframes do botão Um toque e Fazer login com o Google.
• a diretiva script-src, adicione https://accounts.google.com/gsi/client para permitir o URL da biblioteca JavaScript dos Serviços de Identificação do Google.
• a 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, é 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 dos endpoints do lado do servidor dos Serviços de Identificação do Google.

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

Este cabeçalho de resposta de exemplo 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 entre origens

O botão Fazer login com o Google e o Google One Tap podem exigir mudanças na sua 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 está desativado, defina o cabeçalho COOP:

• como 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, levando a uma janela pop-up em branco ou bugs semelhantes.