110 lines
2.6 KiB
Markdown
110 lines
2.6 KiB
Markdown
# 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:
|
||
|
||
```env
|
||
# 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)
|
||
|
||
1. Kullanıcı formu doldurur ve gönderir
|
||
2. Frontend `/api/contact/post.create` endpoint'ine POST request gönderir
|
||
3. 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
|
||
4. 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:
|
||
|
||
```typescript
|
||
{
|
||
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ı:
|
||
|
||
1. Formu doldurur
|
||
2. Turnstile captcha'yı tamamlar
|
||
3. "Send Message" butonuna tıklar
|
||
4. Başarılı/hatalı mesaj görür
|
||
|
||
## API Response
|
||
|
||
### Başarılı Response:
|
||
```json
|
||
{
|
||
"success": true,
|
||
"data": { /* backend response */ },
|
||
"message": "Mesajınız başarıyla gönderildi"
|
||
}
|
||
```
|
||
|
||
### Hata Response:
|
||
```json
|
||
{
|
||
"statusCode": 400,
|
||
"statusMessage": "Tüm alanlar zorunludur: name, email, subject, message"
|
||
}
|
||
```
|
||
|
||
## Test Etme
|
||
|
||
1. Sunucuyu başlatın: `npm run dev`
|
||
2. Anasayfaya gidin: `http://localhost:3000`
|
||
3. Contact bölümüne scroll edin
|
||
4. Formu doldurun ve gönderin
|
||
|
||
## Hata Ayıklama
|
||
|
||
Konsol loglarını kontrol edin:
|
||
```bash
|
||
# 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
|
||
|