Next.js 15 Fullstack (App Router + Server Actions) · Lekcja

Niestandardowe strategie uwierzytelniania

Twórz i integruj niestandardowe strategie uwierzytelniania dopasowane do wymagań projektu, wykraczające poza możliwości istniejących bibliotek

Lekcja 5 z 611 kroki

Niestandardowe strategie uwierzytelniania to bezpłatna lekcja Next.js 15 Fullstack (App Router + Server Actions) na CoddyKit. To lekcja 5 z 6. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack (App Router + Server Actions), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack (App Router + Server Actions) zawiera 6 lekcji w sumie.

Dlaczego własne uwierzytelnianie?

Chociaż biblioteki takie jak NextAuth.js są zaawansowane, czasami projekt wymaga niestandardowego procesu uwierzytelniania. Własne strategie zapewniają pełną kontrolę nad każdym szczegółem.

  • Obsługują konkretne wymagania integracyjne.
  • Umożliwiają implementowanie unikalnych procesów uwierzytelniania (na przykład magicznych linków).
  • Pozwalają lepiej zrozumieć podstawowe zagadnienia związane z uwierzytelnianiem.

W tej lekcji omówimy tworzenie uwierzytelniania od podstaw z wykorzystaniem funkcji Next.js 15.

Podstawowe pojęcia: sesje i pliki cookie

Uwierzytelnianie często opiera się na sesjach, które pozwalają zachować stan zalogowania użytkownika między kolejnymi żądaniami. Do zarządzania sesjami w aplikacjach internetowych używamy przede wszystkim plików cookie HTTP.

  • Pliki cookie to niewielkie porcje danych wysyłane przez serwer do przeglądarki.
  • Przeglądarka przechowuje je i wysyła z powrotem wraz z kolejnymi żądaniami.
  • Mają kluczowe znaczenie dla zapamiętywania stanu zalogowania użytkownika.

Tworzenie formularza logowania (interfejs)

Nasze własne uwierzytelnianie zaczyna się od prostego formularza logowania. Formularz przechwytuje dane logowania użytkownika (takie jak nazwa użytkownika i hasło) i przesyła je do akcji serwerowej Next.js. Każde pole wejściowe musi mieć atrybut name, aby można było uzyskać do niego dostęp w akcji.

export default function LoginPage() {
  return (
    <form>
      <h2>Login</h2>
      <label htmlFor="username">Username:</label>
      <input id="username" name="username" type="text" required />

      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />

      <button type="submit">Log In</button>
    </form>
  );
}

Akcja serwerowa logowania

Po przesłaniu formularza logowania akcja serwerowa Next.js przechwytuje żądanie. Akcja działa w całości na serwerze i odpowiada za:

  • Sprawdzenie przesłanej nazwy użytkownika i hasła.
  • Utworzenie sesji, jeśli dane są prawidłowe (na przykład wygenerowanie unikalnego identyfikatora sesji).
  • Ustawienie bezpiecznego pliku cookie HTTP-only w przeglądarce użytkownika.
  • Przekierowanie użytkownika na chronioną stronę.

Kod: akcja serwerowa logowania

Ten uruchamialny przykład symuluje akcję serwerową logowania. Zastępujemy funkcje cookies() i redirect() Next.js atrapami, aby pokazać, jak sprawdzane są dane logowania i jak ustawiany jest plik cookie sesji.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: {},
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function login(formData) {
  const username = formData.get('username');
  const password = formData.get('password');
  const users = {'testuser': 'password123'}; // Mock DB

  if (users[username] === password) {
    mockCookies.set('session', 'some_token', { httpOnly: true, maxAge: 3600 });
    mockRedirect('/dashboard');
  } else {
    console.error('Login failed: Invalid credentials');
  }
}

