Options de configuration de Lock

Lock offre de nombreuses options de configuration qui vous permettent d’en modifier le comportement, l’apparence et la connectivité — cette ressource vous en présente les détails!

Lock peut être configuré à l’aide du paramètre options transmis au constructeur. Ces options peuvent modifier le comportement du widget Lock, la façon dont il gère les connexions, les champs d’inscription supplémentaires requis pour votre projet, ainsi que la langue, les textes, les couleurs et les images du widget, et bien plus encore. Consultez la liste ci-dessous si vous savez ce que vous cherchez, ou parcourez les options pour obtenir plus de détails.

Interface utilisateur

Option	Description
allowAutocomplete	Active ou désactive l’autocomplétion dans les champs de courriel ou de nom d’utilisateur
allowPasswordAutocomplete	Active ou désactive l’autocomplétion dans le champ de mot de passe
allowShowPassword	Indique si l’utilisateur peut choisir d’afficher le mot de passe pendant la saisie
allowedConnections	Liste des connexions offertes pour l’authentification
autoclose	Indique si Lock se ferme après une connexion
autofocus	Indique si le focus est placé sur le premier champ de saisie
avatar	Indique si un avatar et un nom d’utilisateur doivent être affichés dans l’en-tête de Lock une fois qu’un courriel ou un nom d’utilisateur a été saisi, ainsi que la façon de les obtenir
closable	Détermine si Lock peut être fermé ou non
container	L’élément HTML où Lock sera affiché. Cela fait en sorte que Lock apparaisse dans la page plutôt que dans une fenêtre modale
flashMessage	Affiche un message flash error ou success lorsque Lock est affiché
language	Indique la langue du widget
languageDictionary	Personnalisez le texte utilisé pour les éléments du widget (comme les libellés et les espaces réservés)
popupOptions	Personnalisez l’emplacement de la fenêtre contextuelle à l’écran
rememberLastLogin	Indique s’il faut afficher un écran permettant de vous connecter rapidement avec le compte utilisé la dernière fois
scrollGlobalMessagesIntoView	Indique si un globalMessage doit être amené dans la zone visible de l’utilisateur

Thème

Les options du thème sont regroupées dans la propriété theme de l’objet options.

Option	Description
authButtons	Personnaliser l’apparence de certains boutons de connexion
labeledSubmitButton	indique si le bouton de soumission comporte du texte ou non
logo	Logo à utiliser
primaryColor	Couleur du bouton principal dans le widget

Authentification

Les options d’authentification sont regroupées dans la propriété auth de l’objet options.

Option	Description
audience	L’API qui consommera votre jeton d’accès
autoParseHash	Indique s’il faut analyser automatiquement le hachage et poursuivre
connectionScopes	Spécifiez les scopes de la connexion
params	Option permettant d’envoyer des paramètres lors de la connexion
redirect	Indique s’il faut utiliser le mode de redirection
redirectUrl	L’URL vers laquelle rediriger après l’authentification
responseMode	Option permettant d’envoyer la réponse par POST
responseType	Réponse sous forme de code ou de token
sso	Détermine si l’authentification unique (SSO) est activée ou non dans Lock

Database

Option	Description
additionalSignUpFields	Champs supplémentaires recueillis à l’inscription
allowLogin	Indique si la connexion est autorisée dans le widget
allowForgotPassword	Indique si l’option de mot de passe oublié est autorisée dans le widget
allowSignUp	Indique si l’inscription est autorisée dans le widget
defaultDatabaseConnection	Connexion à la BD affichée par défaut
initialScreen	Écran à afficher à l’ouverture du widget
loginAfterSignUp	Après l’inscription, indique si l’utilisateur doit être connecté automatiquement
forgotPasswordLink	Lien vers une page personnalisée « mot de passe oublié »
showTerms	Précise si les conditions d’inscription doivent être affichées
mustAcceptTerms	Indique si les conditions doivent être acceptées (case à cocher)
prefill	Valeurs préremplies pour les champs email/username
signUpLink	Définit une URL personnalisée à ouvrir en cliquant sur “sign up”
usernameStyle	Limite le champ username à accepter uniquement des valeurs “username” ou uniquement des valeurs “email”

Enterprise

Option	Description
defaultEnterpriseConnection	Indique une connexion s’il y en a plus d’une

