Como Implementar Autenticação via Google no Formulário do Site (Passo a Passo Fácil)
Olá, querido(a) cliente! 🌟 Seja bem-vindo(a) ao seu novo Guia da Sensei da GeHost! Hoje vamos aprender, com carinho e clareza, como integrar a autenticação via Google em um formulário do seu site. Isso permite que seus visitantes se cadastrem ou façam login com apenas um clique — sem precisar lembrar de senhas!
É uma tecnologia moderna, segura e super prática. Vamos lá, com passos simples e humanos — como se estivéssemos conversando no café!
Passo 1: Prepare seu site com o formulário
Antes de tudo, seu site precisa ter um formulário de login ou cadastro. Ele pode ser feito com HTML, PHP ou até com ferramentas como WordPress, Webflow ou Wix.
Se você não tem um formulário ainda, não se preocupe! A GeHost te ajuda a criar o que precisar. Mas para este guia, vamos assumir que já há um formulário básico com campos como:
- Nome
- Botão de login
Seu site já está hospedado na GeHost? Ótimo! Agora vamos integrar o Google.
Passo 2: Acesse o Google Cloud Console
Abra seu navegador e vá para o Google Cloud Console (https://console.cloud.google.com).
Se você ainda não tem uma conta, crie uma gratuitamente. É bem simples — basta usar seu e-mail pessoal.
Passo 3: Crie um projeto e ative a API do Google
Dentro do Google Cloud Console, crie um novo projeto (nomeie como “MeuSiteAutenticacao” ou algo assim).
Depois, ative a API de Autenticação do Google (OAuth 2.0). Isso permite que o Google saiba que seu site quer usar sua conta para login.
Após ativar, vá em “Credenciais” e clique em “Criar credenciais” → “OAuth 2.0 Client ID”.
Passo 4: Configure os detalhes do OAuth
Na tela de configuração:
- Selecione “Web Application” como tipo.
- Digite o nome do aplicativo (ex: MeuSite com Google).
- Adicione os URLs de autorização. Aqui, coloque o endereço do seu site, como:
- https://seusite.com.br/login
- https://seusite.com.br/autenticar
- Adicione também o URL de redirecionamento (callback), que será algo como:
- https://seusite.com.br/callback.php
⚠️ Dica da Sensei: Não use URLs locais (como localhost) aqui. Só URLs reais e acessíveis pela internet.
Passo 5: Pegue suas chaves de API
Após salvar, o Google vai gerar dois códigos importantes:
- Client ID (ex: 1234567890-abcd1234567890abcdef1234567890.apps.googleusercontent.com)
- Client Secret (um código longo e secreto)
Guarde esses dados com cuidado — eles são como senhas do seu site no Google.
Passo 6: Adicione o código no seu site (via PHP ou JavaScript)
Se você usa PHP, o código básico para autenticar via Google envolve:
- Redirecionar o usuário para a URL de autenticação do Google.
- Receber o código de autorização após o login.
- Validar esse código com o Google usando o Client Secret.
- Obter informações do usuário (nome, e-mail, foto).
Exemplo de redirecionamento (em PHP):
Entrar com Google
Essa é a parte onde você coloca o botão “Entrar com Google” no seu formulário.
Passo 7: Configure o callback no seu servidor (GeHost)
No seu site, crie um arquivo chamado callback.php (ou outro nome que você escolheu).
Esse arquivo vai receber o código do Google, validar e criar uma sessão no seu site. Ele deve estar dentro da pasta public_html do seu site (acessível pelo Gerenciador de Arquivos do cPanel).
Para acessar o Gerenciador de Arquivos:
- Entre no cPanel (use o link da sua conta GeHost).
- Na aba “Arquivos”, clique em “Gerenciador de Arquivos”.
- Selecione a pasta public_html.
- Crie um novo arquivo chamado callback.php.
- Insira o código de validação (com a ajuda de um desenvolvedor ou usando bibliotecas como Google API PHP Client).
Se precisar de ajuda com o código, a GeHost tem suporte técnico que pode te ajudar — basta abrir um ticket!
Passo 8: Teste com segurança
Antes de colocar no ar, teste em um ambiente de desenvolvimento (ou em um subdomínio como teste.seusite.com.br).
Verifique se:
- O botão “Entrar com Google” aparece corretamente.
- O usuário é redirecionado para o Google.
- Depois de logar, volta ao seu site com dados do perfil.
- Seu sistema registra o login com sucesso.
Passo 9: Mantenha tudo seguro
⚠️ Dica da Sensei: Nunca compartilhe seu Client Secret em códigos públicos, como no JavaScript do navegador. Ele deve ficar no servidor, protegido.
Use HTTPS (SSL) em seu site — e a GeHost já oferece certificados SSL gratuitos! Basta ativar no cPanel.
Conclusão: Você está pronto!
Parabéns, guerreiro(a) do site! 🎉 Agora seu visitante pode se autenticar com apenas um clique — com segurança, elegância e muito mais conversão.
Se tiver dúvidas, não hesite em entrar em contato com o nosso time de suporte. Estamos aqui para te ajudar, como um amigo de verdade.
Com carinho,
Sensei da GeHost 💛
