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:

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

Die vorgefertigte Account Center UI ist so konzipiert, dass sie nahtlos mit deiner Anwendung zusammenarbeitet und ein konsistentes Nutzererlebnis bietet, 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 ü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/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 zur E-Mail-Aktualisierung 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

Schritt 2: Verlinke die vorgefertigten Seiten aus deiner Anwendung

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 zu den 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

Wenn 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 an, die zu den 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 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 Identifier 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öschungs-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 unter 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 eigenes 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, Seitenköpfe, Abschnitte, Karten usw.) bereit, um ein einfaches Targeting 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;
}

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

Wenn du mehr Anpassung benötigst, als die vorgefertigte UI und eigenes 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​

Schritt 2: Verlinke die vorgefertigten Seiten aus deiner Anwendung​

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​