// Main entry point for runnable example
async function main() {
  console.log("--- Test Login Success ---");
  const successForm = new Map([
    ['username', 'testuser'],
    ['password', 'password123']
  ]);
  try { await login(successForm); }
  catch (e) { console.log(e.message); }

  console.log("\n--- Test Login Fail ---");
  const failForm = new Map([
    ['username', 'wrong'],
    ['password', 'pass']
  ]);
  try { await login(failForm); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Ochrona tras za pomocą middleware

Po zalogowaniu użytkownika należy upewnić się, że nie może on uzyskać dostępu do ograniczonych stron bez prawidłowej sesji. Middleware Next.js doskonale się do tego nadaje, ponieważ działa przed zakończeniem obsługi żądania.

  • Middleware przechwytuje żądania do określonych ścieżek.
  • Sprawdza obecność i ważność pliku cookie sesji.
  • Jeśli sesja jest nieprawidłowa lub jej brakuje, przekierowuje użytkownika na stronę logowania.

Kod: middleware uwierzytelniania

Ten plik middleware.js pokazuje, jak chronić trasę /dashboard, sprawdzając obecność własnego pliku cookie 'session'. Middleware to funkcja specyficzna dla Next.js, której nie można uruchomić w ogólnym środowisku JavaScript.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const sessionCookie = request.cookies.get('session');
  const pathname = request.nextUrl.pathname;

  // Define protected routes
  const protectedRoutes = ['/dashboard'];

  if (protectedRoutes.includes(pathname) && !sessionCookie) {
    // Redirect to login if no session
    const loginUrl = new URL('/login', request.url);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next(); // Allow request to proceed
}

// Configure matcher to run middleware on specific paths
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|login).*)'],
};

Mechanizm wylogowania

Zapewnienie użytkownikom bezpiecznego sposobu wylogowania ma kluczowe znaczenie. Akcja serwerowa wylogowania musi jedynie usunąć plik cookie sesji z przeglądarki użytkownika, skutecznie kończąc jego sesję.

Kod: akcja serwerowa wylogowania

Ten uruchamialny przykład przedstawia akcję serwerową, która usuwa plik cookie 'session' i przekierowuje użytkownika na stronę logowania, symulując wylogowanie.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: { 'session': { v: 'active_token' } }, // Simulate active session
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function logout() {
  mockCookies.delete('session');
  mockRedirect('/login');
}

// Main entry point for runnable example
async function main() {
  console.log("--- Before Logout ---");
  console.log("Initial cookies:", mockCookies._store);

  console.log("\n--- Attempting Logout ---");
  try { await logout(); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Sprawdź swoją wiedzę

Sprawdźmy, czego nauczyli się Państwo o własnym uwierzytelnianiu w Next.js.

Podsumowanie: własne strategie uwierzytelniania

Nauczył(a) się Pan/Pani, jak zbudować niestandardową strategię uwierzytelniania w Next.js 15, wykorzystując zaawansowane funkcje po stronie serwera, aby uzyskać pełną kontrolę.

  • Poznał(a) Pan/Pani zarządzanie sesjami za pomocą bezpiecznych plików cookie HTTP-only.
  • Zaimplementował(a) Pan/Pani funkcje logowania i wylogowywania przy użyciu Server Actions w Next.js.
  • Zabezpieczył(a) Pan/Pani trasy aplikacji za pomocą middleware w Next.js.

Podczas tworzenia niestandardowego uwierzytelniania należy zawsze traktować bezpieczeństwo priorytetowo (szyfrowanie, HTTPS, bezpieczne pliki cookie).

Bezpłatny start

Ucz się TypeScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
22
Lekcje
88

Często zadawane pytania

Czy lekcja „Niestandardowe strategie uwierzytelniania” jest bezpłatna?

Tak — pełny tekst „Niestandardowe strategie uwierzytelniania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack (App Router + Server Actions), przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack (App Router + Server Actions) zawiera 6 lekcji w sumie.

Co nauczysz się w „Niestandardowe strategie uwierzytelniania”?

Twórz i integruj niestandardowe strategie uwierzytelniania dopasowane do wymagań projektu, wykraczające poza możliwości istniejących bibliotek Ćwiczysz Next.js 15 Fullstack (App Router + Server Actions) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack (App Router + Server Actions)?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack (App Router + Server Actions) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 5 z 6.

Ile czasu zajmuje lekcja „Niestandardowe strategie uwierzytelniania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack (App Router + Server Actions)?

Tak. Każda lekcja Next.js 15 Fullstack (App Router + Server Actions) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Integracja NextAuth.js
  2. Implementacja strategii JWT
  3. Ochrona tras i danych
  4. Strażnicy i role
  5. Niestandardowe strategie uwierzytelniania
  6. Integracja Passport.js
← Powrót do Next.js 15 Fullstack (App Router + Server Actions)