JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme
Erişim belirteci ve yenileme belirteci akışı, httpOnly çerezleri ve arakatmanlarla sessiz yenileme.
JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Erişim ve Yenileme Belirteci Modeli
Güçlü bir JWT düzeni iki belirteç kullanır: her API isteğiyle gönderilen kısa ömürlü erişim belirteci (dakikalar) ve yalnızca yeni erişim belirteçleri oluşturmak için kullanılan uzun ömürlü yenileme belirteci (günler). Böylece bir erişim belirteci sızarsa maruz kalma sınırlandırılır.
JWT Eklentisini Kaydetme
Fastify ile @fastify/jwt'yi kaydedin ve güçlü bir gizli anahtar sağlayın. Bu eklenti, app ve istek nesnelerine imzalama ve doğrulama yardımcıları ekler.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})Oturum Açma Rotası
POST /auth/login kimlik bilgilerini doğrular, ardından her iki belirteci de üretir. Düz metin parolaları asla saklamayın — bir özetle karşılaştırın (bcrypt/argon2).
app.post('/auth/login', async (req, reply) => {
const { email, password } = req.body
const user = await findUser(email)
if (!user || !(await verifyHash(password, user.hash))) {
return reply.code(401).send({ error: 'Invalid credentials' })
}
// ... sign tokens (next scene)
})Erişim Belirtecini İmzalama
Kısa ömürlü bir erişim belirtecini kullanıcı kimliği ve en az sayıda taleple imzalayın. Sona erme süresini kısa tutun (ör. 15 dakika).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Yenileme Belirtecini İmzalama
Uzun ömürlü bir yenileme belirtecini farklı bir payload işaretiyle (veya ayrı bir gizli anahtarla) imzalayın. Bu belirteç yalnızca yenileme uç noktasında kullanılır.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)httpOnly Çerezinde Yenileme Belirteci
Yenileme belirtecini httpOnly, SameSite ve Güvenli bir çerezde saklayın. JavaScript bu belirteci okuyamaz (XSS kaynaklı hırsızlığı azaltır) ve tarayıcı belirteci yenileme uç noktasına otomatik olarak gönderir.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Erişim Belirtecini Gövdede Döndürme
Erişim belirteci JSON yanıt gövdesinde döndürülür. Vue app bu belirteci bellekte tutar (localStorage'da değil) ve API isteklerine ekler. Yenileme belirteci gövdede hiçbir zaman görünmez.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookieErişim Belirteçleri localStorage'da Neden Saklanmamalı
localStorage herhangi bir komut dosyası tarafından okunabilir; bu nedenle bir XSS açığı oradaki belirteci çalabilir. Erişim belirtecini JS belleğinde, yenileme belirtecini ise httpOnly çerezinde tutmak XSS'in etkisini azaltır.
Yenileme Rotası
POST /auth/refresh yenileme belirtecini çerezden okur, doğrular ve yeni bir erişim belirteci üretir. Güncel erişim belirtecini gövdede döndürür.
app.post('/auth/refresh', async (req, reply) => {
const token = req.cookies.refreshToken
if (!token) return reply.code(401).send()
try {
const payload = app.jwt.verify(token)
const accessToken = app.jwt.sign(
{ sub: payload.sub }, { expiresIn: '15m' }
)
return reply.send({ accessToken })
} catch {
return reply.code(401).send({ error: 'Invalid refresh' })
}
})Rotaları Koruma
Authorization üst bilgisindeki erişim belirtecini doğrulayan bir preHandler ekleyin. @fastify/jwt'nin request.jwtVerify() işlevi geçersiz veya süresi dolmuş belirteçlerde hata verir ve 401 döndürülür.
app.get('/api/me', {
preHandler: async (req, reply) => {
try { await req.jwtVerify() }
catch { reply.code(401).send({ error: 'Unauthorized' }) }
}
}, async (req) => getProfile(req.user.sub))Oturumu Kapatma: Çerezi Temizleme
Oturumu kapatmak, yenileme çerezini temizler; böylece bu çerez artık erişim belirteçleri üretemez. Daha güçlü güvenceler için yenileme belirteçlerini sunucu tarafında da izleyip iptal edin (reddetme listesi veya rotasyon kullanarak).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Hızlı Kontrol
JWT kimlik doğrulamasıyla ilgili anlayışınızı sınayın.
Özet
JWT ile oturum açmayı ve yenilemeyi öğrendiniz:
- Kısa ömürlü erişim belirteci + uzun ömürlü yenileme belirteci
POST /auth/loginkimlik bilgilerini doğrular ve her ikisini de imzalar- Yenileme belirteci httpOnly SameSite Güvenli bir çereze konur
- Erişim belirteci gövdede döndürülür ve JS belleğinde tutulur
POST /auth/refreshçerezdeki belirteçten yeni bir erişim belirteci üretir
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme” dersi ücretsiz mi?
Evet — “JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme” dersinde ne öğreneceğim?
Erişim belirteci ve yenileme belirteci akışı, httpOnly çerezleri ve arakatmanlarla sessiz yenileme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue SPA'leri için Fastify Arka Ucu
- JWT Kimlik Doğrulaması: Oturum Açma ve Yenileme
- Axios Arakatmanlarıyla Kimliği Doğrulanmış API Çağrıları
- Tam Yığın Vue'yu Üretime Dağıtma