Kontoeinstellungen mit der vorgefertigten Account Center UI

Was ist die vorgefertigte Account Center UI

Logto stellt eine vorgefertigte Account Center UI bereit, die gebrauchsfertige Seiten für Endnutzer bietet, um ihre Kontoeinstellungen zu verwalten. Diese vorgefertigte UI wird von Logto gehostet und übernimmt gängige Aufgaben der Kontoverwaltung, darunter:

Anzeigen und Bearbeiten des Benutzerprofils (Name, Avatar und benutzerdefinierte Profilfelder)
Aktualisieren der E-Mail-Adresse und Telefonnummer
Aktualisieren des Benutzernamens
Festlegen oder Aktualisieren des Passworts
Verwalten sozialer Verbindungen (Verknüpfen und Trennen sozialer Konten)
Verwalten der MFA-Einstellungen (TOTP-Authenticator-App, Passkeys, Backup-Codes)
Aktivieren oder Deaktivieren der 2-Schritt-Verifizierung
Verwalten aktiver Sitzungen und autorisierter Apps

Die vorgefertigte Account Center UI ist darauf ausgelegt, nahtlos mit deiner Anwendung zu funktionieren und ein konsistentes Nutzererlebnis zu bieten, ohne dass du eigene Seiten zur Kontoverwaltung erstellen musst.

Vorteile der Nutzung der vorgefertigten UI

Kein Entwicklungsaufwand: Sofort einsatzbereite Seiten, die direkt funktionieren
Konsistentes Erlebnis: Entspricht dem Look & Feel der Logto-Anmeldeerfahrung
Integrierte Sicherheit: Alle Verifizierungsabläufe und Sicherheitsmaßnahmen werden automatisch gehandhabt
Immer aktuell: Neue Funktionen und Sicherheitsverbesserungen stehen automatisch zur Verfügung

Verfügbare Seiten

Die vorgefertigte Account Center UI stellt folgende Seiten bereit, die alle unter dem Pfad /account deines Logto-Tenant-Endpunkts erreichbar sind:

Pfad	Beschreibung
`/account/profile`	Benutzerprofilseite (Name, Avatar und benutzerdefinierte Profilfelder)
`/account/security`	Sicherheits-Hub (2-Schritt-Verifizierung, soziale Konten, Sitzungen)
`/account/email`	Primäre E-Mail-Adresse aktualisieren oder entfernen
`/account/phone`	Primäre Telefonnummer aktualisieren oder entfernen
`/account/username`	Benutzernamen aktualisieren
`/account/password`	Passwort festlegen oder aktualisieren
`/account/passkey/add`	Neuen Passkey hinzufügen (WebAuthn)
`/account/passkey/manage`	Vorhandene Passkeys anzeigen und verwalten
`/account/authenticator-app`	TOTP-Authenticator-App einrichten
`/account/authenticator-app/replace`	Bestehende TOTP-Authenticator-App ersetzen
`/account/backup-codes/generate`	Neue Backup-Codes generieren
`/account/backup-codes/manage`	Backup-Codes anzeigen und verwalten

Wenn dein Tenant-Endpunkt z. B. https://example.logto.app ist, wäre die Seite zum Aktualisieren der E-Mail unter https://example.logto.app/account/email erreichbar.

So verwendest du die vorgefertigte UI

Schritt 1: Account API aktivieren

Die vorgefertigte Account Center UI basiert auf der Account API. Navigiere zu Konsole > Anmeldung & Konto > Account Center und aktiviere die Account API.

Konfiguriere die Feldberechtigungen nach deinen Anforderungen:

Setze Felder auf Edit, damit Nutzer sie bearbeiten können
Setze Felder auf ReadOnly, wenn Nutzer sie nur ansehen dürfen
Setze Felder auf Off, um sie vollständig auszublenden

Profilfelder konfigurieren

Das Account Center zeigt eine Profil-Seite, auf der Endnutzer ihre Profilinformationen einsehen und verwalten können. Um zu steuern, welche Profilfelder auf dieser Seite erscheinen:

Stelle sicher, dass die Berechtigung für das Feld Name, Avatar, Profil oder Benutzerdefinierte Daten in den Bereichen Account-Sicherheit / Benutzerprofil auf Edit oder ReadOnly gesetzt ist.
Füge im Bereich Vorgefertigte UI integrieren die Profilfelder hinzu, die du aus dem Profilfeld-Selektor anzeigen möchtest. Diese Felder stammen aus demselben Katalog wie bei Benutzerprofil erfassen — jedes dort definierte Feld kann auch im Account Center angezeigt werden.
Ziehe die Felder per Drag & Drop in die gewünschte Reihenfolge.

