Delegated Administration: Settings Query Hook

Le Settings Query Hook vous permet de personnaliser l’apparence et le comportement de l’extension Delegated Administration.

Contrat Hook

ctx : Objet de contexte.
- request.user : Utilisateur actuellement connecté.
- locale : Paramètre régional (tel qu’il est déduit de l’URL) — https://{yourTenant}.us.webtask.io/auth0-delegated-admin/en/users définira locale à en.
callback(error, settings) : Callback à laquelle vous pouvez renvoyer une erreur et un objet de paramètres.

Exemple d’utilisation

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

  return callback(null, {
    // Seules ces connexions doivent être visibles dans le sélecteur de connexions. Si une seule connexion est disponible, le sélecteur de connexions ne sera pas affiché dans l'interface.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // Le dictionnaire vous permet de remplacer le titre du tableau de bord et l'étiquette « appartenance » dans la boîte de dialogue Créer un utilisateur.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments',
      menuName: ctx.request.user.name
    },
    // L'option CSS vous permet d'injecter un fichier CSS personnalisé selon le contexte de l'utilisateur actuel (p. ex. : un CSS différent pour chaque client)
    css: (department && department !== 'IT') && 'https://cdn.jsdelivr.net/gh/auth0-extensions/auth0-delegated-administration-extension/docs/theme/fabrikam.css',
    // Cette option vous permet de restreindre la création de nouveaux utilisateurs
    canCreateUser: (department === 'IT')
  });
}

Propriétés

connections : Liste des connexions auxquelles cet administrateur est autorisé à créer des utilisateurs et à les modifier.
dict : Dictionnaire qui vous permet de remplacer le titre du tableau de bord et l’étiquette Appartenance dans la boîte de dialogue créer un utilisateur.
- dict.title : Titre à afficher en haut de l’interface.
- dict.memberships : Étiquette à définir pour les champs d’appartenance.
- 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 : URL String permettant d’importer du CSS.
altcss : URL String permettant d’importer un deuxième ensemble de CSS. Vous pouvez l’utiliser pour préciser, par exemple, du CSS d’accessibilité pour des polices plus grandes. Un élément de menu sera présenté à l’utilisateur pour lui permettre d’activer ou de désactiver cet ensemble de CSS.
languageDictionary : URL String ou objet Dictionary (voir « Localisation » ci-dessous).
suppressRawData : Définissez cette valeur sur true pour ignorer les pages qui affichent du JSON brut
errorTranslator : Fonction qui traduit les messages d’erreur en fonction de la localisation. Exemple : (function (error, languageDictionary) { return languageDictionary.customErrors[error] || error; }).toString()
canCreateUser : Indicateur Boolean. Si cette valeur est définie à false, le bouton Create User est supprimé et la création de nouveaux utilisateurs est interdite; true par défaut.

Champs personnalisés

À partir de la version 3.0 de l’extension Delegated Admin, vous pouvez définir des champs personnalisés et spécifier leurs valeurs. Les champs personnalisés peuvent être stockés dans les champs métadonnées utilisateur et métadonnées d’application, accessibles lors de la création ou de la mise à jour de l’utilisateur. Vous pouvez également personnaliser des champs existants définis par Auth0, comme le courriel, le nom d’utilisateur, le nom et la connexion. Pour utiliser des champs personnalisés, vous devez :

Ajouter votre liste de userFields au Settings Query Hook
Implémenter un Write Hook. Les champs personnalisés exigent l’utilisation du Write Hook pour mettre à jour correctement user_metadata et app_metadata. Vous devez mettre à jour l’objet utilisateur transmis à la fonction callback avec les user_metadata et app_metadata provenant du contexte (objet ctx) fourni au Hook.

Pour en savoir plus sur les Write Hooks, consultez Delegated Administration : Write Hook. Exemple de schéma pour userFields:

