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 :

Affichage et modification du profil utilisateur (nom, avatar et champs de profil personnalisés)
Mise à jour de l’adresse e-mail et du numéro de téléphone
Mise à jour du nom d’utilisateur
Définition ou mise à jour du mot de passe
Gestion des connexions sociales (lier et délier des comptes sociaux)
Gestion des paramètres MFA (application d’authentification TOTP, passkeys, codes de secours)
Activation ou désactivation de la vérification en 2 étapes
Gestion des sessions actives et des applications autorisées

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 à développer 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 : Nouvelles fonctionnalités et améliorations de sécurité 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 :

Chemin	Description
`/account/profile`	Page de profil utilisateur (nom, avatar et champs de profil personnalisés)
`/account/security`	Hub des paramètres de sécurité (vérification en 2 étapes, comptes sociaux, sessions)
`/account/email`	Mettre à jour ou supprimer l’adresse e-mail principale
`/account/phone`	Mettre à jour ou supprimer le numéro de téléphone principal
`/account/username`	Mettre à jour le nom d’utilisateur
`/account/password`	Définir ou mettre à jour le mot de passe
`/account/passkey/add`	Ajouter une nouvelle passkey (WebAuthn)
`/account/passkey/manage`	Voir et gérer les passkeys existantes
`/account/authenticator-app`	Configurer l’application d’authentification TOTP
`/account/authenticator-app/replace`	Remplacer l’application d’authentification TOTP existante
`/account/backup-codes/generate`	Générer de nouveaux codes de secours
`/account/backup-codes/manage`	Voir 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 ne doivent que les consulter
Définissez les champs sur Off pour les masquer complètement

Configurer les champs de profil

Le Centre de compte affiche une page Profil où les utilisateurs finaux peuvent consulter et gérer les informations de leur profil. Pour contrôler quels champs de profil apparaissent sur cette page :

Assurez-vous que la permission du champ Nom, Avatar, Profil ou Données personnalisées est définie sur Edit ou ReadOnly dans les sections Sécurité du compte / Profil utilisateur.
Dans la carte Intégrer l’interface préconstruite, ajoutez les champs de profil que vous souhaitez exposer à partir du sélecteur de champs de profil. Ces champs proviennent du même catalogue utilisé par Collecter le profil utilisateur — tout champ défini là peut également être affiché dans le Centre de compte.
Glissez-déposez pour réorganiser les champs selon vos préférences.

Seuls les champs à la fois listés dans les champs de profil et dont la permission correspondante n’est pas Off apparaîtront sur la page Profil.

Étape 2 : Lier les pages préconstruites depuis votre application

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 sont redirigés vers https://your-app.com/settings. Les utilisateurs qui quittent la page avec le bouton retour reviennent à la même URL.

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 du compte :

Sur la page des paramètres de compte de votre application, affichez les informations actuelles de l’utilisateur
Proposez des boutons "Modifier" ou "Mettre à jour" qui renvoient vers les pages préconstruites correspondantes
Après que l’utilisateur a terminé ou quitté l’action, 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 : [email protected]</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 le retour vers votre application

Les utilisateurs reviennent à votre URL redirect à la fois après avoir terminé une action et lorsqu’ils la quittent avec le bouton retour, et l’URL est la même dans les deux cas. Ne considérez pas le retour lui-même comme une preuve que la modification a réussi ; récupérez plutôt les dernières données utilisateur, par exemple avec l’Account API.

Pour confirmer à l’utilisateur qu’une action a bien été réalisée, ajoutez show_success=true à l’URL du Centre de compte. Le Centre de compte affiche alors sa propre page de succès après l’action, puis revient à votre URL redirect lorsque l’utilisateur clique sur Terminé :

https://[tenant-id].logto.app/account/password?redirect=https://your-app.com/settings&show_success=true

Paramètres d’URL pris en charge

Vous pouvez ajouter les paramètres de requête suivants à n’importe quelle URL du Centre de compte pour personnaliser l’expérience :

Paramètre	Description
`redirect`	L’URL absolue vers laquelle renvoyer l’utilisateur après l’action, ou lorsqu’il la quitte avec le bouton retour. Seules les URLs `http(s)` sont acceptées.
`show_success`	Si défini sur `true`, le Centre de compte affiche une page de succès après l’action et revient à votre URL `redirect` lorsque l’utilisateur clique sur Terminé. Sinon, l’utilisateur revient immédiatement.
`identifier`	Pré-remplit le champ identifiant sur la page cible (`/account/email`, `/account/phone`, `/account/username`). Utile pour un lien profond depuis votre application lorsque vous connaissez déjà l’identifiant de l’utilisateur.
`ui_locales`	Liste d’étiquettes de langue BCP-47 séparées par des espaces (ex. `fr-CA fr en`) qui contrôle la langue de l’interface du Centre de compte. Si omis, la langue du navigateur de l’utilisateur est utilisée par défaut.

