Aller au contenu principal

Paramètres du compte via l’interface préconstruite du Centre de compte

Qu’est-ce que l’interface préconstruite du Centre de compte​

Logto propose une interface préconstruite du Centre de compte qui offre des pages prêtes à l’emploi permettant aux utilisateurs finaux de gérer les paramètres de leur compte. Cette interface préconstruite est hébergée par Logto et gère les tâches courantes de gestion de compte, notamment :

  • Mise à jour de l’adresse e-mail
  • Mise à jour du numéro de téléphone
  • Mise à jour du nom d’utilisateur
  • Définition ou mise à jour du mot de passe
  • Gestion des paramètres MFA (application d’authentification TOTP, passkeys, codes de secours)

L’interface préconstruite du Centre de compte est conçue pour fonctionner de manière transparente avec votre application, offrant une expérience utilisateur cohérente sans que vous ayez à créer des pages de gestion de compte personnalisées.

Avantages de l’utilisation de l’interface préconstruite​

  • Aucun effort de développement : Pages prêtes à l’emploi fonctionnant immédiatement
  • Expérience cohérente : Correspond à l’apparence de l’expérience de connexion Logto
  • Sécurité intégrée : Tous les flux de vérification et mesures de sécurité sont gérés automatiquement
  • Toujours à jour : Les nouvelles fonctionnalités et améliorations de sécurité sont disponibles automatiquement

Pages disponibles​

L’interface préconstruite du Centre de compte propose les pages suivantes, toutes accessibles sous le chemin /account de l’endpoint de votre tenant Logto :

CheminDescription
/account/emailMettre à jour l’adresse e-mail principale
/account/phoneMettre à jour le numéro de téléphone principal
/account/usernameMettre à jour le nom d’utilisateur
/account/passwordDéfinir ou mettre à jour le mot de passe
/account/passkey/addAjouter une nouvelle passkey (WebAuthn)
/account/passkey/manageVoir et gérer les passkeys existantes
/account/authenticator-appConfigurer l’application d’authentification TOTP
/account/backup-codes/generateGénérer de nouveaux codes de secours
/account/backup-codes/manageVoir et gérer les codes de secours

Par exemple, si l’endpoint de votre tenant est https://example.logto.app, la page de mise à jour de l’e-mail sera disponible à l’adresse https://example.logto.app/account/email.

Comment utiliser l’interface préconstruite​

Étape 1 : Activer l’Account API​

L’interface préconstruite du Centre de compte repose sur l’Account API. Rendez-vous sur Console > Connexion & compte > Centre de compte et activez l’Account API.

Configurez les permissions des champs selon vos besoins :

  • Définissez les champs sur Edit pour permettre aux utilisateurs de les modifier
  • Définissez les champs sur ReadOnly si les utilisateurs doivent seulement les consulter
  • Définissez les champs sur Off pour les masquer complètement

Pour utiliser l’interface préconstruite du Centre de compte, vous devez rediriger les utilisateurs de votre application vers les pages Logto appropriées. Deux approches sont possibles :

Approche A : Lien direct avec paramètre de redirection​

Ajoutez des liens dans votre application qui redirigent les utilisateurs vers les pages préconstruites. Incluez un paramètre de requête redirect pour ramener les utilisateurs vers votre application après l’action :

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

Lorsque les utilisateurs terminent la mise à jour de leur e-mail, ils seront redirigés vers https://your-app.com/settings.

Approche B : Intégration dans votre flux de paramètres de compte​

Vous pouvez intégrer les pages préconstruites dans votre propre workflow de gestion des paramètres de compte :

  1. Sur la page des paramètres de compte de votre application, affichez les informations actuelles de l’utilisateur
  2. Proposez des boutons "Modifier" ou "Mettre à jour" qui mènent aux pages préconstruites correspondantes
  3. Après l’action de l’utilisateur, il est redirigé vers votre application

Exemple d’implémentation :

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

  return (
    <div>
      <h2>Paramètres du compte</h2>

      <div>
        <span>Email : user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>
          Mettre à jour l’e-mail
        </a>
      </div>

      <div>
        <span>Mot de passe : ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>
          Changer le mot de passe
        </a>
      </div>

      <div>
        <span>MFA : Non configuré</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Configurer l’authentificateur
        </a>
      </div>
    </div>
  );
}

Étape 3 : Gérer les redirections de succès​

Après avoir terminé une action, les utilisateurs seront redirigés vers l’URL que vous avez spécifiée avec un paramètre de requête optionnel show_success. Vous pouvez l’utiliser pour afficher un message de succès :

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

  return (
    <div>
      {showSuccess === 'email' && <div>E-mail mis à jour avec succès !</div>}
      {showSuccess === 'password' && <div>Mot de passe mis à jour avec succès !</div>}
      {/* ... reste de votre page de paramètres */}
    </div>
  );
}

Considérations de sécurité​

L’interface préconstruite du Centre de compte intègre des mesures de sécurité :

  • Vérification d’identité : Avant toute modification sensible (e-mail, téléphone, mot de passe, MFA), l’utilisateur doit vérifier son identité à l’aide de son mot de passe actuel ou d’une méthode de vérification existante
  • Codes de vérification : Les mises à jour d’e-mail et de téléphone nécessitent des codes envoyés à la nouvelle adresse/numéro
  • Validation de session : Toutes les opérations valident la session de l’utilisateur pour empêcher tout accès non autorisé

Options de personnalisation​

L’interface préconstruite du Centre de compte hérite de la personnalisation de votre expérience de connexion, notamment :

  • Logo et couleurs
  • Mode sombre / clair
  • Paramètres de langue

Si vous avez besoin de plus de personnalisation que ce que propose l’interface préconstruite, envisagez d’utiliser l’Account API pour créer vos propres pages de gestion de compte.