Passwordless

Option	Description
passwordlessMethod	Lorsque vous utilisez Auth0LockPasswordless avec une connexion par courriel, cette option vous permet de choisir si vous voulez envoyer un code ou un lien magique pour authentifier l’utilisateur

Autres

Option	Description
configurationBaseUrl	Remplacer l’URL de base de votre application
languageBaseUrl	Remplacer l’URL de base de votre fichier de langue
hashCleanup	Remplacer la suppression par défaut du hachage dans l’URL
connectionResolver	Fonction de rappel facultative permettant de choisir une connexion en fonction des renseignements sur le nom d’utilisateur

---

Options de l’interface UI

allowAutocomplete

Détermine si les champs d’adresse courriel ou de nom d’utilisateur autorisent l’autocomplétion (<input autocomplete />). La valeur par défaut est false.

allowAutocomplete: true

allowPasswordAutocomplete

Détermine si le champ de mot de passe autorise le remplissage automatique (<input autocomplete />). La valeur par défaut est false.

Réglez allowPasswordAutocomplete à true pour assurer la prise en charge des gestionnaires de mots de passe et éviter d’autres comportements indésirables.

allowPasswordAutocomplete: true

allowShowPassword

Cette option détermine s’il faut ajouter ou non une case à cocher à l’UI qui, une fois sélectionnée, permet à l’utilisateur d’afficher son mot de passe pendant la saisie. Par défaut, cette option est définie à false.

allowShowPassword: true

Lock avec allowShowPassword défini à true et la case cochée pour afficher le mot de passe :

allowedConnections

Tableau des connexions à utiliser pour les actions signin|signup|reset. Par défaut, toutes les connexions activées sont utilisées.

allowedConnections: ['Username-Password-Authentication']

allowedConnections: ['twitter', 'facebook', 'linkedin']

allowedConnections: ['qraftlabs.com']

Exemples de allowedConnections :

autoclose

Détermine si Lock se fermera automatiquement après une connexion réussie. La valeur par défaut est faux. Si Lock n’est pas closable, il ne se fermera pas, même si cette option est définie sur vrai.

autoclose: true

autofocus

Si cette valeur est true, le focus est placé sur le premier champ du widget. La valeur par défaut est false lors de l’affichage sur un appareil mobile, ou si une option container est fournie; dans tous les autres cas, la valeur par défaut est true.

autofocus: false

avatar

Par défaut, Gravatar est utilisé pour récupérer l’avatar de l’utilisateur et son nom d’affichage, mais vous pouvez aussi les obtenir d’une autre source grâce à l’option avatar.

var options = {
  avatar: {
    url: function(email, cb) {
      // Récupère l'URL de l'avatar pour l'adresse courriel saisie par l'utilisateur, Lock
      // préchargera l'image avant de l'afficher.
      // Notez qu'en cas d'erreur, vous appelez cb avec l'erreur dans
      // le premier argument au lieu de `null`.
      var url = obtainAvatarUrl(email);
      cb(null, url);
    },
    displayName: function(email, cb) {
      // Récupère le nom d'affichage pour l'adresse courriel saisie par l'utilisateur.
      // Notez qu'en cas d'erreur, vous appelez cb avec l'erreur dans
      // le premier argument au lieu de `null`.
      var displayName = obtainDisplayName(email);
      cb(null, displayName);
    }
  }
};

Ou, si vous ne voulez pas afficher d’avatar du tout, passez simplement null.

avatar: null

Comportement par défaut avec Gravatar :

closable

Détermine si Lock peut être fermé. Lorsqu’une option container est fournie, sa valeur est toujours false; sinon, la valeur par défaut est true.

closable: false

container

L’id de l’élément HTML dans lequel le widget sera affiché.

Le widget s’affiche alors directement dans votre div, plutôt que dans une fenêtre modale.

<div id="hiw-login-container"></div>

<script>
  var options = {
    container: 'hiw-login-container'
  };

  // initialiser
  var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com', options);

  // afficher
  lock.show();
</script>

message flash

Affiche un message flash de type error ou success lorsque Lock s’affiche. Cet objet possède les propriétés suivantes :

• type {String}: Le type de message; les types pris en charge sont error, info et success
• text {String}: Le texte à afficher.

