Erstanmeldung fragt nach, statt still ein zweites Konto anzulegen
Wer sich zum ersten Mal ueber den Anmeldedienst anmeldet und hier noch kein Konto hat, bekam bisher wortlos ein neues - mit Rolle "Benutzer" und ohne Verlauf. Wer schon ein Konto hatte, wollte aber fast immer genau das verknuepfen und stand dann mit zwei Konten da. Jetzt zeigt der Rueckweg eine Entscheidungsseite: bestehendes Konto verknuepfen oder ein neues anlegen. Das Verknuepfen verlangt einmalig Benutzername und Passwort des bestehenden Kontos. Genau dieser Nachweis ist der Grund, warum der Anmeldeweg selbst nie fragen darf, welches Konto gemeint ist - ohne ihn koennte sich jeder mit einem beliebigen Konto beim Anmeldedienst an ein fremdes Vorrania-Konto haengen. Die geprueften Angaben liegen dafuer kurzlebig und einmalig in oidc_pending_links; vom Code steht dort nur der SHA-256-Hash, wie bei den API-Tokens. Ein falsch getipptes Passwort verbraucht den Vorgang nicht, und unbekannter Benutzername und falsches Passwort antworten gleich - sonst liessen sich vorhandene Konten abzaehlen. AUTO_CREATE=false blendet den Knopf zum Anlegen aus und laesst sich auch ueber den Dialog nicht umgehen. Der App-Weg bleibt unveraendert, weil er keinen Zwischenschritt anzeigen kann. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
a134b2aad5
commit
eb29143f97
@@ -0,0 +1,169 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { api } from "../api";
|
||||
import { useAuth } from "../auth";
|
||||
import Icon from "../components/Icon";
|
||||
import BrandMark from "../components/BrandMark";
|
||||
|
||||
/**
|
||||
* Erstanmeldung über einen Anmeldedienst, zu der es noch kein Vorrania-Konto gibt.
|
||||
*
|
||||
* Der Anmeldeweg selbst fragt bewusst nie „welches Konto?" – sonst könnte sich
|
||||
* jeder mit einem beliebigen Konto beim Anmeldedienst an ein fremdes
|
||||
* Vorrania-Konto hängen. Hier ist die Frage sicher, weil das Verknüpfen den
|
||||
* Nachweis über Benutzername und Passwort verlangt.
|
||||
*
|
||||
* Der Einmalcode steht im Adressfragment und belegt, dass die Anmeldung beim
|
||||
* Dienst tatsächlich stattgefunden hat.
|
||||
*/
|
||||
export default function SsoNeu() {
|
||||
const { tokenUebernehmen } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [code, setCode] = useState(null);
|
||||
const [info, setInfo] = useState(null);
|
||||
const [fehler, setFehler] = useState(null);
|
||||
const [modus, setModus] = useState(null); // null | "verknuepfen"
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const gelesen = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (gelesen.current) return;
|
||||
gelesen.current = true;
|
||||
|
||||
const fragment = new URLSearchParams(window.location.hash.replace(/^#/, ""));
|
||||
const wert = fragment.get("code");
|
||||
// Sofort aus der Adresszeile räumen, egal wie es weitergeht.
|
||||
window.history.replaceState(null, "", window.location.pathname);
|
||||
|
||||
if (!wert) {
|
||||
setFehler("Dieser Anmeldevorgang ist nicht mehr gültig.");
|
||||
return;
|
||||
}
|
||||
setCode(wert);
|
||||
api.oidcPending(wert)
|
||||
.then((daten) => {
|
||||
setInfo(daten);
|
||||
setUsername(daten.username_vorschlag || "");
|
||||
// Darf gar kein Konto angelegt werden, ist Verknüpfen der einzige Weg.
|
||||
if (!daten.anlegen_erlaubt) setModus("verknuepfen");
|
||||
})
|
||||
.catch((err) => setFehler(err.message));
|
||||
}, []);
|
||||
|
||||
async function anlegen() {
|
||||
setFehler(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const token = await api.oidcPendingAnlegen(code);
|
||||
await tokenUebernehmen(token.access_token);
|
||||
navigate("/", { replace: true });
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function verknuepfen(e) {
|
||||
e.preventDefault();
|
||||
setFehler(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const token = await api.oidcPendingVerknuepfen(code, username, password);
|
||||
await tokenUebernehmen(token.access_token);
|
||||
navigate("/", { replace: true });
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (fehler && !info) {
|
||||
return (
|
||||
<div className="login-wrap">
|
||||
<div className="card login-card">
|
||||
<div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
|
||||
<button className="btn primary" style={{ width: "100%", justifyContent: "center" }}
|
||||
onClick={() => navigate("/login", { replace: true })}>
|
||||
Zur Anmeldung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!info) {
|
||||
return <div className="center muted" style={{ padding: 60 }}>Einen Moment…</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="login-wrap">
|
||||
<div className="card login-card">
|
||||
<div className="sidebar-brand"><BrandMark /></div>
|
||||
|
||||
<div className="alert info">
|
||||
<Icon name="alert" size={16} />
|
||||
<div>
|
||||
Die Anmeldung über <strong>{info.display_name}</strong> hat geklappt
|
||||
{info.email && <> ({info.email})</>} – zu diesem Zugang gibt es hier
|
||||
aber noch kein Konto.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{fehler && <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>}
|
||||
|
||||
{modus !== "verknuepfen" ? (
|
||||
<>
|
||||
<p className="muted small mt-0">
|
||||
Hast du in Vorrania schon ein Konto, verknüpfe es – dann behältst du
|
||||
Rolle und Verlauf.
|
||||
</p>
|
||||
<button className="btn primary" disabled={busy}
|
||||
style={{ width: "100%", justifyContent: "center" }}
|
||||
onClick={() => { setFehler(null); setModus("verknuepfen"); }}>
|
||||
Bestehendes Konto verknüpfen
|
||||
</button>
|
||||
<div className="login-trenner">oder</div>
|
||||
<button className="btn" disabled={busy}
|
||||
style={{ width: "100%", justifyContent: "center" }}
|
||||
onClick={anlegen}>
|
||||
{busy ? "Wird angelegt…" : `Neues Konto „${info.username_vorschlag}" anlegen`}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<form onSubmit={verknuepfen}>
|
||||
<p className="muted small mt-0">
|
||||
Melde dich einmal mit deinem bisherigen Benutzernamen und Passwort
|
||||
an. Danach genügt {info.display_name}.
|
||||
</p>
|
||||
<label>
|
||||
Benutzername
|
||||
<input value={username} onChange={(e) => setUsername(e.target.value)}
|
||||
autoFocus autoComplete="username" />
|
||||
</label>
|
||||
<label>
|
||||
Passwort
|
||||
<input type="password" value={password} autoComplete="current-password"
|
||||
onChange={(e) => setPassword(e.target.value)} />
|
||||
</label>
|
||||
<button className="btn primary" disabled={busy || !username || !password}
|
||||
style={{ width: "100%", justifyContent: "center" }}>
|
||||
{busy ? "Wird verknüpft…" : "Verknüpfen und anmelden"}
|
||||
</button>
|
||||
{info.anlegen_erlaubt && (
|
||||
<>
|
||||
<div className="login-trenner">oder</div>
|
||||
<button type="button" className="btn" disabled={busy}
|
||||
style={{ width: "100%", justifyContent: "center" }}
|
||||
onClick={() => { setFehler(null); setModus(null); }}>
|
||||
Zurück
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user