Wie man Grundlegende Autorisierung in Astro Implementiert

Beim Erstellen von Webanwendungen gibt es Zeiten, in denen du deine Routen schützen musst, bevor du sie in die Produktion bringst. Ob du an einem Kundenprojekt arbeitest, das vor der Öffentlichkeit versteckt werden muss, oder du eine einfache Authentifizierungsschicht zu deiner Entwicklungsumgebung hinzufügen möchtest - grundlegende Autorisierung ist eine schnelle und effektive Lösung.

In diesem Leitfaden zeigen wir dir, wie du grundlegende Authentifizierung in deiner Astro-Anwendung mit Middleware implementierst. Dieser Ansatz ist perfekt für temporären Schutz während der Entwicklungs- oder Staging-Phasen.

Inhaltsverzeichnis

• Was ist Grundlegende Authentifizierung?
• Schritt-für-Schritt Implementierung
  • Schritt 1: Erstelle eine neue Astro-Anwendung
  • Schritt 2: Integriere den Node.js-Adapter in dein Astro-Projekt
  • Schritt 3: Erstelle eine Middleware-Datei
  • Schritt 4: Konfiguriere Geschützte Routen
  • Schritt 5: Richte Umgebungsvariablen ein (Empfohlen)
• Wie es Funktioniert
  • 1. Routenschutz-Logik
  • 2. Authentifizierungsablauf

Was ist Grundlegende Authentifizierung?

Grundlegende Authentifizierung ist ein einfaches Authentifizierungsschema, das in das HTTP-Protokoll integriert ist. Es funktioniert folgendermaßen:

1. Client-Anfrage: Der Browser sendet eine Anfrage an eine geschützte Route
2. Server-Herausforderung: Der Server antwortet mit einem 401 Unauthorized Status und einem WWW-Authenticate Header
3. Browser-Prompt: Der Browser zeigt dem Benutzer ein Anmeldedialog an
4. Anmeldedaten: Der Benutzer gibt Benutzername/Passwort ein, die kodiert und mit nachfolgenden Anfragen gesendet werden
5. Validierung: Der Server validiert die Anmeldedaten und erlaubt oder verweigert den Zugriff

Schritt-für-Schritt Implementierung

Schritt 1: Erstelle eine neue Astro-Anwendung

Lass uns mit der Erstellung eines neuen Astro-Projekts beginnen. Führe den folgenden Befehl aus:

npm create astro@latest my-app

npm create astro ist die empfohlene Methode, um schnell ein Astro-Projekt zu erstellen.

Wenn du gefragt wirst, wähle:

• Empty wenn du gefragt wirst, wie du das neue Projekt starten möchtest.
• Yes wenn du gefragt wirst, ob du TypeScript schreiben planst.
• Strict wenn du gefragt wirst, wie streng TypeScript sein soll.
• Yes wenn du gefragt wirst, ob du Abhängigkeiten installieren möchtest.
• Yes wenn du gefragt wirst, ob du ein Git-Repository initialisieren möchtest.

Sobald das erledigt ist, kannst du in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 laufen.

Schritt 2: Integriere den Node.js-Adapter in dein Astro-Projekt

Um Server-Side Rendering in deinem Astro-Projekt über den Node.js-Adapter zu aktivieren. Führe den folgenden Befehl aus:

npx astro add node

Wenn du gefragt wirst, wähle Folgendes:

• Yes wenn du gefragt wirst, ob du die Node.js-Abhängigkeiten installieren möchtest.
• Yes wenn du gefragt wirst, ob du Änderungen an der Astro-Konfigurationsdatei vornehmen möchtest.

Dies installiert die notwendigen Abhängigkeiten und aktualisiert deine astro.config.mjs Datei.

Schritt 3: Erstelle eine Middleware-Datei

Erstelle eine neue Datei namens middleware.ts in deinem src/ Verzeichnis mit dem folgenden Code:

import { defineMiddleware } from 'astro:middleware'

// Definiere geschützte Routen, die "grundlegende Authentifizierung" erfordern
// (nur um die Seiten hinter einer Basic Auth zu schützen, bevor du deine Anwendung der Welt zeigst)
const PROTECTED_ROUTES = [
  // '/',
  // '/signin'
]

// Grundlegende Anmeldedaten (in der Produktion, verwende Umgebungsvariablen)
const VALID_CREDENTIALS = {
  username: 'admin',
  password: 'password123',
}