var options = {
  flashMessage: {
    type: 'success',
    text: 'Welcome!'
  }
};

language

Indique la langue du widget. La valeur par défaut est « en ». Consultez le répertoire d’internationalisation pour obtenir la liste à jour des langues offertes.

language: 'es'

languageDictionary

Permet de personnaliser tous les textes affichés dans Lock. La valeur par défaut est . Consultez la spécification du Language Dictionary en anglais pour obtenir la liste complète des valeurs de languageDictionary que cet object permet de modifier.

var options = {
  languageDictionary: {
    emailInputPlaceholder: "[e-mail]",
    title: "Log me in"
  },
};

Par ailleurs, consultez la page Personnalisation des messages d’erreur ou la page Internationalisation pour en savoir plus sur l’utilisation de l’option languageDictionary.

popupOptions

Permet de personnaliser l’emplacement de la fenêtre contextuelle sur l’écran. Toutes les options de position et de taille prises en charge par window.open sont acceptées. La valeur par défaut est .

Options des paramètres de window.open. Ceci s’applique uniquement si redirect est défini sur false.

var options = {
  auth: {
      redirect: false
  },
  popupOptions: { width: 300, height: 400, left: 200, top: 300 }
};

rememberLastLogin

Détermine s’il faut afficher ou non un écran qui vous permet de vous connecter rapidement avec le compte utilisé la dernière fois. Récupère les données de l’authentification unique (SSO) et active le message Votre dernière connexion avec. La valeur par défaut est true. Cette information provient de la session Auth0 de l’utilisateur; cette fonctionnalité reste donc disponible aussi longtemps que dure sa session Auth0 (ce qui est configurable).

rememberLastLogin: false

Les nouveaux tenants ont automatiquement Seamless SSO activé. Lorsque cette option est activée, l’option rememberLastLogin n’est plus pertinente, car s’il existe déjà une session, la page Universal Login ne s’affichera pas du tout. L’utilisation de Seamless SSO est fortement recommandée, car elle offre une expérience d’authentification fluide : les utilisateurs se connectent une seule fois et n’ont plus à saisir de nouveau leurs informations d’identification lorsqu’ils naviguent dans les applications que vous avez créées ou dans des applications tierces. Si l’utilisateur n’est pas connecté, il sera redirigé vers l’écran de connexion, comme prévu. De plus, le message Votre dernière connexion avec ne sera pas disponible dans les circonstances suivantes :

• Vous avez utilisé Lock dans une Hosted Login Page avec une session établie au moyen de l’authentification sans mot de passe.
• Vous avez utilisé Lock dans un scénario d’embedded login où responseType: code (indiquant l’Authorization Code Flow, qui est utilisé pour les Regular Web Apps).

scrollGlobalMessagesIntoView

Détermine s’il faut faire défiler la page pour afficher un globalMessage dans la zone visible de l’utilisateur. La valeur par défaut est true.

scrollGlobalMessagesIntoView: false

Options de thème

Les options de thème sont regroupées dans la propriété theme de l’objet options.

var options = {
  theme: {
    labeledSubmitButton: false,
    logo: "https://example.com/assets/logo.png",
    primaryColor: "green",
    authButtons: {
      connectionName: {
        displayName: "...",
        primaryColor: "...",
        foregroundColor: "...",
        icon: "https://.../logo.png"
      }
    }
  }
};

authButtons

Permet de personnaliser les boutons dans Lock avec des connexions OAuth2 personnalisées. Chaque connexion personnalisée dont vous voulez personnaliser le bouton doit être indiquée par son nom, avec son propre ensemble de paramètres. Les paramètres personnalisables sont indiqués ci-dessous :

• displayName {Chaîne}: Le nom à afficher à la place du nom de la connexion lors de la création du libellé du bouton, par exemple LOGIN WITH MYCONNECTION à la connexion).
• primaryColor {Chaîne}: La couleur d’arrière-plan du bouton. La valeur par défaut est #eb5424.
• foregroundColor {Chaîne}: La couleur du texte du bouton. La valeur par défaut est #FFFFFF.
• icon {Chaîne}: L’URL de l’icône pour cette connexion. Par exemple : http://site.com/logo.png.

