Contact Form API Kullanım Kılavuzu

Yapılandırma

1. Environment Variables (.env dosyası)

.env dosyanıza aşağıdaki satırları ekleyin ve kendi bilgilerinizle güncelleyin:

# Backend Credentials for Contact Form
BACKEND_EMAIL='your-admin-email@example.com'
BACKEND_PASSWORD='your-admin-password'

2. Backend API Endpoint'leri

Contact form sistemi aşağıdaki backend endpoint'lerini kullanır:

Login: http://127.0.0.1:8000/api/v1/auth/jwt/create/
Contact Create: http://127.0.0.1:8000/api/v1/contact/create/

Nasıl Çalışır?

Server-Side Flow (Nuxt Server API)

Kullanıcı formu doldurur ve gönderir
Frontend /api/contact/post.create endpoint'ine POST request gönderir
Nuxt server API:
- .env dosyasından admin credentials'ları alır
- Backend'e login olur ve JWT token alır
- Token ile contact form verisini backend'e gönderir
Backend'den gelen response frontend'e iletilir

Güvenlik

Admin credentials sadece server-side'da saklanır (.env dosyası)
Client-side'da hiçbir zaman admin şifresi görünmez
Her form gönderiminde otomatik login yapılır
JWT token sadece server-side'da kullanılır

Form Alanları

Contact form aşağıdaki zorunlu alanları içerir:

{
  name: string,      // İsim
  email: string,     // E-posta
  ip: string,        // IP Adresi (server-side otomatik eklenir)
  subject: string,   // Konu
  message: string    // Mesaj
}

Not: IP adresi kullanıcıdan alınmaz, server-side'da otomatik olarak tespit edilir ve backend'e gönderilir.

Frontend Kullanımı

Form zaten app/pages/index.vue sayfasında entegre edilmiştir. Kullanıcı:

Formu doldurur
Turnstile captcha'yı tamamlar
"Send Message" butonuna tıklar
Başarılı/hatalı mesaj görür

API Response

Başarılı Response:

{
  "success": true,
  "data": { /* backend response */ },
  "message": "Mesajınız başarıyla gönderildi"
}

Hata Response:

{
  "statusCode": 400,
  "statusMessage": "Tüm alanlar zorunludur: name, email, subject, message"
}

Test Etme

Sunucuyu başlatın: npm run dev
Anasayfaya gidin: http://localhost:3000
Contact bölümüne scroll edin
Formu doldurun ve gönderin

Hata Ayıklama

Konsol loglarını kontrol edin:

# Server-side logs
Terminal'de Nuxt server logları

# Client-side logs
Browser Console

Önemli Notlar

⚠️ .env dosyasını asla Git'e commit etmeyin
✅ Production'da gerçek admin credentials kullanın
✅ Backend'inizde contact endpoint'inin aktif olduğundan emin olun
✅ Turnstile Cloudflare doğrulaması aktif

2.6 KiB Raw Permalink Blame History Unescape Escape