Administration déléguée : Requête de paramètres du hook

Découvrez comment utiliser le hook de requête des paramètres avec l’extension d’administration déléguée.

Lehook de requête des paramètres vous permet de personnaliser l’apparence de l’extension Administration déléguée.

​

Contrat Hook

• ctx : Objet de contexte.

  • request.user: Utilisateur actuellement connecté.
  • locale: Locale (tel que déduit de l’URL)— https://{yourTenant}.us.webtask.io/auth0-delegated-admin/en/user définira locale à en.

• rappel (erreur, paramètres) : Rappel auquel vous pouvez renvoyer une erreur et un objet de paramètres.

​

Exemples de cas d’utilisation

function(ctx, callback) {
  var department = ctx.request.user.app_metadata && ctx.request.user.app_metadata.department;

  return callback(null, {
    // Only these connections should be visible in the connections picker. If only one connection is available, the connections picker will not be shown in the UI.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // The dictionary allows you to overwrite the title of the dashboard and the "Memberships" label in the Create User dialog.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments',
      menuName: ctx.request.user.name
    },
    // The CSS option allows you to inject a custom CSS file depending on the context of the current user (eg: a different CSS for every customer)
    css: (department && department !== 'IT') && 'https://rawgit.com/auth0-extensions/auth0-delegated-administration-extension/master/docs/theme/fabrikam.css',
    // This option allows you to restrict creating new users
    canCreateUser: (department === 'IT')
  });
}

​

Propriétés

• connections : Liste des connexions que cet administrateur est autorisé à créer et à y modifier des utilisateurs.

• dict : Dictionnaire qui permet d’écraser le titre du tableau de bord et l’étiquette Adhésions dans la boîte de dialogue Créer un utilisateur.

  • dict.title : Titre à afficher en haut de l’interface utilisateur.
  • dict.memberships : Étiquette à définir pour les champs d’adhésion.
  • dict.menuName : Nom à définir pour le menu déroulant en haut à droite.
  • dict.logoutUrl : URL de remplacement pour l’option de menu de déconnexion.

• userFields : Tableau de champs utilisateur (voir « Champs personnalisés » ci-dessous).

• css : Chaîne URL pour importer CSS.

• altcss : Chaîne URL pour importer un deuxième ensemble de CSS. Vous pouvez l’utiliser pour préciser des éléments tels que l’accessibilité CSS pour les polices plus grandes. L’utilisateur se verra présenter un élément de menu lui permettant d’activer/désactiver cet ensemble de CSS.

• languageDictionary : Chaîne URL ou objet Dictionnaire (voir « Localisation » ci-dessous).

• suppressRawData : Réglé sur true pour ignorer les pages qui affichent JSON brut

• errorTranslator : Fonction qui traduit les messages d’erreur en fonction de la langue. Exemple : (function (error, languageDictionary) { return languageDictionary.customErrors[error] || error; }).toString()

• canCreateUser : Drapeau booléen. Si défini sur false, supprime le bouton Create User et interdit la création de nouveaux utilisateurs, true par défaut.

​

Champs personnalisés.

À partir de la version 3.0 de l’extension Administration déléguée, vous pouvez créer des champs personnalisés et leur attribuer des valeurs. Les champs personnalisés peuvent être stockés dans les champs user metadata et dans app metadata, qui sont accessibles lors des processus de création ou de mise à jour des utilisateurs.

Vous pouvez également personnaliser les champs existants définis par Auth0, tels que l’adresse courriel, le nom d’utilisateur, le nom et la connexion.

Pour utiliser Champs personnalisés, vous devez :

• Ajoutez votre liste de userFields aux requêtes des paramètres du hook.
• Mettre en place un hook d’écriture. Les champs personnalisés nécessitent l’utilisation du hook d’écriture pour mettre correctement à jour user_metadata et app_metadata. Vous devez mettre à jour l’objet utilisateur passé à la fonction de rappel avec user_metadata et app_metadata à partir du contexte (ctx objet) fourni au hook.

Pour en savoir plus sur les hooks d’écriture, veuillez consulter Administration déléguée : Appel d’écriture.

Exemple de schéma pour userFields :