Nur Felder, die sowohl in den Profilfeldern gelistet sind und deren entsprechende Feldberechtigung nicht auf Off steht, erscheinen auf der Profilseite.

Schritt 2: Von deiner Anwendung auf die vorgefertigten Seiten verlinken

Um die vorgefertigte Account Center UI zu nutzen, musst du Nutzer aus deiner Anwendung zu den entsprechenden Logto-Seiten weiterleiten. Es gibt zwei Ansätze:

Ansatz A: Direktverlinkung mit Redirect-Parameter

Füge in deiner Anwendung Links ein, die Nutzer auf die vorgefertigten Seiten weiterleiten. Füge einen redirect-Query-Parameter hinzu, um Nutzer nach Abschluss der Aktion zurück in deine App zu bringen:

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

Nachdem Nutzer ihre E-Mail aktualisiert haben, werden sie zurück zu https://your-app.com/settings weitergeleitet.

Ansatz B: Einbettung in deinen Kontoeinstellungs-Flow

Du kannst die vorgefertigten Seiten in deinen bestehenden Kontoeinstellungs-Workflow integrieren:

Zeige auf der Kontoeinstellungsseite deiner App die aktuellen Informationen des Nutzers an
Biete "Bearbeiten"- oder "Aktualisieren"-Buttons, die auf die entsprechenden vorgefertigten Seiten verlinken
Nach Abschluss der Aktion wird der Nutzer zurück in deine App geleitet

Beispielimplementierung:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>Kontoeinstellungen</h2>

      <div>
        <span>E-Mail: [email protected]</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>E-Mail aktualisieren</a>
      </div>

      <div>
        <span>Passwort: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>Passwort ändern</a>
      </div>

      <div>
        <span>MFA: Nicht konfiguriert</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Authenticator einrichten
        </a>
      </div>
    </div>
  );
}

Schritt 3: Erfolgs-Redirects behandeln

Nachdem Nutzer eine Aktion abgeschlossen haben, werden sie zu deiner angegebenen URL mit einem optionalen show_success-Query-Parameter weitergeleitet. Du kannst diesen verwenden, um eine Erfolgsmeldung anzuzeigen:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>E-Mail erfolgreich aktualisiert!</div>}
      {showSuccess === 'password' && <div>Passwort erfolgreich aktualisiert!</div>}
      {/* ... Rest deiner Einstellungsseite */}
    </div>
  );
}

Unterstützte URL-Parameter

Du kannst folgende Query-Parameter an jede Account Center URL anhängen, um das Erlebnis anzupassen:

Parameter	Beschreibung
`redirect`	Die absolute URL, zu der der Nutzer nach Abschluss der Aktion zurückgeleitet wird. Es werden nur `http(s)`-URLs akzeptiert.
`show_success`	Wenn auf `true` gesetzt, erhält das Erfolgsziel (z. B. deine `redirect`-URL) einen `show_success`-Query-Parameter, sodass du eine Bestätigungsmeldung anzeigen kannst.
`identifier`	Füllt das Identifier-Eingabefeld auf der Zielseite (`/account/email`, `/account/phone`, `/account/username`) vorab aus. Nützlich für Deep-Links aus deiner App, wenn du den Nutzer-Identifier kennst.
`ui_locales`	Durch Leerzeichen getrennte Liste von BCP-47-Sprachtags (z. B. `fr-CA fr en`), die die Sprache der Account Center UI steuert. Fällt auf die Browsersprache des Nutzers zurück, falls nicht angegeben.

Beispiel — Deep-Link zur E-Mail-Aktualisierungsseite mit vorausgefüllter aktueller E-Mail und französischer UI:

https://[tenant-id].logto.app/account/[email protected]&ui_locales=fr&redirect=https://your-app.com/settings

hinweis:

Der Wert von identifier wird vor dem Redirect zur Anmeldung im Session Storage gespeichert und von der Zielseite einmalig verwendet.

Link zur Kontolöschung

Das Account Center übernimmt die Kontolöschung nicht direkt. Stattdessen kannst du eine Kontolöschungs-URL konfigurieren, die auf deinen eigenen Lösch-Flow verweist (typischerweise gestützt durch die Management API). Wenn konfiguriert, erscheint ein Eintrag Konto löschen auf der Sicherheitsseite des Account Centers und verlinkt den Nutzer zu deiner URL.

Um dies zu konfigurieren, navigiere zu Konsole > Anmeldung & Konto > Account Center und setze das Feld Kontolöschungs-URL. Du kannst es auch über die Management API aktualisieren:

curl -X PATCH https://[tenant-id].logto.app/api/account-center \
  -H 'authorization: Bearer <access_token>' \
  -H 'content-type: application/json' \
  --data-raw '{"deleteAccountUrl":"https://your-app.com/delete-account"}'

Lasse das Feld leer (oder setze deleteAccountUrl auf null), um den Eintrag zur Kontolöschung auszublenden.

Wenn ein Nutzer ein soziales Konto aus dem Account Center heraus verknüpft, verwendet Logto eine andere Redirect-URI als im regulären Anmelde-Flow. Die Account Center Callback-URL hat folgendes Format:

https://[your-tenant-endpoint]/account/callback/social/{connectorId}

Dabei ist {connectorId} die ID des Social Connectors (du findest sie in Konsole > Connectors > Social Connectors).

vorsicht:

Du musst diese URL zur Liste der Autorisierte Redirect-URIs (oder Äquivalent) in der Entwicklerkonsole deines Social Providers (Google, GitHub, Facebook, etc.) zusätzlich zur Standard-Anmelde-Callback-URL https://[your-tenant-endpoint]/callback/{connectorId} hinzufügen. Andernfalls schlägt der Verknüpfungs-Flow mit einem Redirect-URI-Mismatch-Fehler fehl.

Sicherheitshinweise

Die vorgefertigte Account Center UI enthält integrierte Sicherheitsmaßnahmen:

Identitätsüberprüfung: Vor sensiblen Änderungen (E-Mail, Telefon, Passwort, MFA) müssen Nutzer ihre Identität mit ihrem aktuellen Passwort oder einer bestehenden Verifizierungsmethode bestätigen
Verifizierungscodes: E-Mail- und Telefonaktualisierungen erfordern Verifizierungscodes, die an die neue Adresse/Nummer gesendet werden
Sitzungsvalidierung: Alle Operationen validieren die Sitzung des Nutzers, um unbefugten Zugriff zu verhindern

Anpassungsoptionen

Die vorgefertigte Account Center UI übernimmt das Branding aus deinen Einstellungen für die Anmeldeerfahrung, einschließlich:

Logo und Farben
Dunkel-/Hellmodus
Spracheinstellungen

Benutzerdefiniertes CSS

Du kannst das Erscheinungsbild der Account Center UI weiter anpassen, indem du benutzerdefiniertes CSS hinzufügst. Navigiere zu Konsole > Anmeldung & Konto > Account Center und füge dein eigenes CSS im Custom CSS-Editor hinzu.

Die vorgefertigte Account Center UI stellt stabile CSS-Klassennamen mit dem Präfix logto_ac- für wichtige UI-Elemente (Layout-Container, Seitenüberschriften, Abschnitte, Karten usw.) bereit, um eine gezielte Anpassung zu ermöglichen. So kannst du Standardstile überschreiben, ohne dich um Klassennamenänderungen zwischen Releases sorgen zu müssen.

Beispiel:

/* Die Logto-Signatur ausblenden */
.logto_ac-logto-signature {
  display: none;
}

/* Die Karte im Sicherheitsbereich anpassen */
.logto_ac-security-card {
  border-radius: 12px;
}

Wenn du mehr Anpassungen benötigst, als die vorgefertigte UI und benutzerdefiniertes CSS bieten, erwäge die Nutzung der Account API, um eigene Seiten zur Kontoverwaltung zu erstellen.

Kontoeinstellungen per Account API – Eigene Kontoverwaltung mit voller API-Kontrolle erstellen
Kontoeinstellungen per Management API – Kontoverwaltung auf Admin-Ebene
MFA-Konfiguration – Multi-Faktor-Authentifizierung einrichten

Was ist die vorgefertigte Account Center UI​

Vorteile der Nutzung der vorgefertigten UI​

Verfügbare Seiten​

So verwendest du die vorgefertigte UI​

Schritt 1: Account API aktivieren​

Profilfelder konfigurieren​

Schritt 2: Von deiner Anwendung auf die vorgefertigten Seiten verlinken​

Ansatz A: Direktverlinkung mit Redirect-Parameter​

Ansatz B: Einbettung in deinen Kontoeinstellungs-Flow​

Schritt 3: Erfolgs-Redirects behandeln​

Unterstützte URL-Parameter​

Link zur Kontolöschung​

Callback-URL für soziale Verbindungen​

Sicherheitshinweise​

Anpassungsoptionen​

Benutzerdefiniertes CSS​

Verwandte Ressourcen​