Zum Hauptinhalt springen

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
  • Aktualisierung der Telefonnummer
  • Aktualisierung des Benutzernamens
  • Festlegen oder Aktualisieren des Passworts
  • Verwaltung der MFA-Einstellungen (TOTP-Authenticator-App, Passkeys, Backup-Codes)

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: Gebrauchsbereite Seiten, die sofort 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:

PfadBeschreibung
/account/emailPrimäre E-Mail-Adresse aktualisieren
/account/phonePrimäre Telefonnummer aktualisieren
/account/usernameBenutzernamen aktualisieren
/account/passwordPasswort festlegen oder aktualisieren
/account/passkey/addNeuen Passkey hinzufügen (WebAuthn)
/account/passkey/manageVorhandene Passkeys verwalten
/account/authenticator-appTOTP-Authenticator-App einrichten
/account/backup-codes/generateNeue Backup-Codes generieren
/account/backup-codes/manageBackup-Codes anzeigen und verwalten

Wenn dein Tenant-Endpunkt beispielsweise https://example.logto.app ist, ist die Seite zur Aktualisierung der E-Mail unter https://example.logto.app/account/email erreichbar.

Verwendung der vorgefertigten 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

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

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

Ansatz B: Einbettung in deinen Kontoeinstellungs-Flow​

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

  1. Zeige auf der Kontoeinstellungsseite deiner App die aktuellen Informationen des Nutzers an
  2. Biete "Bearbeiten"- oder "Aktualisieren"-Buttons, die zu den entsprechenden vorgefertigten Seiten verlinken
  3. 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>
  );
}

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

Wenn du mehr Anpassungen benötigst, als die vorgefertigte UI bietet, solltest du die Account API verwenden, um eigene Seiten zur Kontoverwaltung zu erstellen.