userFields: [
    {
        "property": string, // required
        "label": string,
        "sortProperty": string,
        "display": true || function.toString(),
        "search": false || {
            "display": true || function.toString()
            "listOrder": 1,
            "listSize": string(###%), // e.g. 15%
            "filter": boolean,
            "sort": boolean
        },
        "edit": false || {
            "display": true || function.toString()
            "type": "text || select || password || hidden",
            "component": "InputText || Input Combo || InputMultiCombo || InputSelectCombo",
            "options": Array(string) || Array (\{ "value": string, "label": string }),
            "disabled": true || false,
            "validationFunction": function.toString()
        },
        "create": false || {
            "display": true || function.toString()
            "type": "text || select || password || hidden",
            "component": "InputText || Input Combo || InputMultiCombo || InputSelectCombo",
            "options": Array(string) || Array (\{ "value": string, "label": string }),
            "disabled": true || false,
            "validationFunction": function.toString()
        }
    },
    ...
]

• property (obligatoire) : Nom de la propriété de l’objet ctx.payload pour le hook d’écriture. Dans le hook d’écriture, "property": "app_metadata.dbId" définit ctx.payload.app_metadata.dbId.

• label : Étiquette qui sera utilisée lors de l’ajout d’une étiquette au champ sur la page d’informations utilisateur, la page de création, la page de modification de profil ou la page de recherche.

• sortProperty : Si le tri s’effectue sur la base d’un champ différent de celui-ci pour la table de recherche, utilisez ce champ. La notation par points est autorisée.

• affichage : true || false || stringified => Il s’agit de la valeur d’affichage par défaut. Si elle n’est pas remplacée dans la recherche, la modification ou la création, cette valeur sera utilisée.

  • si true, seul user.<property>sera retourné.
  • Par défaut : si false cette valeur ne sera affichée sur aucune page (sauf si elle est remplacée lors de la recherche, de la modification ou de la création).
  • si la fonction chaînée : exécute la fonction pour obtenir la valeur à afficher. Exemple : (function display(user, value, languageDictionary) { return moment(value).fromNow(); }).toString()

• search : false || object => Décrit comment ce champ se comportera sur la page de recherche.

  • Par défaut : si false, ne sera pas affiché dans le tableau de recherche.
  • search.display : Remplace la valeur d’affichage par défaut.
  • search.listOrder : Indique l’ordre des colonnes pour le tableau d’affichage de recherche.
  • search.listSize : Indique la largeur par défaut de la colonne.
  • search.filter : Indique si ce champ doit être recherché dans la liste déroulante de recherche. Par défaut : false.
  • search.sort : Indique si cette colonne est triable. Utilisez sortProperty si vous souhaitez trier par un champ autre que la propriété. Par défaut : false.

• edit : false || objcet => Décrit si le champ est affiché dans les boîtes de dialogue d’édition. S’il ne s’agit pas d’un champ par défaut et s’il est défini sur un objet, il s’affichera dans la page Change Profile de la liste déroulante Actions utilisateur de la page utilisateur.

  • Par défaut : si false, ne sera pas affiché pas dans la page modification ou de mise à jour.

  • edit.display : Remplace la valeur d’affichage par défaut.

  • edit.required : Définissez sur vrai pour échouer s’il n’a pas de valeur. Par défaut : false.

  • edit.type****obligatoire : texte || sélectionner || mot de passe

  • edit.component : InputText || Input Combo || InputMultiCombo || InputSelectCombo

    • InputText (par défaut) : Zone de texte simple.
    • InputCombo : Liste déroulante consultable, valeur unique uniquement.
    • InputMultiCombo : Liste déroulante consultable avec plusieurs valeurs autorisées.
    • InputSelectCombo : Permet de sélectionner la liste déroulante des options.

  • edit.options : Si le composant est l’un des suivants : InputCombo, InputMultiCombo, InputSelectCombo, les valeurs des options doivent être indiquées.

    • Array(string) : Tableau de valeurs (les champs d’étiquette et de valeur seront définis sur la même valeur).
    • Array({ “value”: string, “label”: string }) : Vous permet de définir des valeurs distinctes pour la valeur et l’étiquette. La valeur du hook d’écriture sera donc la même, mais elle peut être réduite à la seule valeur du hook d’écriture.
    • La validation côté serveur garantira que toute valeur indiquée pour ce champ est affiché dans le tableau d’options.

  • edit.disabled : true si le composant doit être en lecture seule; la valeur par défaut est false.

  • edit.validateFunction : Fonction chaînée pour la validation. Veuillez noter que cette fonction de validation s’exécutera à la fois côté serveur et côté client. Exemple : (function validate(value, values, context, languageDictionary) { if (value...) return ’something went wrong’; return false; }).toString().

• créer : faux || objet => Décrit si le champ est affiché dans la boîte de dialogue de création.

  • Par défaut : si false ne sera pas affiché pas dans la page de création.

  • create.placeholder : Fournir un texte placeholder à afficher lorsque la saisie est vide.

  • create.required : Définir sur true pour échouer s’il n’a pas de valeur. Par défaut : false.

  • create.type****obligatoire : texte || sélectionner || mot de passe

  • create.component : InputText || Input Combo || InputMultiCombo || InputSelectCombo

    • InputText (par défaut) : Zone de texte. Par défaut pour le type de texte et le mot de passe.
    • InputCombo : Liste déroulante consultable, valeur unique uniquement.
    • InputMultiCombo : Liste déroulante consultable avec plusieurs valeurs autorisées.
    • InputSelectCombo : Permet de sélectionner la liste déroulante des options.

  • create.options : Si le composant est l’un des suivants : InputCombo, InputMultiCombo, InputSelectCombo, les valeurs des options doivent être précisées.

    • Array(string) : Tableau simple de valeurs, les champs d’étiquette et valeur seront définis sur la même valeur.
    • Array({ “value”: string, “label”: string }) : Vous permet de définir des valeurs distinctes pour la valeur et l’étiquette. La valeur du hook d’écriture sera donc la même, mais elle peut être réduite à la seule valeur du hook d’écriture.
    • La validation côté serveur garantira que toute valeur indiquée pour ce champ sera affichée dans le tableau d’options.

  • create.disabled : true si le composant doit être en lecture seule; la valeur par défaut est false.

  • create.validateFunction : Fonction chaînée pour vérifier la validation.

    • Exemple : (function validate(value, values, context, languageDictionary) { if (value...) return 'something went wrong'; return false; }).toString()
    • Cette fonction de validation s’exécutera à la fois côté serveur et côté client.

​

Champs prédéfinis

Il existe un ensemble de champs prédéfinis et consultables pour le comportement par défaut.

Vous pouvez remplacer le comportement par défaut en ajoutant le champ en tant que userField, puis en remplaçant le comportement que vous souhaitez modifier. Cela est fréquemment utilisé pour masquer un champ en définissant son affichage sur false.

​

Champs de recherche

• name : Champ composé d’autres champs : fonction d’affichage par défaut : (function(user, value) { return (value || user.nickname || user.email || user.user_id); }).toString()
• email : Adresse courriel ou S/O
• last_login_relative : Heure de la dernière connexion
• logins_count : Nombre de connexions
• connection : Connexion de base de données

​

Champs d’informations utilisateur

• user_id : ID de l’utilisateur
• name : Nom de l’utilisateur
• username : Nom d’utilisateur de l’utilisateur.
• email : Adresse courriel de l’utilisateur
• identity.connection : Valeur de connexion
• isBlocked : Si l’utilisateur est bloqué ou non
• blocked_for : Que l’utilisateur dispose ou non de blocs de protection contre les attaques
• last_ip : Dernière adresse IP utilisée par l’utilisateur pour se connecter
• logins_count : Le nombre de fois que l’utilisateur s’est connecté.
• currentMemberships : Liste des adhésions pour cet utilisateur
• created_at : Date/heure à laquelle l’utilisateur a été créé
• updated_at : Date/heure à laquelle l’utilisateur a été mis à jour
• last_login : Date/heure de la dernière connexion de l’utilisateur

​

Créer et modifier des champs utilisateur

• connection : Base de données de l’utilisateur
• password : Nouveau mot de passe
• repeatPassword : Répétition du mot de passe de l’utilisateur
• email : Adresse courriel de l’utilisateur
• username : Nom d’utilisateur de l’utilisateur.

​

Exemples de cas d’utilisation

function(ctx, callback) {
  var department = ctx.request.user.app_metadata && ctx.request.user.app_metadata.department;

  return callback(null, {
    // Only these connections should be visible in the connections picker.
    // If only one connection is available, the connections picker will not be shown in the UI.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // The dictionary allows you to overwrite the title of the dashboard and the "Memberships" label in the Create User dialog.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // User Fields are the custom fields that can be displayed in create and edit, and can also be used for searching, and can be used to customize the view user page
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // The CSS option allows you to inject a custom CSS file depending on the context of the current user (eg: a different CSS for every customer)
    css: (department && department !== 'IT') && 'https://rawgit.com/auth0-extensions/auth0-delegated-administration-extension/master/docs/theme/fabrikam.css',
    languageDictionary: 'https://your-cdn.com/locale/es.json'
  });
}

​

Localisation

Depuis la mise à jour 3.0 de l’extension Administration déléguée, il est possible de fournir un dictionnaire de langue pour assurer une bonne traduction. Le dictionnaire de langue est utilisé uniquement pour le contenu de la page statique; pour le contenu au niveau du champ, vous devez utiliser les étiquettes userFields.

La localisation est destinée à ceux qui ont des fonctions non administratives en matière de gestion des utilisateurs. Auth0 ne prend actuellement pas en charge la localisation des pages de configuration.

Pour préciser les paramètres régionaux, vous pouvez utiliser le chemin. Par exemple : https://{yourTenant}.us.webtask.io/auth0-delegated-admin/en/users définira context.locale sur en dans la requête de paramètres.

Le paramètre languageDictionary est défini dans le cadre de la requête de paramètres, ce qui vous permet de :

• définir explicitement un paramètre languageDictionary;
• fournir une URL pour récupérer le contenu pour le paramètre languageDictionary

Pour plus d’informations, vous pouvez consulter le Dictionnaire de langue de l’extension Administration déléguée.

​

Exemple : Fournir un lien vers le fichier du dictionnaire de langue

function(ctx, callback) {
  var department = ctx.request.user.app_metadata && ctx.request.user.app_metadata.department;

  return callback(null, {
    // Only these connections should be visible in the connections picker.
    // If only one connection is available, the connections picker will not be shown in the UI.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // The dictionary allows you to overwrite the title of the dashboard and the "Memberships" label in the Create User dialog.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // User Fields are the custom fields that can be displayed in create and edit, and can also be used for searching, and can be used to customize the view user page
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // The CSS option allows you to inject a custom CSS file depending on the context of the current user (eg: a different CSS for every customer)
    css: (department && department !== 'IT') && 'https://rawgit.com/auth0-extensions/auth0-delegated-administration-extension/master/docs/theme/fabrikam.css',
    languageDictionary: 'https://your-cdn.com/locale/es.json'
  });
}

​

Exemple : Fournir un objet de dictionnaire de langue

function(ctx, callback) {
  var department = ctx.request.user.app_metadata && ctx.request.user.app_metadata.department;

  return callback(null, {
    // Only these connections should be visible in the connections picker.
    // If only one connection is available, the connections picker will not be shown in the UI.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // The dictionary allows you to overwrite the title of the dashboard and the "Memberships" label in the Create User dialog.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // User Fields are the custom fields that can be displayed in create and edit, and can also be used for searching, and can be used to customize the view user page
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // The CSS option allows you to inject a custom CSS file depending on the context of the current user (eg: a different CSS for every customer)
    css: (department && department !== 'IT') && 'https://rawgit.com/auth0-extensions/auth0-delegated-administration-extension/master/docs/theme/fabrikam.css',
    languageDictionary: {
        loginsCountLabel: 'Cantidad de Logins:',
        searchBarPlaceholder: 'Busqueda de usuarios usando la sintaxis de Lucene',
        deviceNameColumnHeader: 'Dispositivo',
        ...
    }
  });
}

​

En savoir plus

• Administration déléguée : Hook d’accès
• Administration déléguée : Hook de filtrage
• Administration déléguée : Write Hook
• Administration déléguée : Hook de requête des adhésions