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>

web/src/pages/Account.jsx

@@ -8,6 +8,7 @@ import Icon from "../components/Icon";
 import PasswordInput from "../components/PasswordInput";
 import Kartenspalten from "../components/Kartenspalten";
 import PasswordRules from "../components/PasswordRules";
+import SsoVerknuepfung from "../components/SsoVerknuepfung";
 import Geraetemarken from "./settings/Geraetemarken";
 import { DEFAULT_POLICY, meetsPolicy } from "../passwordPolicy";
 
@@ -101,6 +102,7 @@ export default function Account() {
           </Link>
         </div>
 
+        <SsoVerknuepfung />
         <Geraetemarken />
       </Kartenspalten>
     </div>

web/src/pages/Login.jsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useAuth } from "../auth";
-import { ApiError } from "../api";
+import { ApiError, api } from "../api";
 import BrandMark from "../components/BrandMark";
 import Icon from "../components/Icon";
 import PasswordInput from "../components/PasswordInput";
@@ -19,6 +19,20 @@ export default function Login() {
   const [zweiterSchritt, setZweiterSchritt] = useState(false);
   const [code, setCode] = useState("");
   const [wiederherstellung, setWiederherstellung] = useState(false);
+  // Eingerichtete Anmeldedienste. Leer = es gibt keine, dann steht hier auch
+  // kein Knopf; die Anmeldung sieht aus wie bisher.
+  const [dienste, setDienste] = useState([]);
+
+  useEffect(() => {
+    api.oidcProviders().then((r) => setDienste(r.providers)).catch(() => setDienste([]));
+    // Der Anbieter schickt seinen Grund in der Adresse zurueck – hier landet
+    // ein Browser nach einer Weiterleitung, nicht eine Antwort auf fetch().
+    const grund = new URLSearchParams(window.location.search).get("oidc_error");
+    if (grund) {
+      setFehler(grund);
+      window.history.replaceState({}, "", window.location.pathname);
+    }
+  }, []);
 
   async function onSubmit(e) {
     e.preventDefault();
@@ -146,6 +160,21 @@ export default function Login() {
                 style={{ width: "100%", marginTop: "var(--sp-3)" }}>
           {busy ? t("common.loading") : t("login.submit")}
         </button>
+
+        {dienste.length > 0 && (
+          <>
+            <div className="login-trenner"><span>{t("login.or")}</span></div>
+            {dienste.map((d) => (
+              // Ein echter Link, kein fetch: Der Browser MUSS die Seite
+              // wechseln – die Anmeldung passiert beim Anbieter.
+              <a key={d.name} className="btn login-sso"
+                 href={api.oidcStartUrl(d.name)}>
+                <Icon name="key" size={15} />
+                {t("login.withProvider", { name: d.label })}
+              </a>
+            ))}
+          </>
+        )}
       </form>
     </div>
   );