cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pengesahan Pengguna dengan Auth.js dalam Penghala Apl Next.js

Pengesahan Pengguna dengan Auth.js dalam Penghala Apl Next.js

Susan Sarandon
Susan Sarandonasal
2024-11-12 03:05:01644semak imbas

Jadual Kandungan

Persediaan Awal

  • Pasang
  • Konfigurasikan
    • Tetapan NextAuthConfig
    • Persediaan Pengendali Laluan
    • Perisian Tengah
    • Dapatkan Sesi dalam Komponen Sisi Pelayan
    • Dapatkan Sesi dalam Komponen Sebelah Pelanggan
  • Struktur folder

Melaksanakan Pengesahan: Bukti kelayakan dan Google OAuth

  • Menyediakan prisma
  • Kelayakan
  • Tambahkan Penyedia OAuth Google
    • Menetapkan aplikasi Google OAuth
    • Menetapkan URI Ubah Hala
    • Sediakan Pembolehubah Persekitaran
    • Pembekal Persediaan
  • Membuat halaman Log Masuk dan Daftar
  • Struktur Folder

Persediaan Awal

Pasang 

npm install next-auth@beta

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Konfigurasikan

Tetapan NextAuthConfig 

// src/auth.ts
import NextAuth from "next-auth"

export const config = {
  providers: [],
}

export const { handlers, signIn, signOut, auth } = NextAuth(config)

Ia harus diletakkan di dalam folder src

Pembekal bermaksud dalam Auth.js ialah perkhidmatan yang boleh digunakan untuk melog masuk pengguna. Terdapat empat cara pengguna boleh log masuk.

  • Menggunakan Pembekal OAuth terbina dalam(cth Github, Google, dll...)
  • Menggunakan Penyedia OAuth tersuai
  • Menggunakan E-mel
  • Menggunakan Bukti kelayakan

https://authjs.dev/reference/nextjs#providers

Persediaan Pengendali Laluan 

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Fail ini digunakan untuk menetapkan pengendali laluan dengan Penghala Apl Next.js.

Middleware 

// src/middleware.ts
import { auth } from "@/auth"

