feat: Anmelden ueber Authentik – zusaetzlich zu Benutzername und Passwort

Ein zweiter Weg herein, kein Ersatz. Wer weiter Passwort und Zwei-Faktor benutzen will, merkt nichts: Ohne eingerichteten Anbieter sieht die Login-Seite aus wie bisher. DER WEG FUER BESTEHENDE KONTEN ist das Verknuepfen, nicht das Anmelden: einmal wie gewohnt hereinkommen, unter "Mein Konto" auf "Mit Authentik verknuepfen", fertig. Danach geht beides. Was es ausdruecklich NICHT gibt, ist das automatische Zusammenfuehren ueber die E-Mail. Es waere der bequeme Weg und der gefaehrliche: Wer beim Anbieter eine fremde Adresse eintraegt, uebernaehme damit ein fremdes Konto – und die E-Mail ist dort die Angabe, die sich am leichtesten aendern laesst. Deshalb sagt der Nutzer selbst, wer er beim Anbieter ist, im angemeldeten Zustand. Aus demselben Grund legt eine unbekannte Anmeldung standardmaessig KEIN Konto an, sondern wird mit dem Hinweis abgewiesen, sich anzumelden und zu verknuepfen. Sonst bekaeme genau der Mensch, der schon ein Konto hat, bei seiner ersten SSO-Anmeldung ein zweites, leeres – und seine Daten laegen weiter unter dem alten. Wer will, schaltet AUTO_CREATE ein. Geprueft wird mit Authlib, nicht von Hand: Signatur gegen JWKS, Aussteller, Empfaenger, Laufzeit und nonce. Dazu state gegen untergeschobene Rueckkehr und PKCE, obwohl der Client vertraulich ist – es kostet nichts und der Code taugt damit auch fuer einen oeffentlichen. Ein zweiter Anbieter ist reine Konfiguration: APP_OIDC_PROVIDERS=authentik,keycloak Nebenbei zwei Stellen abgesichert, die es vorher nicht geben konnte: Ein Konto ohne Passwort faellt beim Passwort-Login nicht mehr in argon2 (das haette verraten, dass es diesen Benutzernamen gibt), und die letzte Verknuepfung laesst sich nicht loesen, solange es kein Passwort gibt – sonst schliesst sich der Nutzer aus seinem eigenen Konto aus. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-09 17:28:24 +02:00
parent 01ae12ffea
commit 7690718731
18 changed files with 1633 additions and 16 deletions
@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api } from "../api";
+import { useToast } from "../toast";
+import { useConfirm } from "../confirm";
+import Icon from "../components/Icon";
+
+/**
+ * „Mein Konto" → Anmeldung über einen fremden Dienst.
+ *
+ * Das ist der Weg für alle, die schon ein Konto haben: einmal wie gewohnt
+ * anmelden, hier verknüpfen, fertig. Danach geht beides.
+ *
+ * Bewusst KEINE Zusammenführung über die E-Mail im Hintergrund – wer beim
+ * Anbieter eine fremde Adresse einträgt, übernähme damit ein fremdes Konto.
+ * Deshalb sagt hier der Nutzer selbst, wer er dort ist.
+ *
+ * Zeigt sich gar nicht, wenn kein Dienst eingerichtet ist.
+ */
+export default function SsoVerknuepfung() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const confirm = useConfirm();
+  const [dienste, setDienste] = useState([]);
+  const [stand, setStand] = useState(null); // { identities, hat_passwort }
+
+  async function laden() {
+    try {
+      setStand(await api.oidcIdentities());
+    } catch {
+      setStand({ identities: [], hat_passwort: true });
+    }
+  }
+
+  useEffect(() => {
+    api.oidcProviders().then((r) => setDienste(r.providers)).catch(() => setDienste([]));
+    laden();
+    // Nach der Rückkehr vom Anbieter steht das Ergebnis in der Adresse – hier
+    // landet ein Browser nach einer Weiterleitung, keine fetch-Antwort.
+    const frage = new URLSearchParams(window.location.search);
+    const fehler = frage.get("oidc_error");
+    const verknuepft = frage.get("oidc_linked");
+    if (fehler) toast(fehler, "error");
+    else if (verknuepft) toast(t("account.ssoLinked", { name: verknuepft }));
+    if (fehler || verknuepft) {
+      window.history.replaceState({}, "", window.location.pathname);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function loesen(i) {
+    const ok = await confirm({
+      title: t("account.ssoUnlink"),
+      message: t("account.ssoUnlinkConfirm", { name: i.label }),
+      confirmLabel: t("account.ssoUnlink"),
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      await api.oidcUnlink(i.id);
+      toast(t("settings.saved"));
+      laden();
+    } catch (e) {
+      toast(e.message, "error");
+    }
+  }
+
+  if (dienste.length === 0 || stand === null) return null;
+
+  const verknuepft = new Set(stand.identities.map((i) => i.provider));
+
+  return (
+    <div className="card">
+      <h2 style={{ marginTop: 0, display: "flex", alignItems: "center", gap: "var(--sp-2)" }}>
+        <Icon name="key" size={18} /> {t("account.sso")}
+      </h2>
+      <p className="muted small">{t("account.ssoHint")}</p>
+
+      <div className="sso-liste">
+        {stand.identities.map((i) => (
+          <div className="sso-zeile" key={i.id}>
+            <Icon name="check" size={15} className="sso-haken" />
+            <span className="grow ellipsis">
+              {i.label}
+              {i.email && <span className="muted"> · {i.email}</span>}
+            </span>
+            <button className="btn sm ghost" onClick={() => loesen(i)}>
+              {t("account.ssoUnlink")}
+            </button>
+          </div>
+        ))}
+
+        {dienste
+          .filter((d) => !verknuepft.has(d.name))
+          .map((d) => (
+            // Ein echter Link: Der Browser muss zum Anbieter wechseln.
+            <a key={d.name} className="btn sso-verknuepfen"
+               href={api.oidcLinkUrl(d.name, "/konto")}>
+              <Icon name="plus" size={15} /> {t("account.ssoLink", { name: d.label })}
+            </a>
+          ))}
+      </div>
+
+      {/* Wer kein Passwort hat, haengt an dieser einen Verknüpfung. Das gehört
+          gesagt, bevor er sie zu lösen versucht. */}
+      {!stand.hat_passwort && (
+        <p className="muted warn small">{t("account.ssoOnlyWay")}</p>
+      )}
+    </div>
+  );
+}