export const onRequest = defineMiddleware(async (context, next) => {
  const { url, request } = context
  const pathname = new URL(url).pathname

  // Prüfe, ob die aktuelle Route geschützt ist
  const isProtectedRoute = PROTECTED_ROUTES.some((route) =>
    (route === '/' ? pathname === route : pathname.startsWith(route))
  )

  // Für geschützte Routen, prüfe die Authentifizierung
  if (isProtectedRoute) {
    const authHeader = request.headers.get('authorization')

    if (!authHeader || !authHeader.startsWith('Basic ')) {
      // Gib 401 Unauthorized mit WWW-Authenticate Header zurück
      return new Response('Authentifizierung erforderlich', {
        status: 401,
        headers: {
          'WWW-Authenticate': 'Basic realm="Sicherer Bereich"',
          'Content-Type': 'text/plain',
        },
      })
    }

    // Extrahiere und dekodiere Anmeldedaten
    const encodedCredentials = authHeader.substring(6)
    const decodedCredentials = atob(encodedCredentials)
    const [username, password] = decodedCredentials.split(':')

    // Validiere Anmeldedaten
    if (username !== VALID_CREDENTIALS.username || password !== VALID_CREDENTIALS.password) {
      return new Response('Ungültige Anmeldedaten', {
        status: 401,
        headers: {
          'WWW-Authenticate': 'Basic realm="Sicherer Bereich"',
          'Content-Type': 'text/plain',
        },
      })
    }
  }

  // Fahre mit dem nächsten Middleware/Route-Handler fort
  return next()
})

Schritt 4: Konfiguriere Geschützte Routen

In der Middleware-Datei kannst du angeben, welche Routen geschützt werden sollen, indem du Routen zum PROTECTED_ROUTES Array hinzufügst oder auskommentierst:

const PROTECTED_ROUTES = [
  '/',           // Schütze die Startseite
  '/admin',      // Schütze alle Routen, die mit /admin beginnen
  '/dashboard',  // Schütze alle Routen, die mit /dashboard beginnen
  '/api',        // Schütze alle API-Routen
]

Schritt 5: Richte Umgebungsvariablen ein (Empfohlen)

Für den Produktionseinsatz ist es besser, Umgebungsvariablen anstelle von hartcodierten Anmeldedaten zu verwenden. Erstelle eine .env Datei:

BASIC_AUTH_USERNAME=admin
BASIC_AUTH_PASSWORD=dein-sicheres-passwort

Dann aktualisiere die Middleware, um diese Umgebungsvariablen zu verwenden:

const VALID_CREDENTIALS = {
  username: import.meta.env.BASIC_AUTH_USERNAME || 'admin',
  password: import.meta.env.BASIC_AUTH_PASSWORD || 'password123',
}

Wie es Funktioniert

1. Routenschutz-Logik

Die Middleware prüft, ob die aktuelle Route im PROTECTED_ROUTES Array ist:

const isProtectedRoute = PROTECTED_ROUTES.some((route) =>
  (route === '/' ? pathname === route : pathname.startsWith(route))
)

Dies ermöglicht flexibles Route-Matching:

• Exakte Übereinstimmungen: '/' passt nur zur Startseite
• Präfix-Übereinstimmungen: '/admin' passt zu /admin, /admin/users, /admin/settings, etc.

2. Authentifizierungsablauf

Wenn ein Benutzer eine geschützte Route besucht:

1. Kein Auth-Header: Wenn kein Authorization Header vorhanden ist, gibt der Server eine 401 Antwort mit einem WWW-Authenticate Header zurück
2. Browser-Prompt: Der Browser zeigt ein Anmeldedialog an
3. Anmeldedaten Gesendet: Benutzer gibt Anmeldedaten ein, Browser sendet sie base64-kodiert
4. Validierung: Server dekodiert und validiert die Anmeldedaten
5. Zugriff Gewährt/Verweigert: Wenn gültig, wird die Anfrage fortgesetzt; wenn ungültig, wird eine weitere 401 zurückgegeben

Fazit

Grundlegende Authentifizierung in Astro ist eine direkte Möglichkeit, deine Routen während der Entwicklung oder im Staging zu schützen. Obwohl sie nicht für die Benutzerauthentifizierung in der Produktion geeignet ist, ist sie perfekt für:

• Entwicklungsschutz: Funktionen in der Entwicklung verstecken
• Kunden-Demos: Kundenprojekte vor dem Launch schützen
• Staging-Umgebungen: Staging-Sites sichern
• Admin-Bereiche: Schneller Schutz für Admin-Interfaces

Der Middleware-Ansatz, den wir implementiert haben, ist sauber, effizient und einfach für deine spezifischen Bedürfnisse anzupassen. Denke daran, Umgebungsvariablen für Anmeldedaten zu verwenden und robustere Authentifizierungslösungen für Produktionsanwendungen zu erwägen.