export default auth((req) => {
　　// Add your logic here
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  It's default setting
}

Tulis di dalam folder src.
Jika ditulis di luar folder src, perisian tengah tidak akan berfungsi.

Perisian Tengah ialah fungsi yang membolehkan anda menjalankan kod sebelum permintaan diselesaikan. Ia amat berguna untuk melindungi laluan dan mengendalikan pengesahan merentas aplikasi anda.

Matcher ialah pilihan konfigurasi untuk menentukan laluan perisian tengah yang patut digunakan untuk. Ia membantu mengoptimumkan prestasi dengan menjalankan perisian tengah hanya pada laluan yang diperlukan.
Contoh padanan: ['/dashboard/:path*'] menggunakan perisian tengah hanya pada laluan papan pemuka.

https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware

Dapatkan Sesi dalam Komponen Sisi Pelayan 

// src/app/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function page() {
  const session = await auth()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

Dapatkan Sesi dalam Komponen Sebelah Pelanggan 

// src/app/page.tsx
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

export default async function page() {
  const { data: session } = useSession()
  const router = useRouter()

  if (!session.user) {
    router.push('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { SessionProvider } from "next-auth/react"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

Struktur folder 

/src
  /app
    /api
      /auth
        [...nextauth]
          /route.ts  // Route Handler
    layout.tsx
    page.tsx

  auth.ts  // Provider, Callback, Logic etc
  middleware.ts  // A function before request

Melaksanakan Pengesahan: Bukti kelayakan dan Google OAuth

Menetapkan prisma 

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // ... (standard Auth.js Account model)
}

model Session {
  // ... (standard Auth.js Session model)
}

// ... (other necessary models)


// src/lib/prisma.ts

import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Tauliah

Kelayakan, dalam konteks pengesahan, rujuk kaedah mengesahkan identiti pengguna menggunakan maklumat yang pengguna berikan, biasanya nama pengguna (atau e-mel) dan kata laluan.

Kami boleh menambah bukti kelayakan dalam src/auth.ts.

npm install next-auth@beta

penyesuai:

  • modul yang menyambungkan sistem pengesahan anda ke pangkalan data atau penyelesaian storan data anda.

rahsia:

  • Ini ialah rentetan rawak yang digunakan untuk mencincang token, menandatangani/menyulitkan kuki dan menjana kunci kriptografi.
  • Ia penting untuk keselamatan dan harus dirahsiakan.
  • Dalam kes ini, ia ditetapkan menggunakan pembolehubah persekitaran AUTH_SECRET.

halaman:

  • Objek ini membolehkan anda menyesuaikan URL untuk halaman pengesahan.
  • Dalam contoh anda, log Masuk: '/login' bermaksud halaman log masuk akan berada di laluan '/log masuk' dan bukannya '/api/auth/login' lalai.

sesi:

  • Ini mengkonfigurasi cara sesi dikendalikan.
  • strategi: "jwt" bermaksud Token Web JSON akan digunakan untuk pengurusan sesi dan bukannya sesi pangkalan data.

panggilan balik:

  • Ini adalah fungsi yang dipanggil pada pelbagai titik dalam aliran pengesahan, membolehkan anda menyesuaikan proses.

panggil balik jwt:

  • Ini berjalan apabila JWT dibuat atau dikemas kini.
  • Dalam kod anda, ia menambahkan maklumat pengguna (id, e-mel, nama) pada token.

sesi panggil balik:

  • Ini dijalankan setiap kali sesi diperiksa.
  • Kod anda sedang menambah maklumat pengguna daripada token ke objek sesi.

Tambahkan Penyedia OAuth Google

Menetapkan aplikasi Google OAuth

Buat ID Pelanggan OAuth baharu daripada GCP Console > API & Perkhidmatan > Bukti kelayakan

User Authentication with Auth.js in Next.js App Router

Setelah dibuat, simpan ID Pelanggan dan Rahsia Pelanggan anda untuk kegunaan kemudian.

Menetapkan URI Ubah Hala

Apabila kami bekerja di tempatan, tetapkan http://localhost:3000/api/auth/callback/google

Dalam persekitaran pengeluaran, cuma gantikan http://localhost:3000 dengan https://------.

User Authentication with Auth.js in Next.js App Router

Sediakan Pembolehubah Persekitaran 

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Penyedia Persediaan 

// src/auth.ts
import NextAuth from "next-auth"

export const config = {
  providers: [],
}

export const { handlers, signIn, signOut, auth } = NextAuth(config)

https://authjs.dev/getting-started/authentication/oauth

Mencipta halaman Log Masuk dan Daftar 

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

// src/middleware.ts
import { auth } from "@/auth"

export default auth((req) => {
　　// Add your logic here
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  It's default setting
}

// src/app/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function page() {
  const session = await auth()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/page.tsx
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

export default async function page() {
  const { data: session } = useSession()
  const router = useRouter()

  if (!session.user) {
    router.push('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { SessionProvider } from "next-auth/react"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

/src
  /app
    /api
      /auth
        [...nextauth]
          /route.ts  // Route Handler
    layout.tsx
    page.tsx

  auth.ts  // Provider, Callback, Logic etc
  middleware.ts  // A function before request

Struktur Folder 

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // ... (standard Auth.js Account model)
}

model Session {
  // ... (standard Auth.js Session model)
}

// ... (other necessary models)

Atas ialah kandungan terperinci Pengesahan Pengguna dengan Auth.js dalam Penghala Apl Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json express String Object if for Session Token using JS console function default this table github database http https router
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Memanggil Fungsi ASP.NET dari JavaScript melalui PostBack?Artikel seterusnya：Bagaimana untuk Memanggil Fungsi ASP.NET dari JavaScript melalui PostBack?

Artikel berkaitan

Lihat lagi