Penyedia Kelayakan & Log Masuk Tersuai
Sahkan pengguna terhadap pangkalan data dengan penyedia kelayakan dan borang log masuk tersuai.
Penyedia Kelayakan & Log Masuk Tersuai ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Bila Hendak Menggunakan Penyedia Kelayakan
Gunakan penyedia Kelayakan apabila anda mengesahkan pengguna terhadap pangkalan data sendiri (email + kata laluan), bukannya penyedia OAuth. Penggunaan ini memerlukan pengendalian pencincangan kata laluan dan keselamatan yang teliti.
Mentakrifkan Penyedia Kelayakan
Tambahkan Credentials kepada tatasusunan penyedia. Fungsi authorize menerima kelayakan yang dihantar dan mengembalikan objek pengguna atau 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 };
},
}),
],
});Borang Log Masuk Tersuai
Bina borang log masuk sebagai Komponen Klien yang memanggil signIn('credentials', { email, password }) daripada 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 untuk Pengendalian Ralat
Hantar redirect: false kepada signIn() untuk menerima objek hasil dan mengendalikan ralat dalam komponen, bukannya mengubah hala pengguna ke halaman ralat.
const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
// result.error is 'CredentialsSignin' for auth failures
setError('Invalid email or password');
}Pengesahan Zod dalam authorize
Sahkan kelayakan dengan Zod di dalam fungsi authorize sebelum mengakses pangkalan data.
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
}Strategi Sesi untuk Kelayakan
Penyedia kelayakan memerlukan strategi sesi JWT (tiada penyesuai pangkalan data diperlukan untuk sesi). Tetapkan session: { strategy: 'jwt' } secara jelas.
export const { handlers, auth } = NextAuth({
session: { strategy: 'jwt' },
providers: [Credentials({ ... })],
});Menambah Medan Tersuai pada Sesi
Hantar data pengguna tambahan melalui panggilan balik JWT dan sesi supaya data itu boleh diakses dalam 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;
},
},Pencincangan Kata Laluan
Sentiasa cincang kata laluan dengan bcrypt sebelum menyimpannya. Jangan sekali-kali menyimpan kata laluan dalam teks biasa.
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);Mengehadkan Kadar Percubaan Log Masuk
Lindungi titik akhir kelayakan daripada serangan cuba paksa dengan mengehadkan kadar percubaan log masuk menggunakan perisian tengah atau stor dalam memori.
// 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;Aliran Pendaftaran
Pendaftaran berasingan daripada Auth.js — cipta pengguna dalam pangkalan data anda (dengan kata laluan yang telah dicincang) melalui tindakan pelayan atau laluan API, kemudian log masukkannya dengan signIn('credentials', ...).
Semakan Pantas
Mengapakah anda perlu menghantar redirect: false apabila memanggil signIn() dalam borang log masuk tersuai?
Ringkasan
Penyedia kelayakan memanggil fungsi authorize anda dengan data borang yang dihantar. Sahkan dengan Zod, bandingkan kata laluan yang dicincang dengan bcrypt, kemudian kembalikan objek pengguna atau null. Gunakan redirect: false dalam borang untuk pengendalian ralat tersuai, dan sentiasa gunakan strategi JWT dengan kelayakan.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Penyedia Kelayakan & Log Masuk Tersuai” percuma?
Ya — teks penuh “Penyedia Kelayakan & Log Masuk Tersuai” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penyedia Kelayakan & Log Masuk Tersuai”?
Sahkan pengguna terhadap pangkalan data dengan penyedia kelayakan dan borang log masuk tersuai. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Penyedia Kelayakan & Log Masuk Tersuai” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan Auth.js dalam Penghala Aplikasi Next.js
- Pengurusan Sesi & Cangkuk useSession
- Penyedia Kelayakan & Log Masuk Tersuai
- Perlindungan Laluan Berasaskan Perisian Tengah