0Pricing
React Academy · บทเรียน

ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง

ยืนยันตัวตนผู้ใช้กับฐานข้อมูลด้วยผู้ให้บริการข้อมูลรับรองและฟอร์มเข้าสู่ระบบแบบกำหนดเอง

ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ควรใช้ผู้ให้บริการข้อมูลรับรองเมื่อใด

ใช้ผู้ให้บริการข้อมูลรับรองเมื่อยืนยันตัวตนกับฐานข้อมูลของคุณเอง (email + รหัสผ่าน) แทนผู้ให้บริการ OAuth โดยต้องจัดการการแฮชรหัสผ่านและความปลอดภัยอย่างรอบคอบ

กำหนดผู้ให้บริการข้อมูลรับรอง

เพิ่ม Credentials ลงในอาร์เรย์ providers ฟังก์ชัน authorize จะรับข้อมูลรับรองที่ส่งมา และส่งคืนออบเจ็กต์ผู้ใช้หรือ null

import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';

export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await db.user.findUnique({ where: { email: credentials.email as string } });
        if (!user) return null;
        const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
        if (!valid) return null;
        return { id: user.id, name: user.name, email: user.email };
      },
    }),
  ],
});

ฟอร์มเข้าสู่ระบบแบบกำหนดเอง

สร้างฟอร์มเข้าสู่ระบบเป็นคอมโพเนนต์ฝั่งไคลเอนต์ที่เรียกใช้ signIn('credentials', { email, password }) จาก next-auth/react

'use client';
import { signIn } from 'next-auth/react';

export function LoginForm() {
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const result = await signIn('credentials', {
      email: form.get('email'),
      password: form.get('password'),
      redirect: false, // handle redirect manually
    });
    if (result?.error) setError('Invalid email or password');
    else router.push('/dashboard');
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">Sign in</button>
    </form>
  );
}

ไม่เปลี่ยนเส้นทางสำหรับการจัดการข้อผิดพลาด

ส่ง redirect: false ให้กับ signIn() เพื่อรับออบเจ็กต์ผลลัพธ์และจัดการข้อผิดพลาดในคอมโพเนนต์ แทนการเปลี่ยนเส้นทางไปยังหน้าข้อผิดพลาด

const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
  // result.error is 'CredentialsSignin' for auth failures
  setError('Invalid email or password');
}

การตรวจสอบด้วย Zod ในฟังก์ชันตรวจสอบสิทธิ์

ตรวจสอบข้อมูลรับรองด้วย Zod ภายในฟังก์ชัน authorize ก่อนเข้าถึงฐานข้อมูล

import { z } from 'zod';

const schema = z.object({ email: z.string().email(), password: z.string().min(8) });

async authorize(credentials) {
  const parsed = schema.safeParse(credentials);
  if (!parsed.success) return null;
  const { email, password } = parsed.data;
  // ... db lookup
}

กลยุทธ์เซสชันสำหรับข้อมูลรับรอง

ผู้ให้บริการข้อมูลรับรองต้องใช้กลยุทธ์เซสชันแบบ JWT โดยไม่จำเป็นต้องใช้อะแดปเตอร์ฐานข้อมูลสำหรับเซสชัน โปรดกำหนด session: { strategy: 'jwt' } อย่างชัดเจน

export const { handlers, auth } = NextAuth({
  session: { strategy: 'jwt' },
  providers: [Credentials({ ... })],
});

การเพิ่มฟิลด์แบบกำหนดเองในเซสชัน

ส่งข้อมูลผู้ใช้เพิ่มเติมผ่านฟังก์ชันเรียกกลับของ JWT และเซสชัน เพื่อเปิดเผยข้อมูลดังกล่าวใน useSession()

callbacks: {
  async jwt({ token, user }) {
    if (user) { token.id = user.id; token.role = user.role; }
    return token;
  },
  async session({ session, token }) {
    session.user.id = token.id as string;
    session.user.role = token.role as string;
    return session;
  },
},

การแฮชรหัสผ่าน

โปรดแฮชรหัสผ่านด้วย bcrypt ทุกครั้งก่อนจัดเก็บ และห้ามจัดเก็บรหัสผ่านเป็นข้อความธรรมดา

import bcrypt from 'bcryptjs';

// On registration:
const passwordHash = await bcrypt.hash(password, 12);
await db.user.create({ data: { email, passwordHash } });

// On login (in authorize):
const valid = await bcrypt.compare(submittedPassword, user.passwordHash);

การจำกัดอัตราการพยายามเข้าสู่ระบบ

ป้องกันปลายทางข้อมูลรับรองจากการโจมตีแบบลองทุกค่าที่เป็นไปได้ โดยจำกัดอัตราการพยายามเข้าสู่ระบบด้วยมิดเดิลแวร์หรือที่จัดเก็บข้อมูลในหน่วยความจำ

// middleware.ts or in a rate-limiting library
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(10, '10 s') });

// Check in authorize before DB query:
const { success } = await ratelimit.limit(credentials.email as string);
if (!success) return null;

กระบวนการลงทะเบียน

การลงทะเบียนแยกจาก Auth.js — สร้างผู้ใช้ในฐานข้อมูลของคุณพร้อมรหัสผ่านที่แฮชแล้วผ่าน Server Action หรือเส้นทาง API จากนั้นให้ผู้ใช้เข้าสู่ระบบด้วย signIn('credentials', ...)

ตรวจสอบความเข้าใจ

เหตุใดจึงควรส่ง redirect: false เมื่อเรียกใช้ signIn() ในแบบฟอร์มเข้าสู่ระบบแบบกำหนดเอง

สรุปทบทวน

ผู้ให้บริการข้อมูลรับรองจะเรียกใช้ฟังก์ชัน authorize ของคุณพร้อมข้อมูลแบบฟอร์มที่ส่งมา ตรวจสอบข้อมูลด้วย Zod เปรียบเทียบรหัสผ่านที่แฮชแล้วด้วย bcrypt และส่งคืนออบเจ็กต์ผู้ใช้หรือค่า null ใช้ redirect: false ในแบบฟอร์มเพื่อจัดการข้อผิดพลาดแบบกำหนดเอง และใช้กลยุทธ์ JWT กับข้อมูลรับรองเสมอ

คำถามที่พบบ่อย

บทเรียน “ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง”

ยืนยันตัวตนผู้ใช้กับฐานข้อมูลด้วยผู้ให้บริการข้อมูลรับรองและฟอร์มเข้าสู่ระบบแบบกำหนดเอง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Auth.js ใน Next.js App Router
  2. การจัดการเซสชันและฮุก useSession
  3. ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง
  4. การป้องกันเส้นทางด้วยมิดเดิลแวร์
← กลับไปที่ React Academy