var options = {
  theme: {
    authButtons: {
      "testConnection": {
        displayName: "Test Conn",
        primaryColor: "#b7b7b7",
        foregroundColor: "#000000",
        icon: "http://example.com/icon.png"
      },
      "testConnection2": {
        primaryColor: "#000000",
        foregroundColor: "#ffffff",
      }
    }
  }
};

labeledSubmitButton

Cette option indique si le bouton de soumission doit comporter un libellé ou non, et vaut true par défaut. Lorsqu’elle est définie à false, une icône s’affiche à la place.

var options = {
  theme: {
    labeledSubmitButton: false
  }
};

Si le label est défini sur true, sa valeur par défaut, le texte du label peut être personnalisé à l’aide de l’option languageDictionary.

logo

La valeur de logo est l’URL d’une image qui sera affichée dans l’en-tête de Lock; par défaut, le logo d’Auth0 est utilisé. Une hauteur maximale de 58px est recommandée pour une meilleure expérience utilisateur.

var options = {
  theme: {
    logo: 'https://example.com/logo.png'
  }
};

primaryColor

La propriété primaryColor définit la couleur principale de Lock; toutes les couleurs utilisées dans le widget en seront dérivées. Cette option est utile lorsque vous fournissez un logo personnalisé, afin de vous assurer que toutes les couleurs s’harmonisent bien avec la palette du logo. La valeur par défaut est #ea5323.

var options = {
  theme: {
    logo: 'https://example.com/logo.png',
    primaryColor: '#31324F'
  }
};

Options d’authentification

Les options d’authentification sont regroupées dans la propriété auth de l’objet options.

Le scope utilisé par défaut par Lock est openid profile email.

var options = {
  auth: {
   params: {
    param1: "value1",
    scope: "openid profile email"
   },
   autoParseHash: true,
   redirect: true,
   redirectUrl: "some url",
   responseMode: "form_post",
   responseType: "token",
   sso: true,
   connectionScopes: {
    connectionName: [ 'scope1', 'scope2' ]
   }
  }
};

audience

L’option audience indique l’API qui utilisera le Access Token reçu après l’authentification.

autoParseHash

Lorsque autoParseHash est défini sur true, Lock analysera la chaîne window.location.hash au moment de son instanciation. S’il est défini sur false, vous devrez reprendre manuellement le processus d’authentification à l’aide de la méthode resumeAuth.

var options = {
  auth: {
    autoParseHash: false
  }
};

connectionScopes

Cette option vous permet de définir les portées à envoyer à la connexion sociale OAuth2 pour l’authentification.

var options = {
  auth: {
    connectionScopes: {
      'facebook': ['scope1', 'scope2']
    }
  }
};

Vous pouvez obtenir auprès du fournisseur concerné la liste des scopes propres à vos connexions sociales. Par exemple, la documentation de Facebook for Developers présente une liste des permissions distinctes pouvant être demandées pour votre connexion.

params

Vous pouvez envoyer des paramètres au moment d’amorcer une connexion en les ajoutant à l’objet options. L’exemple ci-dessous ajoute un paramètre state dont la valeur est foo, ainsi qu’un paramètre scope (qui comprend la portée, puis les attributs demandés).

var options = {
  auth: {
    params: {
      state: 'foo',
      scope: 'openid email user_metadata app_metadata picture'
    }
  }
};

Pour en savoir plus sur les paramètres pris en charge, consultez Paramètres d’authentification de Lock.

redirect

La valeur par défaut est true. Lorsqu’il est défini à true, le mode de redirection est utilisé. S’il est défini à false, le mode popup est utilisé.

var options = {
  auth: {
    redirect: false
  }
};

redirectUrl

L’URL vers laquelle Auth0 redirigera l’utilisateur après l’authentification. Par défaut, la valeur est la chaîne vide "" (aucune URL de redirection).

var options = {
  auth: {
    redirectUrl: 'http://testurl.com'
  }
};

Lorsque redirectUrl est fourni (c’est-à-dire défini sur une valeur non vide), l’option responseType prendra par défaut la valeur code si elle n’est pas définie manuellement.

responseMode

Doit être défini sur "form_post" si vous souhaitez que le code ou le jeton soit transmis au redirectUrl au moyen d’une requête HTTP POST, plutôt que d’être inclus dans les paramètres de requête ou le fragment de celle-ci.

Sinon, cette option ne doit pas être indiquée, et elle est omise par défaut.

