Headless WooCommerce’de Kimlik Doğrulama: JWT, OAuth ve Ötesi

🇬🇧 English: Read this in English →

Headless WooCommerce kurulumunda kimlik doğrulama, geleneksel WordPress’ten temelden farklıdır. wp-login.php yok, PHP tarafından yönetilen çerezler yok, tema şablonları aracılığıyla nonce doğrulaması yok. Ayrılmış frontend’in ile WordPress backend’in arasında çalışan bir auth katmanını sen kurmak zorundasın.

Açık konuşayım: headless’a geçen ekiplerin çoğu ürün listeleme ve sepet tarafını pürüzsüz kurar, sonra kimlik doğrulamaya gelince duvara toslar. Çünkü WordPress’in yıllardır senin yerine sessizce hallettiği bir sürü işi — oturum, çerez, nonce, şifre sıfırlama — bir anda senin sorumluluğuna geçer. Bu yazıda üç gerçek yaklaşımı, artılarını, eksilerini ve benim hangisini neden önerdiğimi anlatacağım.

Kimlik Doğrulama Zorluğu

Geleneksel WooCommerce’de WordPress her şeyi halleder: giriş formu, oturum çerezleri, nonce tokenları ve şifre sıfırlama. Frontend’i ayırdığın anda tüm bunları kaybedersin. Next.js veya Nuxt frontend’inin şunları yapması gerekir:

• Müşterileri WordPress kullanıcı hesaplarına karşı doğrulama
• Sayfa navigasyonları boyunca oturum durumunu koruma
• WooCommerce API isteklerini yetkilendirme
• Kayıt, şifre sıfırlama ve hesap yönetimini işleme

Seçenek 1: JWT (JSON Web Tokens)

Headless WordPress kimlik doğrulaması için en popüler yaklaşım. En hızlı başlayacağın yer de burası — ama birazdan söyleyeceğim gibi, en hızlı yol her zaman üretime taşıyacağın yol değil.

Kurulum: JWT Authentication for WP REST API eklentisini kur.

Giriş akışı:

// Frontend: Login
async function login(username, password) {
const response = await fetch(${WP_URL}/wp-json/jwt-auth/v1/token, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});

const data = await response.json();

if (data.token) {
// Store token securely
localStorage.setItem('auth_token', data.token);
return { success: true, user: data.user_display_name };
}

return { success: false, error: data.message };
}

// Frontend: Authenticated API call
async function getMyOrders() {
const token = localStorage.getItem('auth_token');
const response = await fetch(${WP_URL}/wp-json/wc/v3/orders?customer=${userId}, {
headers: { 'Authorization': Bearer ${token} }
});
return response.json();
}

Token doğrulaması:

// Validate token is still valid
async function validateToken(token) {
const response = await fetch(${WP_URL}/wp-json/jwt-auth/v1/token/validate, {
method: 'POST',
headers: { 'Authorization': Bearer ${token} }
});
return response.ok;
}

Artıları: Durumsuz, ölçeklenebilir, domain’ler arası çalışır
Eksileri: Token depolama güvenliği (localStorage XSS’e karşı savunmasız), standart eklentide yerleşik yenileme mekanizması yok

Seçenek 2: Server-Side Proxy ile HttpOnly Cookies

İstemci tarafı JWT depolamasından daha güvenli. Next.js API route’ların auth isteklerini proxy’ler ve HttpOnly çerezleri ayarlar. Buradaki püf nokta şu: token hiçbir zaman tarayıcıdaki JavaScript’in eline geçmiyor, dolayısıyla bir XSS açığı bile token’ı çalamıyor. Ben olsam prototip aşamasından üretime geçerken tam olarak bu adımı atardım.

// Next.js API route: /api/auth/login
export async function POST(request) {
const { username, password } = await request.json();

const wpResponse = await fetch(${WP_URL}/wp-json/jwt-auth/v1/token, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});

const data = await wpResponse.json();

if (data.token) {
const response = NextResponse.json({ success: true, user: data.user_display_name });
response.cookies.set('auth_token', data.token, {
httpOnly: true,
secure: true,
sameSite: 'strict',
maxAge: 60  60  24 * 7 // 7 days
});
return response;
}

return NextResponse.json({ success: false }, { status: 401 });
}

Artıları: Token hiçbir zaman JavaScript’e maruz kalmaz, XSS’e karşı dirençli
Eksileri: Daha karmaşık kurulum, server-side rendering veya API route’ları gerektirir

Seçenek 3: WordPress Provider ile NextAuth.js

NextAuth.js, oturum yönetimi, CSRF koruması ve çoklu provider desteği ile eksiksiz bir auth çözümü sağlar. Kendi başıma token yenileme, CSRF ve oturum süresi mantığını sıfırdan yazmak yerine savaş görmüş bir kütüphaneye yaslanmayı tercih ederim — bu tür güvenlik kodunu kendin yazdığında hata yapma payın, hazır bir kütüphaneninkinden her zaman yüksektir.

