Conectar o login do Google

Para que os usuários do seu serviço se cadastrem com uma conta Google, você registra o seu serviço no Google e recebe o ID do cliente e a chave secreta do cliente.

Esta página apresenta a ordem para obter o ID do cliente e a chave secreta do cliente. O modo de colocar esses dois valores na WEEGLOO está em Colocar na WEEGLOO o ID do cliente e a chave secreta do cliente, e o modo de exibir o nome e o logotipo do seu serviço na tela de consentimento está em Mostrar o nome e o logotipo do serviço na tela de consentimento.

Obter no Google o ID do cliente e a chave secreta do cliente

As quatro etapas abaixo são feitas no Google Cloud Console. Você precisa estar com a sessão iniciada em uma conta Google. O que você faz aqui não tem custo.

Se você usa várias contas Google, ao clicar no link a página pode abrir com uma conta diferente da pretendida. Clique na foto do perfil no canto superior direito da tela para verificar qual é a conta e, se não for a pretendida, troque de conta.

1

Criar um projeto

Se você já tem um projeto em uso, pode usar esse mesmo projeto em vez de criar um novo. Nesse caso, pule esta etapa e vá para Configurar a tela de consentimento.

  1. Abra a tela de novo projeto (https://console.cloud.google.com/projectcreate (abre em uma nova aba)).

  2. Em Nome do projeto, digite um nome que você vá reconhecer depois (por exemplo, Guarda-Roupa Aconchegante).

  3. Clique em Criar.

    Tela de novo projeto. "Guarda-Roupa Aconchegante" está digitado no nome do projeto e abaixo há o botão Criar

  4. Confira se o nome do projeto no alto do console é o que você acabou de criar.

3

Criar o cliente OAuth

No cliente que você cria aqui, você registra o endereço para onde volta o resultado do login.

  1. Abra a tela Clientes do Google Auth Platform (https://console.cloud.google.com/auth/clients (abre em uma nova aba)).

  2. Clique em Criar cliente.

    Tela Clientes. A lista de IDs do cliente OAuth 2.0 está vazia e acima dela aparece Criar cliente

  3. Em Tipo de aplicativo, escolha Aplicativo da Web.

    A lista suspensa de tipo de aplicativo está aberta, mostrando seis tipos, entre eles Aplicativo da Web

  4. Em Nome, digite um nome pelo qual você vá reconhecer este cliente (por exemplo, Guarda-Roupa Aconchegante).

  5. Deixe Origens JavaScript autorizadas vazio.

  6. Clique em Adicionar URI em URIs de redirecionamento autorizados.

  7. Na caixa que aparecer, cole o endereço abaixo. Ao escolher o seu Space, o identificador é preenchido.

    Space
    https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/google

    Se você não sabe qual é o seu Space e entregou a integração a um agente de IA, há também o caminho de perguntar ao agente. Peça no chat "me diga o endereço de redirecionamento para registrar no login do Google" e você recebe o endereço já completo.

  8. Clique em Criar.

    Formulário com o endereço preenchido em URIs de redirecionamento autorizados. Origens JavaScript autorizadas está vazio

A lista também traz tipos como Android e iOS, mas você escolhe Aplicativo da Web mesmo quando está adicionando login a um aplicativo de celular. Isso porque o resultado do login volta para o endereço web da WEEGLOO, não para o seu aplicativo. O Nome serve para distinguir o cliente nas telas do Google e não é mostrado aos usuários.

O endereço registrado pode não entrar em vigor de imediato

Abaixo do formulário há o aviso do Google "Observação: pode levar de cinco minutos a algumas horas para que as configurações entrem em vigor". Logo depois de registrar o endereço, ele pode ainda não ter entrado em vigor e o login pode ficar bloqueado. Nesse caso, espere um tempo e tente de novo.

4

Copiar o ID do cliente e a chave secreta do cliente

Ao clicar em Criar, aparece a janela Cliente OAuth criado. O ID do cliente e a chave secreta do cliente escritos ali são os que você coloca na WEEGLOO.

Depois de fechar a janela, a chave secreta do cliente não pode ser vista de novo

Essa janela traz o aviso "Não será mais possível acessar ou fazer o download da chave secreta do cliente depois que esta caixa de diálogo for fechada". Copie o ID do cliente e a chave secreta do cliente antes de fechar a janela. Se quiser receber os valores como arquivo, você pode clicar em Baixar o JSON.

  1. Clique no ícone de cópia à direita do ID do cliente para copiar o valor.

  2. Clique no ícone de cópia à direita da Chave secreta do cliente para copiar o valor.

  3. Depois de guardar o ID do cliente e a chave secreta do cliente, clique em OK.

    Janela Cliente OAuth criado. Aparecem o ID do cliente, a chave secreta do cliente e o aviso de que não será mais possível vê-los

Veja em qual campo do estúdio de conteúdo entram o ID do cliente e a chave secreta do cliente.

Tela do GoogleEstúdio de conteúdo
ID do clienteClient ID
Chave secreta do clienteClient Secret

A chave secreta do cliente é secreta, exatamente como o nome diz. Não a conte a ninguém e não a escreva em um lugar público.

Colocar na WEEGLOO o ID do cliente e a chave secreta do cliente

Agora o ID do cliente e a chave secreta do cliente estão prontos. Daqui em diante o caminho se divide conforme o modo como você vinha trabalhando até aqui.

Se você estava configurando diretamente no estúdio de conteúdo, siga assim.

  1. Volte para ativar o login social em Login de membros do serviço.
  2. Ative o Google.
  3. Coloque o ID do cliente no campo Client ID do Step 2.
  4. Coloque a chave secreta do cliente no campo Client Secret.
  5. Clique em Guardar.

Se você entregou a integração a um agente de IA e recebeu a orientação de ir buscar o ID do cliente e a chave secreta do cliente, cole no chat os dois valores recebidos exatamente como estão e siga com o que estava fazendo. O restante da configuração o agente trata em seguida.

Mostrar o nome e o logotipo do serviço na tela de consentimento

Na tela de consentimento que aparece quando o usuário faz login com uma conta Google, no começo é exibido o domínio da WEEGLOO em vez do nome do seu serviço. O usuário tem dificuldade de reconhecer em qual serviço está se cadastrando e também de distinguir a tela de um site falso montado de forma parecida. Quando o nome e o logotipo do seu serviço são exibidos, o usuário se cadastra com confiança.

O login funciona mesmo nesse estado, portanto isso não é obrigatório. Recomendamos fazer isso antes de abrir o serviço de verdade. O nome e o logotipo passam a ser exibidos depois que você recebe a verificação de marca (abre em uma nova aba) do Google.

1

Preparar a página inicial e a política de privacidade

O Google verifica pela página inicial se o nome a ser exibido na tela de consentimento é o nome de um serviço real. Prepare no seu site uma página inicial e uma política de privacidade.

Se você entregou a integração a um agente de IA, peça "crie a página inicial e a política de privacidade necessárias para a verificação de marca do Google".

  • Página inicial: uma página que abre sem login, descreve o serviço e leva à política de privacidade. O botão de login fica em outra página.
  • Política de privacidade: uma página sob o mesmo endereço da página inicial, que declara como as informações recebidas da conta Google são usadas e guardadas.

Os termos de serviço são opcionais.

2

Verificar o site no Search Console

Você comprova pelo Google Search Console que a página inicial é sua.

Se você entregou a integração a um agente de IA, envie no chat o arquivo obtido no item 5 abaixo e peça "coloque este arquivo no site e publique de novo". O item 6 é tratado pelo agente.

  1. Abra o Search Console (https://search.google.com/search-console (abre em uma nova aba)). A conta precisa ser proprietária ou editora do projeto do Google Cloud.

  2. Clique em Adicionar site. Se você já tem um site registrado, clique em Adicionar propriedade no menu de seleção de propriedade no canto superior esquerdo e depois clique em Adicionar site.

  3. Na janela Selecionar tipo de propriedade, digite o endereço da página inicial no campo Prefixo do URL (por exemplo, https://pogeun-otjang.weegloo.app/).

  4. Clique em Continuar no lado Prefixo do URL.

  5. Na janela Verificar propriedade, em Arquivo HTML, clique no botão com o nome do arquivo para baixá-lo. Deixe essa janela aberta.

    Janela Verificar propriedade do Search Console. O método de verificação recomendado, Arquivo HTML, está aberto, com o botão do nome do arquivo a baixar, o endereço da página inicial para onde enviar o arquivo e, abaixo, o botão Verificar

  6. Coloque o arquivo recebido, com o mesmo nome, na pasta mais alta do site e publique de novo (Publicar de novo depois de editar o site).

  7. Volte para a janela Verificar propriedade e clique em Verificar.

Quando aparecer Propriedade verificada, esta etapa está concluída.

Não apague o arquivo de verificação

O Search Console verifica periodicamente se esse arquivo continua no lugar. Inclua o arquivo também quando publicar o site de novo.

3

Preencher as informações de branding

Você informa ao Google as páginas preparadas, o nome a exibir e o logotipo.

  1. Abra a tela Branding do Google Auth Platform (https://console.cloud.google.com/auth/branding (abre em uma nova aba)).

  2. Em Nome do app, digite exatamente o mesmo nome de serviço que está na página inicial. Não é possível usar o nome de um produto do Google.

  3. Em Logotipo do app, envie o logotipo próprio do seu serviço. Usar o logotipo de outra marca não passa na verificação. O arquivo é um JPG, PNG ou BMP de até 1MB, e um quadrado de 120×120px é o que melhor aparece.

  4. Em Página inicial do aplicativo e em Link da política de privacidade do aplicativo, coloque os endereços da página inicial e da política de privacidade. Se você tiver termos, coloque o endereço também em Link dos Termos de Serviço do aplicativo.

  5. Em Domínios autorizados, coloque weegloo.app.

    • Se não houver nenhum item, clique em Adicionar domínio e digite o valor.
    • Se já houver um item, altere o valor desse campo para weegloo.app. O item existente pode não ser excluído. Nesse caso, basta alterar o valor.

    Seção Domínios autorizados da tela Branding. O valor do campo Domínio autorizado 1 está alterado para o domínio do WebHosting e, abaixo, aparece o botão Adicionar domínio

  6. Clique em Salvar.

4

Pedir a verificação e publicar

A verificação de marca só pode ser pedida depois de publicar o app. No estado de teste, o botão de verificação não é exibido.

  1. Na tela Público-alvo, clique em Publicar app.
  2. Na janela Enviar para produção?, clique em Confirmar.
  3. Na tela Branding, em Status da verificação, clique em Verificar branding. A verificação leva no máximo cerca de 5 minutos.
  4. Se houver pontos a corrigir, veja o conteúdo em Ver problemas. Depois de corrigir, escolha Problemas corrigidos e peça a verificação de novo.
  5. Se passar, clique em Publicar branding em até 7 dias.

Depois da publicação, o nome e o logotipo do seu serviço são exibidos na tela de consentimento.

Próximos passos

  • Login de membros do serviço: coloca no estúdio de conteúdo os valores recebidos e conclui o restante da configuração do login de membros.
  • Papéis e permissões de membros: cria o ServiceUserRole que define o que o membro cadastrado pode ver e usar.
  • Auth API: trata de especificações técnicas como o formato das requisições, necessárias para conectar o login ao código do seu próprio site.