var options = {
  auth: {
    responseMode: 'form_post'
  }
};

responseType

La valeur de responseType doit être réglée à “token” pour les applications monopages, et à “code” dans les autres cas. Par défaut, la valeur est “code” lorsque redirectUrl est fourni, et “token” sinon.

var options = {
  auth: {
    responseType: 'token'
  }
};

Lorsque responseType est défini sur code, Lock n’affichera jamais le message Votre dernière connexion avec, et demandera toujours à l’utilisateur de saisir ses identifiants.

sso

La valeur par défaut est true. Lorsqu’elle est définie sur true, l’authentification unique est activée dans Lock.

var options = {
  auth: {
    sso: false
  }
};

Options Database

additionalSignUpFields

Des champs de saisie supplémentaires peuvent être ajoutés à l’écran d’inscription à l’aide de l’option additionalSignUpFields. Chaque option ajoutée de cette façon est ensuite ajoutée au user_metadata de l’utilisateur. Pour en savoir plus, consultez Comprendre le fonctionnement des métadonnées dans les profils utilisateur. Chaque champ doit avoir un name et un placeholder, et une URL d’icon peut aussi être fournie. De plus, une valeur initiale peut être fournie avec l’option prefill, qui peut être une chaîne contenant la valeur ou une fonction qui l’obtient. Les autres options dépendent du type de champ, qui est défini à l’aide de l’option type et dont la valeur par défaut est “text”.

Option additionalSignUpFields destinée uniquement à l’inscription par base de données

Les additionalSignUpFields sont destinés à être utilisés uniquement avec les inscriptions par base de données. Si vous avez aussi des inscriptions sociales, vous pouvez demander les renseignements supplémentaires après l’inscription des utilisateurs (consultez cette page sur l’inscription personnalisée pour en savoir plus). Vous pouvez utiliser la clé i18n databaseAlternativeSignupInstructions pour afficher ces instructions.

Les nouveaux champs sont affichés sous les champs de saisie habituels de l’inscription, dans l’ordre où ils sont fournis.

Champs de texte

Les champs de texte sont le type de champ supplémentaire d’inscription par défaut. Notez qu’il est aussi possible de fournir une fonction validator.

var options = {
  additionalSignUpFields: [{
    name: "address",
    placeholder: "enter your address",
    // Les propriétés suivantes sont facultatives
    icon: "https://example.com/assests/address_icon.png",
    prefill: "street 123",
    validator: function(address) {
      return {
         valid: address.length >= 10,
         hint: "Must have 10 or more chars" // facultatif
      };
    }
  },
  {
    name: "full_name",
    placeholder: "Enter your full name"
  }]
}

Si vous ne précisez pas de validator, le champ de texte sera obligatoire. Si vous voulez rendre le champ de texte facultatif, utilisez un validateur qui retourne toujours true, comme ceci :

var options = {
  additionalSignUpFields: [{
    name: "favorite_color",
    placeholder: "Enter your favorite color (optional)",
    validator: function() { 
      return true;
    }
  }]
}

Si vous souhaitez enregistrer la valeur de l’attribut à la racine de votre profil, utilisez storage: 'root'. Seul un sous-ensemble de valeurs peut être stocké de cette manière. La liste des attributs qui peuvent être ajoutés à la racine de votre profil se trouve ici. Par défaut, chaque champ d’inscription supplémentaire est stocké dans l’objet user_metadata.

var options = {
  additionalSignUpFields: [{
    name: "name",
    storage: "root"
  }]
};

Champ de sélection

Le champ d’inscription type: "select" vous permet d’utiliser des menus déroulants afin que l’utilisateur puisse choisir une valeur.

var options = {
  additionalSignUpFields: [{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: [
      {value: "us", label: "United States"},
      {value: "fr", label: "France"},
      {value: "ar", label: "Argentina"}
    ],
    // Les propriétés suivantes sont facultatives
    icon: "https://example.com/assests/location_icon.png",
    prefill: "us"
  }]
}

Les éléments du tableau options pour les champs select doivent respecter le format suivant : {label: “non empty string”, value: “non empty string”}, et au moins une option doit être définie.

Les valeurs options et prefill peuvent être fournies à l’aide d’une fonction :

