การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช
ขั้นตอนโทเค็นเข้าถึง + โทเค็นรีเฟรช คุกกี้ httpOnly และการรีเฟรชแบบเงียบด้วยตัวดักจับ
การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
รูปแบบ access token และ refresh token
รูปแบบ JWT ที่แข็งแกร่งใช้โทเค็นสองชนิด ได้แก่ access token ที่มีอายุสั้น (ระดับนาที) และส่งไปกับคำขอ API ทุกครั้ง กับ refresh token ที่มีอายุยาว (ระดับวัน) และใช้เฉพาะสำหรับสร้าง access token ใหม่ วิธีนี้จำกัดผลกระทบหาก access token รั่วไหล
การลงทะเบียนปลั๊กอิน JWT
สำหรับ Fastify ให้ลงทะเบียน @fastify/jwt และกำหนด secret ที่รัดกุม ปลั๊กอินนี้จะเพิ่มตัวช่วยสำหรับการลงลายเซ็นและการตรวจสอบให้กับออบเจ็กต์แอปและคำขอ
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})เส้นทางเข้าสู่ระบบ
POST /auth/login ตรวจสอบข้อมูลรับรอง จากนั้นออกโทเค็นทั้งสองชนิด อย่าเก็บรหัสผ่านแบบข้อความธรรมดาโดยเด็ดขาด ให้เปรียบเทียบกับค่าแฮช (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)
})การลงลายเซ็นให้ access token
ลงลายเซ็นให้ access token ที่มีอายุสั้น โดยใส่รหัสผู้ใช้และข้อมูลกำกับเท่าที่จำเป็น กำหนดอายุให้สั้น เช่น 15 นาที
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)การลงลายเซ็นให้ refresh token
ลงลายเซ็นให้ refresh token ที่มีอายุยาว โดยใส่เครื่องหมายระบุชนิดใน payload ที่แตกต่างกัน หรือใช้ secret แยกต่างหาก โทเค็นนี้ใช้เฉพาะที่ปลายทางสำหรับการรีเฟรชเท่านั้น
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Refresh token ในคุกกี้ httpOnly
เก็บ refresh token ไว้ในคุกกี้ที่เป็น httpOnly, SameSite และปลอดภัย JavaScript ไม่สามารถอ่านคุกกี้นี้ได้ จึงช่วยลดความเสี่ยงจากการขโมยผ่าน XSS และเบราว์เซอร์จะส่งคุกกี้นี้ไปยังปลายทางสำหรับการรีเฟรชโดยอัตโนมัติ
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})การส่ง access token ใน body
ส่ง access token กลับมาใน body ของการตอบกลับแบบ JSON แอป Vue จะเก็บโทเค็นนี้ไว้ในหน่วยความจำ ไม่ใช่ใน localStorage และแนบไปกับคำขอ API ส่วน refresh token จะไม่ปรากฏใน body
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookieเหตุใดจึงไม่ควรเก็บ access token ใน localStorage
สคริปต์ใด ๆ ก็สามารถอ่าน localStorage ได้ ดังนั้นข้อผิดพลาด XSS อาจขโมยโทเค็นที่เก็บอยู่ในนั้น การเก็บ access token ไว้ในหน่วยความจำของ JS และเก็บ refresh token ไว้ในคุกกี้ httpOnly ช่วยจำกัดขอบเขตความเสียหายจาก XSS
เส้นทางสำหรับการรีเฟรช
POST /auth/refresh อ่าน refresh token จากคุกกี้ ตรวจสอบความถูกต้อง แล้วออก access token ใหม่ จากนั้นส่ง access token ที่สร้างใหม่กลับมาใน body
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' })
}
})การปกป้องเส้นทาง
เพิ่ม preHandler ที่ตรวจสอบ access token จากส่วนหัว Authorization หากโทเค็นไม่ถูกต้องหรือหมดอายุ @fastify/jwt จะทำให้ request.jwtVerify() โยนข้อผิดพลาด และส่งผลลัพธ์เป็น 401
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))การออกจากระบบ: การล้างคุกกี้
การออกจากระบบจะล้างคุกกี้ refresh เพื่อไม่ให้คุกกี้นั้นใช้สร้าง access token ได้อีก หากต้องการการรับประกันที่รัดกุมยิ่งขึ้น ให้ติดตามและเพิกถอน refresh token ที่ฝั่งเซิร์ฟเวอร์ด้วย เช่น ใช้บัญชีปฏิเสธหรือการหมุนเวียนโทเค็น
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการยืนยันตัวตนด้วย JWT
สรุปทบทวน
คุณได้เรียนรู้การเข้าสู่ระบบและการรีเฟรชด้วย JWT:
- access token ที่มีอายุสั้น + refresh token ที่มีอายุยาว
POST /auth/loginตรวจสอบข้อมูลรับรองและลงลายเซ็นให้โทเค็นทั้งสองชนิด- refresh token อยู่ในคุกกี้ที่เป็น httpOnly SameSite Secure
- ส่ง access token กลับมาใน body และเก็บไว้ในหน่วยความจำของ JS
POST /auth/refreshสร้าง access token ใหม่จากคุกกี้
คำถามที่พบบ่อย
บทเรียน “การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช”
ขั้นตอนโทเค็นเข้าถึง + โทเค็นรีเฟรช คุกกี้ httpOnly และการรีเฟรชแบบเงียบด้วยตัวดักจับ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue
- การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช
- การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios
- การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง