Kontoeinstellungen mit der vorgefertigten Account Center UI

Was ist die vorgefertigte Account Center UI

Logto stellt eine vorgefertigte Account Center UI bereit, die einsatzbereite 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 von sozialen Verbindungen (Verknüpfen und Trennen sozialer Konten)
Verwalten von 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: Fertige Seiten, die sofort einsatzbereit sind
Konsistentes Erlebnis: Entspricht dem Look & Feel der Logto-Anmeldeerfahrung
Eingebaute Sicherheit: Alle Verifizierungsabläufe und Sicherheitsmaßnahmen werden automatisch übernommen
Immer aktuell: Neue Funktionen und Sicherheitsverbesserungen stehen automatisch zur Verfügung

Verfügbare Seiten

Die vorgefertigte Account Center UI stellt die folgenden 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`	Sicherheitszentrale (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 zum Beispiel 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, werden auf der Profilseite angezeigt.

Schritt 2: Von deiner Anwendung auf die vorgefertigten Seiten verlinken

Um die vorgefertigte Account Center UI zu nutzen, musst du Nutzer aus deiner Anwendung auf die 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 zu deiner 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 zu deiner 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: user@example.com</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 die folgenden 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 Identifikator-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 bereits 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, wenn 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?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings

hinweis:

Der Wert von identifier wird vor der Anmelde-Weiterleitung 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 auf deine 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.

Das Verknüpfen eines sozialen Kontos aus dem Account Center verwendet die Callback-URL des Connectors:

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

Dabei ist {connectorId} die ID des sozialen Connectors. Dies ist die Callback-URI, die auf der Connector-Detailseite in Konsole > Connectors > Soziale Connectors angezeigt wird und die du bei deinem sozialen Anbieter registrierst, wenn du den Connector einrichtest.

Sicherheitshinweise

Die vorgefertigte Account Center UI enthält eingebaute 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 bereit, die mit logto_ac- bei wichtigen UI-Elementen (Layout-Container, Seitenüberschriften, Bereiche, Karten usw.) beginnen, um ein einfaches Ansprechen zu ermöglichen. So kannst du Standardstile überschreiben, ohne dich um Klassennamenänderungen zwischen Releases sorgen zu müssen.

Beispiel:

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

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

Wenn du mehr Anpassungen benötigst, als die vorgefertigte UI und benutzerdefiniertes CSS bieten, solltest du die Account API verwenden, 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​