Pengesahan Pengguna dengan Auth.js dalam Penghala Apl Next.js-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

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

Susan Sarandon

Nov 12, 2024 am 03:05 AM

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

Salin selepas log masuk

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Salin selepas log masuk

Konfigurasikan

Tetapan NextAuthConfig

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

export const config = {
  providers: [],
}

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

Salin selepas log masuk

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

Salin selepas log masuk

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
}

Salin selepas log masuk

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>
  )
}

Salin selepas log masuk

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>
  );
}

Salin selepas log masuk

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

Salin selepas log masuk

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)

Salin selepas log masuk

// 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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Penyedia Persediaan

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

export const config = {
  providers: [],
}

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

Salin selepas log masuk

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

Salin selepas log masuk

// 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
}

Salin selepas log masuk

// 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>
  )
}

Salin selepas log masuk

// 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>
  );
}

Salin selepas log masuk

/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

Salin selepas log masuk

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)

Salin selepas log masuk

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!

Kenyataan Laman Web ini

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