Exemple — lien profond vers la page de mise à jour de l’e-mail avec l’e-mail actuel pré-rempli et l’interface en français :

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

remarque:

La valeur identifier est stockée dans le session storage avant la redirection de connexion et consommée une seule fois par la page cible.

Lien de suppression de compte

Le Centre de compte ne gère pas directement la suppression de compte. À la place, vous pouvez configurer une URL de suppression de compte qui pointe vers votre propre flux de suppression (généralement basé sur le Management API). Lorsqu’elle est configurée, une entrée Supprimer votre compte apparaît sur la page de sécurité du Centre de compte et redirige l’utilisateur vers votre URL.

Pour la configurer, rendez-vous sur Console > Connexion & compte > Centre de compte et renseignez le champ URL de suppression de compte. Vous pouvez également la mettre à jour via le Management API :

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"}'

Laissez le champ vide (ou définissez deleteAccountUrl à null) pour masquer l’entrée de suppression de compte.

La liaison d’un compte social depuis le Centre de compte utilise l’URL de callback du connecteur :

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

Où {connectorId} est l’ID du connecteur social. Il s’agit de l’URI de callback affichée sur la page de détails du connecteur dans Console > Connecteurs > Connecteurs sociaux, que vous enregistrez auprès de votre fournisseur social lors de la configuration du connecteur.

Considérations de sécurité

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

Authentification OIDC step-up : Les modifications sensibles (e-mail, téléphone, nom d’utilisateur, mot de passe, comptes sociaux, MFA, sessions et appareils de confiance) nécessitent une authentification utilisateur récente (urn:logto:acr:1fa ou plus forte) dans la fenêtre Authentification récente configurée pour votre tenant (10 minutes par défaut, configurable de 1 à 120 minutes dans Console > Connexion & compte > Centre de compte). Lorsqu’un utilisateur vient de se connecter ou de s’inscrire avec une méthode qualifiante, aucun prompt supplémentaire n’est affiché ; si la connexion ne comporte pas 1fa (comme une connexion sociale) ou si elle a dépassé la fenêtre, le Centre de compte lance automatiquement l’authentification OIDC step-up et reprend l’action en attente.
Codes de vérification : Les mises à jour d’e-mail et de téléphone nécessitent des codes de vérification 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

CSS personnalisé

Vous pouvez personnaliser davantage l’apparence de l’interface du Centre de compte en ajoutant du CSS personnalisé. Rendez-vous sur Console > Connexion & compte > Centre de compte, et ajoutez votre CSS personnalisé dans l’éditeur CSS personnalisé.

L’interface préconstruite du Centre de compte fournit des noms de classes CSS stables préfixés par logto_ac- sur les éléments clés de l’interface (conteneurs de mise en page, en-têtes de page, sections, cartes, etc.) pour un ciblage facile. Cela vous permet de surcharger les styles par défaut sans craindre de changements de nom de classe entre les versions.

Exemple :

/* Masquer la signature Logto */
.logto_ac-logto-signature {
  display: none;
}

/* Personnaliser la carte de la section sécurité */
.logto_ac-security-card {
  border-radius: 12px;
}

Si vous avez besoin de plus de personnalisation que ce que l’interface préconstruite et le CSS personnalisé offrent, envisagez d’utiliser l’Account API pour construire vos propres pages de gestion de compte.

Paramètres du compte via Account API — Créez une gestion de compte personnalisée avec un contrôle total via l’API
Paramètres du compte via Management API — Gestion de compte au niveau administrateur
Configuration MFA — Configurer l’authentification multi-facteurs
Appareils de confiance MFA — Configurer et gérer la confiance navigateur à durée limitée

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

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

Pages disponibles​

Comment utiliser l’interface préconstruite​

Étape 1 : Activer l’Account API​

Configurer les champs de profil​

Étape 2 : Lier les pages préconstruites depuis votre application​

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

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

Étape 3 : Gérer le retour vers votre application​

Paramètres d’URL pris en charge​

Lien de suppression de compte​

URL de callback de connexion sociale​

Considérations de sécurité​

Options de personnalisation​

CSS personnalisé​

Ressources associées​