var options = {
  additionalSignUpFields: [{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: function(cb) {
      // obtenir les options, en cas d'erreur, appelez cb avec l'erreur dans le
      // premier argument au lieu de null
      cb(null, options);
    },
    icon: "https://example.com/assests/location_icon.png",
    prefill: function(cb) {
      // obtenir le préremplissage, en cas d'erreur, appelez cb avec l'erreur dans le
      // premier argument au lieu de null
      cb(null, prefill);
    }
  }]
}

Champ de case à cocher

Le troisième type de champ d’inscription personnalisé est type: "checkbox". La valeur prefill permet de définir l’état par défaut de la case à cocher (true ou false) et elle est obligatoire.

var options = {
  additionalSignUpFields: [{
    type: "checkbox",
    name: "newsletter",
    prefill: "true",
    placeholder: "I hereby agree that I want to receive marketing emails from your company"
  }]
}

Champ masqué

Le champ d’inscription type: "hidden" vous permet d’utiliser un champ masqué avec une valeur fixe.

var options = {
  additionalSignUpFields: [{
    type: "hidden",
    name: "signup_code",
    value: "abc123"
  }]
}

Dans certains cas d’utilisation, il peut être possible d’utiliser les données additionalSignUpFields dans les modèles de courriel, par exemple une option de préférence linguistique, dont la valeur pourrait ensuite servir à définir la langue des communications par courriel générées à partir de modèles.

allowLogin

Lorsqu’elle est définie à false, cette option empêche le widget d’afficher l’écran de connexion. C’est utile si vous voulez utiliser le widget uniquement pour les inscriptions (les onglets de connexion et d’inscription dans l’écran d’inscription seront masqués) ou pour réinitialiser des mots de passe (le bouton de retour dans l’écran mot de passe oublié sera masqué). Dans ce cas, vous devrez peut-être aussi préciser les options initialScreen, allowForgotPassword et allowSignUp. Par défaut, cette option est définie à true.

allowLogin: false

allowForgotPassword

Lorsque sa valeur est false, allowForgotPassword masque le lien « Vous ne vous souvenez pas de votre mot de passe? » dans l’écran de connexion, ce qui rend l’écran mot de passe oublié inaccessible. La valeur par défaut est true. Si vous utilisez une connexion à la base de données avec une base de données personnalisée qui n’a pas de script Change Password, l’écran mot de passe oublié ne sera pas disponible.

allowForgotPassword: false

allowSignUp

Lorsqu’elle est définie à false, cette option masque les onglets de connexion et d’inscription sur l’écran de connexion, ce qui rend l’écran d’inscription inaccessible. Sa valeur par défaut est true. Gardez à l’esprit que si la connexion à la base de données a les inscriptions désactivées ou si vous utilisez une base de données personnalisée qui n’a pas de script Create, l’écran d’inscription ne sera pas disponible.

Gardez aussi à l’esprit que cette option contrôle uniquement l’apparence côté client et n’empêche pas complètement de nouvelles inscriptions par des visiteurs anonymes déterminés. Si vous voulez empêcher complètement les nouveaux utilisateurs de s’inscrire, vous devez utiliser l’option Disable Sign Ups dans le dashboard, dans les paramètres de la connexion.

allowSignUp: false

defaultDatabaseConnection

Indique la connexion à la base de données qui sera utilisée lorsqu’il y en a plus d’une.

defaultDatabaseConnection: 'test-database'

initialScreen

Le nom de l’écran qui s’affiche à l’ouverture du widget. Les valeurs acceptées sont login, signUp et forgotPassword. Si cette option n’est pas précisée, le widget affichera par défaut le premier écran disponible dans cette liste.

initialScreen: 'forgotPassword'

loginAfterSignUp

Indique si l’utilisateur ouvrira automatiquement une session après une inscription réussie. La valeur par défaut est true.

loginAfterSignUp: false

forgotPasswordLink

Définissez l’URL d’une page permettant à l’utilisateur de réinitialiser son mot de passe. Lorsqu’elle est définie comme une chaîne non vide, l’utilisateur est redirigé vers l’URL fournie lorsqu’il clique sur le lien « Vous ne vous souvenez pas de votre mot de passe ? » dans l’écran de connexion.

forgotPasswordLink: 'https://yoursite.com/reset-password'

showTerms

