florian.wildeandClaude Opus 5
2f45e33e20
Drei Rollen: Administrator, Techniker, Kunde. Jede der 28 Aktionen nennt das Recht, das sie verlangt; die Rechte stehen an einer Stelle. Kundenkonten haengen an genau einem Kunden und sehen nur dessen Hosts und Rechnungen - ohne Einkaufspreise und Marge. Die Einschraenkung sitzt in den Abfragen selbst, damit keine Seite vergessen kann, sie weiterzugeben; sechs Tests pruefen das. Dabei gefunden: Neu ueber OIDC angelegte Konten haetten die Vorgabe des Datenmodells geerbt - ADMIN. Jetzt gibt es dafuer eine Einstellung mit der Vorgabe Techniker. Passkeys (#028) als gleichwertiger, passwortloser Anmeldeweg neben Passwort und OIDC. Mehrere je Konto, Aufgabe in einem kurzlebigen Cookie, rpID aus der oeffentlichen Adresse. Ohne HTTPS sagt die Seite es, statt still zu scheitern. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import { startAuthentication } from "@simplewebauthn/browser";
|
||
import { useRouter } from "next/navigation";
|
||
import { useState } from "react";
|
||
|
||
/**
|
||
* Anmeldung per Passkey. Der Knopf erscheint immer; ob ein Passkey vorliegt, weiß erst der Browser –
|
||
* und das darf die Seite auch nicht vorher verraten (sonst ließen sich Konten ausspähen).
|
||
*/
|
||
export function PasskeyAnmeldung({ ziel }: { ziel: string }) {
|
||
const router = useRouter();
|
||
const [laeuft, setLaeuft] = useState(false);
|
||
const [fehler, setFehler] = useState<string | null>(null);
|
||
|
||
async function anmelden() {
|
||
setLaeuft(true);
|
||
setFehler(null);
|
||
|
||
try {
|
||
const optionen = await fetch("/api/auth/passkey/anmelden").then((antwort) => antwort.json());
|
||
const antwort = await startAuthentication({ optionsJSON: optionen });
|
||
|
||
const ergebnis = await fetch("/api/auth/passkey/anmelden", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(antwort),
|
||
}).then((a) => a.json());
|
||
|
||
if (ergebnis.erfolg) {
|
||
router.push(ziel.startsWith("/") ? ziel : "/");
|
||
router.refresh();
|
||
} else {
|
||
setFehler(ergebnis.fehler ?? "Anmeldung nicht möglich.");
|
||
}
|
||
} catch (fehler) {
|
||
setFehler(
|
||
fehler instanceof Error && fehler.name === "NotAllowedError"
|
||
? "Abgebrochen."
|
||
: "Mit diesem Gerät geht es nicht. Passkeys brauchen HTTPS.",
|
||
);
|
||
} finally {
|
||
setLaeuft(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{fehler ? (
|
||
<div className="alert alert-danger py-2" role="alert">
|
||
{fehler}
|
||
</div>
|
||
) : null}
|
||
|
||
<button
|
||
type="button"
|
||
className="btn btn-outline-primary w-100 pl-touch-target mb-3"
|
||
onClick={anmelden}
|
||
disabled={laeuft}
|
||
>
|
||
<i className="bi bi-fingerprint me-1" aria-hidden="true" />
|
||
{laeuft ? "Warte auf den Browser …" : "Mit Passkey anmelden"}
|
||
</button>
|
||
</>
|
||
);
|
||
}
|