// app/api/auth/[...nextauth]/route.js
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export const authOptions = {
providers: [
CredentialsProvider({
name: 'WordPress',
credentials: {
username: { label: "Email", type: "email" },
password: { label: "Password", type: "password" }
},
async authorize(credentials) {
const res = await fetch(${WP_URL}/wp-json/jwt-auth/v1/token, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(credentials)
});

const user = await res.json();
if (res.ok && user.token) {
return {
id: user.user_email,
name: user.user_display_name,
email: user.user_email,
wpToken: user.token
};
}
return null;
}
})
],
callbacks: {
async jwt({ token, user }) {
if (user) token.wpToken = user.wpToken;
return token;
},
async session({ session, token }) {
session.wpToken = token.wpToken;
return session;
}
}
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Artıları: Savaş testinden geçmiş, oturum yönetimini halleder, sosyal giriş provider’larını destekler
Eksileri: Ek bağımlılık, hafif öğrenme eğrisi

Kayıt

WooCommerce’in REST API’si müşteri oluşturmayı destekler. Dikkat: burada kritik bir güvenlik detayı var, kod bloğunun altındaki nota mutlaka bak:

async function register(email, password, firstName, lastName) {
const response = await fetch(${WP_URL}/wp-json/wc/v3/customers, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': Basic ${btoa(${CK}:${CS})}  // Consumer key/secret
},
body: JSON.stringify({
email,
password,
first_name: firstName,
last_name: lastName
})
});

return response.json();
}

Not: Müşteri oluşturma consumer key/secret auth (server-side) gerektirir, müşteri JWT’si değil. Bu anahtarları asla frontend’e gömme — sunucu tarafında, bir API route’un arkasında kalmalı. Consumer secret’ı tarayıcıya sızdıran bir kayıt formu, tüm mağazanın kapısını ardına kadar açar.

Şifre Sıfırlama

WordPress varsayılan olarak REST API aracılığıyla şifre sıfırlamayı göstermez. Seçenekler:

• Özel endpoint: Reset token üretimi ve şifre güncellemesini işleyen bir WordPress eklentisi oluştur
• E-posta tabanlı: WordPress’in yerel şifre sıfırlama sayfasına yönlendir
• Eklenti: Headless-dostu bir şifre sıfırlama eklentisi kullan

Ben olsam ilk sürümde bu işi kahramanlığa soyunmadan, e-posta tabanlı yönlendirmeyle çözerdim. Kendi reset token üretecini yazmak kulağa temiz gelir ama güvenlik açısından yanlış yapması en kolay yerlerden biridir; süresi dolmayan ya da tahmin edilebilir bir reset token, tek başına bütün hesap güvenliğini çökertir. Bu tekerleği yeniden icat etmenin bedeli, kazancından yüksek.

Güvenlik En İyi Uygulamaları

• Üretim için JWT’yi localStorage’da asla saklama — HttpOnly çerezleri veya server-side oturum kullan
• Token yenilemeyi uygula — JWT’lerin kısa süreli (1 saat) ve yenileme mekanizması olmalıdır
• Giriş denemelerini sınırla — kaba kuvvet saldırılarını önle
• Her yerde HTTPS kullan — aktarımdaki tokenlar şifrelenmelidir
• Her API isteğinde tokenları doğrula — sadece istemci tarafı durumuna güvenme
• CORS’u düzgün uygula — sadece kendi frontend domain’ine izin ver

Peki ben hangisini seçerdim

Üç seçeneği yan yana koyunca karar aslında netleşiyor. Hızlı bir prototip mi çıkarıyorsun, iç ekibe demo mu yapacaksın? localStorage’lı JWT ile başla, en az sürtünme onda. Ama o kodu üretime taşımadan önce mutlaka server-side oturuma yükselt — localStorage’daki bir token, tek bir XSS açığında çalınır, ve o riski gerçek müşteri hesaplarıyla almazdım.

Gerçek bir mağaza kuruyorsan cevabım net: WordPress credentials provider’ı ve HttpOnly çerezleri ile NextAuth.js. Güvenlik, geliştirici deneyimi ve esneklik arasında en iyi dengeyi bu kurar; üstelik yarın Google veya Apple ile giriş eklemek istediğinde altyapı zaten hazır olur. Kendi auth katmanını sıfırdan yazmak bir mühendislik gururu meselesi gibi görünür, ama güvenlik kodunda gurur pahalıya patlar. Bu işi çözmüş olana yaslan, sen kendi asıl işine — mağazaya — odaklan.

Sonuç

Özetle: localStorage’da saklanan JWT prototipleme için uygundur ancak üretimden önce server-side oturum yönetimine yükseltilmelidir. Çoğu headless WooCommerce projesi için, WordPress credentials provider’ı ve HttpOnly çerezleri ile NextAuth.js en dengeli seçenek. WordPress’in yıllardır senin yerine hallettiği o görünmez işi headless dünyada yeniden inşa ederken, tekerleği yeniden icat etmek yerine kanıtlanmış parçaları birleştirmek — bir dinozorun sana verebileceği en sade tavsiye.