Si la valeur est définie à true, la chaîne languageDictionary.signUpTerms s’affiche. La valeur par défaut est true.

showTerms: false

mustAcceptTerms

Lorsqu’elle est définie sur true, une case à cocher s’affiche à côté des conditions générales et doit être cochée avant l’inscription. Les conditions générales peuvent être définies au moyen de l’option languageDictionary. Cette option ne s’applique qu’aux utilisateurs qui s’inscrivent avec des connexions à la base de données. La valeur par défaut est false.

mustAcceptTerms: true

prefill

Permet de définir la valeur initiale des champs de courriel et/ou de nom d’utilisateur. Si omis, aucune valeur initiale n’est fournie.

var options = {
  prefill: {
    email: "[e-mail]",
    username: "someone",
    phoneNumber: "[phone]"
  }
};

signUpLink

Définissez l’URL à ouvrir lorsque vous cliquez sur le bouton d’inscription. Lorsqu’elle est définie sur une chaîne non vide, cette option force allowSignUp à true.

signUpLink: 'https://yoursite.com/signup'

usernameStyle

Détermine ce qui sera utilisé pour identifier l’utilisateur pour une connexion à la base de données dont l’indicateur requires_username est activé (s’il ne l’est pas, l’option usernameStyle sera ignorée). Les valeurs possibles sont "username" et "email". Par défaut, username et email sont tous deux autorisés; définir cette option limitera la connexion à l’un ou à l’autre.

usernameStyle: 'username'

Options d’entreprise

defaultEnterpriseConnection

Précise la connexion d’entreprise à utiliser pour permettre le login avec un username et un Password lorsqu’il y a plus d’une connexion disponible ou lorsqu’il y a aussi une connexion à la base de données. Si un defaultDatabaseConnection est fourni, la connexion à la base de données sera utilisée et cette option sera ignorée.

defaultEnterpriseConnection: 'test-database'

defaultADUsernameFromEmailPrefix

Détermine le nom d’utilisateur AD de remplacement à partir du préfixe de l’adresse courriel. Par défaut, la valeur est true.

defaultADUsernameFromEmailPrefix: false

Options Passwordless

passwordlessMethod

Lorsque vous utilisez Auth0LockPasswordless avec une connexion par courriel, vous pouvez utiliser cette option pour choisir entre l’envoi d’un code ou d’un lien magique pour authentifier l’utilisateur. Les valeurs possibles pour les connexions par courriel sont code et link. La valeur par défaut est code. Les connexions SMS sans mot de passe utiliseront toujours code.

passwordlessMethod: code

Autres options

configurationBaseUrl

Remplace l’URL de base des paramètres de l’application. Par défaut, cette option utilise le domaine fourni. Cette option n’est nécessaire que si votre cas d’utilisation particulier exige que votre application n’utilise pas le comportement par défaut.

configurationBaseUrl: "https://www.example.com"

languageBaseUrl

Remplace l’URL source des traductions fournies par Auth0. Par défaut, cette option utilise l’URL du CDN d’Auth0 https://cdn.auth0.com, puisque c’est là que sont stockées toutes les traductions fournies. En indiquant une autre valeur, vous pouvez utiliser une autre source pour les traductions de langue, au besoin.

languageBaseUrl: "https://www.example.com"

hashCleanup

Lorsque l’option hashCleanup est activée, elle supprime la partie hachage de l’URL de rappel après l’authentification de l’utilisateur. La valeur par défaut est true.

hashCleanup: false

connectionResolver

Lorsqu’il est utilisé, ce point d’extensibilité permet de choisir la connexion à utiliser en fonction du nom d’utilisateur.

Prend username, context et callback comme paramètres. Le callback attend un objet comme : {type: 'database', name: 'connection name'}. Cela fonctionne uniquement avec les connexions à la base de données. Gardez à l’esprit que ce résolveur s’exécute lors de l’événement onSubmit du formulaire, alors gardez-le simple et rapide.

Cette fonctionnalité est en version bêta. Si vous trouvez un bogue, veuillez ouvrir une issue sur GitHub.

leeway

L’option leeway peut être définie comme un entier — une valeur en secondes — qui sert à tenir compte d’un décalage entre les horloges lors de l’expiration des ID Token. En général, cette valeur ne dépasse pas une ou deux minutes.

leeway: 30