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

Headless WooCommerce kurulumunda kimlik doğrulama, geleneksel WordPress’ten temelden farklıdır. wp-login.php yoktur, PHP tarafından yönetilen çerezler yoktur ve tema şablonları aracılığıyla nonce doğrulaması yoktur. Ayrılmış frontend’iniz ve WordPress backend’iniz arasında çalışan bir auth katmanı oluşturmanız gerekir.

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ızda tüm bunları kaybedersiniz. Next.js veya Nuxt frontend’inizin ş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.

Kurulum: [JWT Authentication for WP REST API](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/) eklentisini kurun.

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ız auth isteklerini proxy’ler ve HttpOnly çerezleri ayarlar.

// 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.

// 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:

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.

Ş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şturun
• E-posta tabanlı: WordPress’in yerel şifre sıfırlama sayfasına yönlendirin
• Eklenti: Headless-dostu şifre sıfırlama eklentisi kullanın

Güvenlik En İyi Uygulamaları

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

Sonuç

Çoğu headless WooCommerce projesi için, WordPress credentials provider’ı ve HttpOnly çerezleri ile NextAuth.js öneriyoruz. Güvenlik, geliştirici deneyimi ve esneklik açısından en iyi dengeyi sağlar. localStorage’da saklanan JWT prototipleme için uygundur ancak üretimden önce server-side oturum yönetimine yükseltilmelidir.