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 pour permettre 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 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 à 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 qui fonctionnent 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 votre point de terminaison Logto :

Chemin	Description
`/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 votre point de terminaison est https://example.logto.app, la page de mise à jour de l’e-mail sera disponible à 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

É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 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 flux de gestion des paramètres de 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 mènent aux pages préconstruites correspondantes
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>
  );
}

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 adapter l’expérience :

Paramètre	Description
`redirect`	L’URL absolue vers laquelle renvoyer l’utilisateur après l’action. Seules les URLs `http(s)` sont acceptées.
`show_success`	Si défini à `true`, la destination de succès (par exemple, votre URL `redirect`) reçoit un paramètre de requête `show_success` pour que vous puissiez afficher un message de confirmation.
`identifier`	Pré-remplit le champ identifiant sur la page cible (`/account/email`, `/account/phone`, `/account/username`). Utile pour un lien profond depuis votre application si 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. Par défaut, la langue du navigateur de l’utilisateur est utilisée si omise.

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?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings

remarque:

La valeur identifier est stockée dans le stockage de session 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). Une fois 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.

Lorsqu’un utilisateur lie un compte social depuis le Centre de compte, Logto utilise une URI de redirection différente de celle du flux de connexion classique. L’URL de rappel du Centre de compte a le format suivant :

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

Où {connectorId} est l’identifiant du connecteur social (vous pouvez le trouver dans Console > Connecteurs > Connecteurs sociaux).

attention:

Vous devez ajouter cette URL à la liste des URIs de redirection autorisées (ou équivalent) dans la console développeur de votre fournisseur social (Google, GitHub, Facebook, etc.) en plus de l’URL de rappel standard https://[your-tenant-endpoint]/callback/{connectorId}. Sinon, le flux de liaison échouera avec une erreur de non-correspondance d’URI de redirection.

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é avec son mot de passe actuel ou 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

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 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 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 (MFA)

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​

É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 les redirections de succès​

Paramètres d’URL pris en charge​

Lien de suppression de compte​

URL de rappel pour connexion sociale​

Considérations de sécurité​

Options de personnalisation​

CSS personnalisé​

Ressources associées​