Pengesahan Next.js

Sehingga Next.js 15, pengendalian pengesahan telah menjadi lebih mantap dan fleksibel, terutamanya dengan komponen pelayan lanjutannya, Actions API dan keupayaan perisian tengah. Dalam artikel ini, kami akan meneroka amalan terbaik untuk melaksanakan pengesahan dalam aplikasi Next.js 15, meliputi topik penting seperti komponen pelayan, perisian tengah, Tindakan dan pengurusan sesi.

Jadual Kandungan

1. Ikhtisar Pengesahan dalam Next.js 15
2. Menyediakan Pengesahan
3. Menggunakan Komponen Pelayan untuk Pengesahan
4. Mengendalikan Pengesahan dengan Tindakan
5. Melaksanakan Middleware untuk Pengawal Auth
6. Amalan Terbaik Pengurusan Sesi dan Keselamatan
7. Kesimpulan

Gambaran Keseluruhan Pengesahan dalam Next.js 15

Next.js 15 mempertingkatkan keupayaan pemaparan bahagian pelayan dan memperkenalkan alatan baharu untuk mengendalikan pengesahan, terutamanya dalam konteks komponen pelayan dan API Tindakan. Dengan komponen pelayan, anda boleh mengurus pengesahan pada pelayan dengan selamat tanpa mendedahkan data sensitif kepada klien, manakala API Tindakan membenarkan komunikasi pelayan yang lancar. Middleware boleh membantu melindungi laluan dan menyemak kebenaran pengguna secara dinamik, menjadikan aliran pengesahan lebih selamat dan mesra pengguna.

Menyediakan Pengesahan

Untuk bermula, pilih strategi pengesahan yang sesuai untuk apl anda. Pendekatan biasa termasuk:

• JWT (Token Web JSON): Sesuai untuk apl tanpa negara, tempat token disimpan pada pelanggan.
• Pengesahan Berasaskan Sesi: Sesuai untuk apl dengan storan sesi pada pelayan.
• OAuth: Untuk penyepaduan dengan penyedia pihak ketiga (Google, GitHub, dll.).

1. Pasang next-auth untuk Pengesahan

Untuk aplikasi yang memerlukan OAuth, Next.js disepadukan dengan baik dengan next-auth, yang memudahkan pengurusan sesi dan token.

npm install next-auth

Konfigurasikannya dalam persediaan Next.js 15 menggunakan /app/api/auth/[...nextauth]/route.ts:

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

Menggunakan Komponen Pelayan untuk Pengesahan

Dalam Next.js 15, komponen pelayan membenarkan anda memaparkan komponen pada pelayan dan mengawal akses kepada data dengan selamat.

1. Mengambil Sesi Pengguna dalam Komponen Pelayan: Ini mengurangkan pergantungan pada keadaan pihak klien dan mengelakkan pendedahan data sensitif dalam klien. Anda boleh mengambil data sesi pengguna terus dalam komponen pelayan.

2. Contoh Pengesahan Bahagian Pelayan Semakan dalam Komponen Pelayan:
   

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

   export default async function DashboardPage() {
     const session = await getServerSession(authOptions);

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

Di sini, getServerSession mengambil data sesi pengguna dengan selamat pada pelayan. Jika tiada sesi yang sah, fungsi ubah hala menghantar pengguna ke halaman log masuk.

Mengendalikan Pengesahan dengan Tindakan

API Tindakan dalam Next.js 15 menyediakan cara untuk berinteraksi dengan fungsi pelayan terus daripada klien. Ini amat berguna untuk tindakan log masuk, log keluar dan pendaftaran.

Contoh: Mencipta Tindakan Log Masuk

npm install next-auth

Penggunaan Tindakan Log Masuk dalam Komponen

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

Log masukAction ditakrifkan dengan selamat sebagai tindakan pelayan dan pelanggan boleh mencetuskannya tanpa mendedahkan data sensitif.

Melaksanakan Middleware untuk Pengawal Auth

Perisian Tengah dalam Next.js 15 menyediakan cara yang berkuasa untuk melindungi laluan dengan mengesahkan status pengesahan pada pelayan sebelum memuatkan halaman.

Contoh Middleware untuk Perlindungan Laluan

Untuk melindungi halaman seperti /papan pemuka dan /profil, cipta perisian tengah dalam middleware.ts.

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

   export default async function DashboardPage() {
     const session = await getServerSession(authOptions);

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

Pengurusan Sesi dan Amalan Terbaik Keselamatan

Mengekalkan sesi selamat dan melindungi data pengguna adalah penting dalam sebarang aliran pengesahan.

1. Gunakan Kuki HTTP Sahaja untuk Storan Token:

   • Elakkan menyimpan JWT dalam localStorage atau sessionStorage. Gunakan kuki HTTP sahaja untuk menghalang serangan XSS.

2. Token Tamat Tempoh dan Muat Semula Sesi:

   • Laksanakan token akses jangka pendek dan muat semula token untuk memastikan sesi kekal selamat. Anda boleh menggunakan ciri pengurusan sesi next-auth untuk ini.

3. Kawalan Akses Berasaskan Peranan (RBAC):

   • Tetapkan peranan kepada pengguna dan benarkan tindakan berdasarkan peranan mereka. Dalam pengesahan seterusnya, ini boleh dilakukan menggunakan objek sesi atau melalui perisian tengah dan tindakan.

4. Perlindungan Pemalsuan Permintaan Rentas Tapak (CSRF):

   • Gunakan perlindungan CSRF untuk menghalang permintaan yang tidak dibenarkan daripada tapak berniat jahat. next-auth termasuk perlindungan CSRF secara lalai.

5. Pengepala dan HTTPS Selamat:

   • Sentiasa sediakan aplikasi anda melalui HTTPS dan tetapkan pengepala selamat seperti Content-Security-Policy, Strict-Transport-Security dan X-Frame-Options.

Kesimpulan

Next.js 15 membawa alatan dan komponen yang mantap untuk mengurus pengesahan dengan selamat. Memanfaatkan komponen pelayan, Tindakan dan perisian tengah memastikan data sensitif dilindungi pada pelayan dan mengurangkan risiko mendedahkan maklumat kepada pelanggan.

Atas ialah kandungan terperinci Pengesahan Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!