Sistema completo de gestão de PDI com: - Autenticação com email/senha e Google OAuth - Workspaces privados isolados - Sistema de convites com código único - Interface profissional com Next.js 14 - Backend NestJS com PostgreSQL - Docker com Nginx e SSL Desenvolvido por Sergio Correa
203 lines
5.1 KiB
Markdown
203 lines
5.1 KiB
Markdown
# 🔐 Como Configurar Google OAuth no PDIMaker
|
|
|
|
## ⚠️ Erro Atual: "invalid_client"
|
|
|
|
Você precisa criar as credenciais OAuth no Google Cloud Console.
|
|
|
|
---
|
|
|
|
## 📋 Passo a Passo Completo
|
|
|
|
### **1. Acessar Google Cloud Console**
|
|
|
|
Abra: https://console.cloud.google.com/
|
|
|
|
### **2. Criar/Selecionar Projeto**
|
|
|
|
- Clique em **"Select a project"** (topo da página)
|
|
- Clique em **"NEW PROJECT"**
|
|
- Nome do projeto: `PDIMaker`
|
|
- Clique em **"CREATE"**
|
|
- Aguarde a criação e selecione o projeto
|
|
|
|
### **3. Configurar OAuth Consent Screen**
|
|
|
|
1. No menu lateral, vá em: **APIs & Services** → **OAuth consent screen**
|
|
2. Selecione: **External** (permite qualquer email do Google)
|
|
3. Clique em **"CREATE"**
|
|
|
|
4. **App information:**
|
|
- App name: `PDIMaker`
|
|
- User support email: `seu_email@gmail.com`
|
|
- Application home page: `https://pdimaker.com.br`
|
|
- Application privacy policy: `https://pdimaker.com.br/privacy` (pode deixar em branco)
|
|
- Application terms of service: `https://pdimaker.com.br/terms` (pode deixar em branco)
|
|
|
|
5. **Developer contact information:**
|
|
- Email: `seu_email@gmail.com`
|
|
|
|
6. Clique em **"SAVE AND CONTINUE"**
|
|
|
|
7. **Scopes:** Clique em **"ADD OR REMOVE SCOPES"**
|
|
- Selecione:
|
|
- `.../auth/userinfo.email`
|
|
- `.../auth/userinfo.profile`
|
|
- Clique em **"UPDATE"**
|
|
- Clique em **"SAVE AND CONTINUE"**
|
|
|
|
8. **Test users:** (Opcional)
|
|
- Clique em **"ADD USERS"**
|
|
- Adicione seu email: `sergio09@gmail.com`
|
|
- Clique em **"ADD"**
|
|
- Clique em **"SAVE AND CONTINUE"**
|
|
|
|
9. **Summary:** Clique em **"BACK TO DASHBOARD"**
|
|
|
|
### **4. Criar Credenciais OAuth**
|
|
|
|
1. No menu lateral, vá em: **APIs & Services** → **Credentials**
|
|
2. Clique em **"+ CREATE CREDENTIALS"** → **"OAuth client ID"**
|
|
|
|
3. **Application type:** Web application
|
|
|
|
4. **Name:** `PDIMaker Web Client`
|
|
|
|
5. **Authorized JavaScript origins:**
|
|
- `https://pdimaker.com.br`
|
|
- `https://www.pdimaker.com.br`
|
|
- `http://localhost:3300` (para testes locais)
|
|
|
|
6. **Authorized redirect URIs:**
|
|
- `https://pdimaker.com.br/api/auth/callback/google`
|
|
- `https://www.pdimaker.com.br/api/auth/callback/google`
|
|
- `http://localhost:3300/api/auth/callback/google` (para testes locais)
|
|
|
|
7. Clique em **"CREATE"**
|
|
|
|
8. **IMPORTANTE:** Uma janela vai abrir com:
|
|
- **Client ID** (começando com algo como `123456789-abc...apps.googleusercontent.com`)
|
|
- **Client Secret** (algo como `GOCSPX-abc123...`)
|
|
|
|
**COPIE ESSES DOIS VALORES!**
|
|
|
|
---
|
|
|
|
## 🔧 Configurar no Servidor
|
|
|
|
### **Opção 1: Editar .env manualmente**
|
|
|
|
```bash
|
|
# Conecte no servidor
|
|
cd /var/www/pdimaker
|
|
|
|
# Edite o arquivo .env
|
|
nano .env
|
|
|
|
# Adicione/atualize estas linhas:
|
|
GOOGLE_CLIENT_ID=cole_aqui_o_client_id
|
|
GOOGLE_CLIENT_SECRET=cole_aqui_o_client_secret
|
|
NEXTAUTH_SECRET=cole_uma_string_aleatoria_longa_aqui
|
|
NEXTAUTH_URL=https://pdimaker.com.br
|
|
```
|
|
|
|
### **Opção 2: Usar comandos (mais rápido)**
|
|
|
|
```bash
|
|
cd /var/www/pdimaker
|
|
|
|
# Substitua os valores abaixo pelos seus
|
|
export GOOGLE_CLIENT_ID="seu_client_id_aqui"
|
|
export GOOGLE_CLIENT_SECRET="seu_client_secret_aqui"
|
|
|
|
# Adicionar ao .env
|
|
echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env
|
|
echo "GOOGLE_CLIENT_SECRET=$GOOGLE_CLIENT_SECRET" >> .env
|
|
|
|
# Gerar NEXTAUTH_SECRET aleatório
|
|
echo "NEXTAUTH_SECRET=$(openssl rand -base64 32)" >> .env
|
|
echo "NEXTAUTH_URL=https://pdimaker.com.br" >> .env
|
|
```
|
|
|
|
### **Reiniciar o Container**
|
|
|
|
```bash
|
|
cd /var/www/pdimaker
|
|
docker restart pdimaker-web
|
|
|
|
# Verificar se está rodando
|
|
docker logs pdimaker-web --tail=20
|
|
```
|
|
|
|
---
|
|
|
|
## 🧪 Testar
|
|
|
|
1. Acesse: **https://pdimaker.com.br**
|
|
2. Clique em **"Entrar com Google"**
|
|
3. Escolha sua conta Google
|
|
4. Aceite as permissões
|
|
5. Você será redirecionado para o dashboard! 🎉
|
|
|
|
---
|
|
|
|
## ❓ Problemas Comuns
|
|
|
|
### **Erro: "invalid_client"**
|
|
- ✅ Verifique se o `GOOGLE_CLIENT_ID` está correto
|
|
- ✅ Verifique se o `GOOGLE_CLIENT_SECRET` está correto
|
|
- ✅ Verifique se não há espaços ou aspas extras no `.env`
|
|
|
|
### **Erro: "redirect_uri_mismatch"**
|
|
- ✅ Verifique se adicionou o callback correto no Google Console:
|
|
- `https://pdimaker.com.br/api/auth/callback/google`
|
|
|
|
### **Erro: "access_denied"**
|
|
- ✅ Verifique se adicionou seu email nos Test Users (se o app está em teste)
|
|
|
|
---
|
|
|
|
## 📝 Exemplo de .env Completo
|
|
|
|
```bash
|
|
# Banco de Dados
|
|
DB_PASSWORD=sua_senha_db
|
|
DATABASE_URL=postgresql://postgres:sua_senha@postgres:5432/pdimaker_prod
|
|
|
|
# Redis
|
|
REDIS_PASSWORD=sua_senha_redis
|
|
|
|
# JWT
|
|
JWT_SECRET=seu_jwt_secret
|
|
|
|
# NextAuth
|
|
NEXTAUTH_SECRET=gere_uma_string_aleatoria_longa_32_caracteres
|
|
NEXTAUTH_URL=https://pdimaker.com.br
|
|
|
|
# Google OAuth (COLE AQUI!)
|
|
GOOGLE_CLIENT_ID=123456789-abcdefghijklmnop.apps.googleusercontent.com
|
|
GOOGLE_CLIENT_SECRET=GOCSPX-abc123def456ghi789jkl
|
|
|
|
# URLs
|
|
FRONTEND_URL=https://pdimaker.com.br
|
|
NEXT_PUBLIC_API_URL=https://api.pdimaker.com.br
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Checklist Final
|
|
|
|
- [ ] Projeto criado no Google Cloud Console
|
|
- [ ] OAuth Consent Screen configurado
|
|
- [ ] Credenciais OAuth criadas
|
|
- [ ] Client ID copiado para o `.env`
|
|
- [ ] Client Secret copiado para o `.env`
|
|
- [ ] NEXTAUTH_SECRET gerado e adicionado
|
|
- [ ] Redirect URI configurado no Google Console
|
|
- [ ] Container reiniciado
|
|
- [ ] Login testado com sucesso
|
|
|
|
---
|
|
|
|
**Agora sim! O login com Google vai funcionar!** 🚀
|
|
|