userFields: [
    {
        "property": string, // obligatoire
        "label": string,
        "sortProperty": string,
        "display": true || function.toString(),
        "search": false || {
            "display": true || function.toString()
            "listOrder": 1,
            "listSize": string(###%), // p. ex. 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 Write Hook. Dans le Write Hook, "property": "app_metadata.dbId" définit ctx.payload.app_metadata.dbId.
label : Libellé utilisé lorsque vous ajoutez un libellé au champ dans la page d’information de l’utilisateur, la page de création, la page de modification du profil ou la page de recherche.
sortProperty : Si le tri du tableau de recherche s’effectue sur un champ autre que celui-ci, utilisez ce champ. La notation par points est autorisée.
display: true || false || stringified => Il s’agit de la valeur d’affichage par défaut. Si elle n’est pas redéfinie dans la recherche, la modification ou la création, cette valeur sera utilisée.
- si true, renvoie simplement user.<property>.
- Par défaut : si false, cette valeur ne s’affichera sur aucune page (sauf si elle est remplacée dans la recherche, la modification ou la création).
- si la fonction est convertie en chaîne : 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 le comportement de ce champ sur la page de recherche.
- Par défaut : si false, n’apparaîtra pas dans le tableau de recherche.
- search.display : Remplace la valeur d’affichage par défaut.
- search.listOrder : Spécifie l’ordre des colonnes dans le tableau d’affichage des résultats de recherche.
- search.listSize : Spécifie la largeur par défaut de la colonne.
- search.filter : Indique si ce champ peut être recherché dans la liste déroulante de recherche. La valeur par défaut est false.
- search.sort : Indique si cette colonne peut être triée. Utilisez sortProperty si vous voulez trier selon un champ autre que property. La valeur par défaut est false.
edit: false || object => Indique si le champ s’affiche dans les boîtes de dialogue de modification. S’il ne s’agit pas d’un champ par défaut et qu’il est défini comme un objet, il s’affichera sur la page Change Profile, dans le menu déroulant User Actions de la page de l’utilisateur.
- Par défaut : si false, ne s’affichera sur aucune page de modification ou de mise à jour.
- edit.display : Remplace la valeur d’affichage par défaut.
- edit.required : Définissez à true pour provoquer un échec si aucune valeur n’est fournie. La valeur par défaut est false.
- edit.type required : text || select || password
- edit.component : InputText || Input Combo || InputMultiCombo || InputSelectCombo
  - InputText (par défaut) : Champ de texte simple.
  - InputCombo : Liste déroulante avec recherche, valeur unique seulement.
  - InputMultiCombo : Liste déroulante avec recherche autorisant plusieurs valeurs.
  - InputSelectCombo : Liste déroulante de sélection d’options.
- edit.options : Si le composant est l’un de InputCombo, InputMultiCombo ou InputSelectCombo, les valeurs d’option doivent être précisées.
  - Array(string) : Tableau de valeurs (les champs label et value auront la même valeur).
  - Array({ “value”: string, “label”: string }) : Permet de définir des valeurs distinctes pour value et label. Ainsi, la valeur dans le Write Hook correspondra à cette même valeur, mais elle peut être réduite à la seule valeur dans le Write Hook.
  - La validation côté serveur s’assurera que toute valeur précisée pour ce champ figure 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 de validation convertie en chaîne. Notez 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().
create : false || object => Indique si le champ s’affiche dans la boîte de dialogue de création.
- Par défaut : si false, ne s’affichera pas sur la page de création.
- create.placeholder : Fournit le texte d’espace réservé à afficher lorsque le champ est vide.
- create.required : Définissez cette valeur sur true pour échouer si aucune valeur n’est fournie. La valeur par défaut est false.
- create.type required : text || select || password
- create.component : InputText || Input Combo || InputMultiCombo || InputSelectCombo
  - InputText (par défaut) : Champ de texte. Valeur par défaut pour les types text et password.
  - InputCombo : Liste déroulante avec recherche, une seule valeur possible.
  - InputMultiCombo : Liste déroulante avec recherche permettant plusieurs valeurs.
  - InputSelectCombo : Liste déroulante de sélection d’options.
- create.options : Si le composant est InputCombo, InputMultiCombo ou InputSelectCombo, les valeurs des options doivent être spécifiées.
  - Array(string) : Tableau simple de valeurs ; le libellé et la valeur seront identiques.
  - Array({ “value”: string, “label”: string }) : Permet de définir des valeurs distinctes pour la valeur et le libellé. La valeur transmise au Write Hook restera la même, mais elle peut être réduite à la seule valeur dans le Write Hook.
  - La validation côté serveur garantira que toute valeur spécifiée pour ce champ figure dans le tableau d’options.
- create.disabled : true si le composant doit être en lecture seule; false par défaut.
- create.validateFunction : Fonction sérialisée sous forme de chaîne pour effectuer 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

Un ensemble de champs prédéfinis et interrogeables est disponible pour le comportement par défaut. Vous pouvez remplacer le comportement par défaut en ajoutant le champ en tant que userField, puis en redéfinissant le comportement que vous souhaitez modifier. Cette opération est souvent utilisée pour masquer un champ en définissant display sur false.

Champs de recherche

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

Champs d’information de l’utilisateur

user_id: ID utilisateur
name: Nom de l’utilisateur
username: Nom d’utilisateur
email: Courriel de l’utilisateur
identity.connection: Valeur de la connexion
isBlocked: Indique si l’utilisateur est bloqué
blocked_for: Indique si l’utilisateur fait l’objet de blocages liés à la
last_ip: Dernière adresse IP utilisée par l’utilisateur pour se connecter
logins_count: Nombre de connexions de l’utilisateur
currentMemberships: Liste des appartenances de cet utilisateur
created_at: Date et heure de création de l’utilisateur
updated_at: Date et heure de mise à jour de l’utilisateur
last_login: Date et 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: Confirmation du mot de passe de l’utilisateur
email: Courriel de l’utilisateur
username: Nom d’utilisateur de l’utilisateur

Exemple d’utilisation

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

  return callback(null, {
    // Seules ces connexions doivent être visibles dans le sélecteur de connexions.
    // Si une seule connexion est disponible, le sélecteur de connexions ne sera pas affiché dans l'interface.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // Le dictionnaire vous permet de remplacer le titre du tableau de bord et l'étiquette « Appartenance » dans la boîte de dialogue Créer un utilisateur.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // Les champs utilisateur sont des champs personnalisés pouvant être affichés lors de la création et de la modification, utilisés pour la recherche, et permettant de personnaliser la page de profil de l'utilisateur.
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // L'option CSS vous permet d'injecter un fichier CSS personnalisé selon le contexte de l'utilisateur actuel (p. ex. : un CSS différent pour chaque client).
    css: (department && department !== 'IT') && 'https://cdn.jsdelivr.net/gh/auth0-extensions/auth0-delegated-administration-extension/docs/theme/fabrikam.css',
    languageDictionary: 'https://your-cdn.com/locale/es.json'
  });
}

Localisation

À partir de la version 3.0 de l’extension Delegated Admin, vous pouvez fournir un dictionnaire de langue à utiliser pour la localisation. Le dictionnaire de langue est utilisé uniquement pour le contenu statique des pages; pour le contenu au niveau des champs, vous devez utiliser les libellés userFields.

La localisation s’adresse aux personnes qui utilisent des fonctions non administratives pour gérer les utilisateurs. À l’heure actuelle, Auth0 ne prend pas en charge la localisation dans les pages Configuration.

Pour spécifier le paramètre régional, vous pouvez utiliser le chemin. Par exemple : https://{yourTenant}.us.webtask.io/auth0-delegated-admin/en/users définira context.locale à en dans la requête de paramètres. Le languageDictionary est défini dans la requête de paramètres, ce qui vous permet de :

Définir explicitement un languageDictionary
Fournir une URL pour récupérer le contenu du paramètre languageDictionary

Pour en savoir plus, vous pouvez consulter le fichier du dictionnaire de langue de l’extension Delegated Administration.

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, {
    // Seules ces connexions doivent être visibles dans le sélecteur de connexions.
    // Si une seule connexion est disponible, le sélecteur de connexions ne sera pas affiché dans l'interface.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // Le dictionnaire vous permet de remplacer le titre du tableau de bord et l'étiquette « Appartenance » dans la boîte de dialogue Créer un utilisateur.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // Les champs utilisateur sont des champs personnalisés pouvant être affichés lors de la création et de la modification, utilisés pour la recherche, et permettant de personnaliser la page de consultation de l'utilisateur.
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // L'option CSS vous permet d'injecter un fichier CSS personnalisé selon le contexte de l'utilisateur actuel (p. ex. : un CSS différent pour chaque client).
    css: (department && department !== 'IT') && 'https://cdn.jsdelivr.net/gh/auth0-extensions/auth0-delegated-administration-extension/docs/theme/fabrikam.css',
    languageDictionary: 'https://your-cdn.com/locale/es.json'
  });
}

Exemple : fournir un objet dictionnaire de langue

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

  return callback(null, {
    // Seules ces connexions doivent être visibles dans le sélecteur de connexions.
    // Si une seule connexion est disponible, le sélecteur de connexions ne sera pas affiché dans l'interface.
    connections: [ 'Username-Password-Authentication', 'My-Custom-DB' ],
    // Le dictionnaire vous permet de remplacer le titre du tableau de bord et l'étiquette « Appartenance » dans la boîte de dialogue Créer un utilisateur.
    dict: {
      title: department ? department + ' User Management' : 'User Management Dashboard',
      memberships: 'Departments'
    },
    // Les champs utilisateur sont des champs personnalisés pouvant être affichés lors de la création et de la modification, utilisés pour la recherche, et permettant de personnaliser la page de consultation de l'utilisateur.
    userFields: [
        {
            "label": "Conexión",
            "property": "connection",
        },
        {
            "label": "Correo Electrónico",
            "property": "email",
        },
        ...
    ],
    // L'option CSS vous permet d'injecter un fichier CSS personnalisé selon le contexte de l'utilisateur actuel (p. ex. : un CSS différent pour chaque client)
    css: (department && department !== 'IT') && 'https://cdn.jsdelivr.net/gh/auth0-extensions/auth0-delegated-administration-extension/docs/theme/fabrikam.css',
    languageDictionary: {
        loginsCountLabel: 'Cantidad de Logins:',
        searchBarPlaceholder: 'Busqueda de usuarios usando la sintaxis de Lucene',
        deviceNameColumnHeader: 'Dispositivo',
        ...
    }
  });
}

​Contrat Hook

​Exemple d’utilisation

​Propriétés

​Champs personnalisés

​Champs prédéfinis

​Champs de recherche

​Champs d’information de l’utilisateur

​Créer et modifier des champs utilisateur

​Exemple d’utilisation

​Localisation

​Exemple : fournir un lien vers le fichier du dictionnaire de langue

​Exemple : fournir un objet dictionnaire de langue

​En savoir plus

Contrat Hook

Exemple d’utilisation

Propriétés

Champs personnalisés

Champs prédéfinis

Champs de recherche

Champs d’information de l’utilisateur

Créer et modifier des champs utilisateur

Exemple d’utilisation

Localisation

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

Exemple : fournir un objet dictionnaire de langue

En savoir plus