Options de configuration de Lock

Lock comprend de nombreuses options de configuration qui vous permettent de modifier le comportement, l’apparence et la connectivité du widget Lock. Cette ressource vous fournit les détails sur ces options!

Lock peut être configuré au moyen 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, la langue et les chaînes de texte, les couleurs et les images du widget, et bien plus encore. Consultez l’index ci-dessous si vous savez ce que vous cherchez, ou parcourez les options pour en savoir plus.

UI

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 du mot de passe
allowShowPassword	Indique si l’utilisateur peut choisir d’afficher le mot de passe pendant la saisie
allowedConnections	Liste des connexions disponibles pour l’authentification
autoclose	Indique si Lock se ferme après l’ouverture de session
autofocus	Indique si le curseur est placé dans 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, et comment l’obtenir
closable	Détermine si Lock peut être fermé
container	Élément HTML dans lequel Lock sera affiché. Cela fait apparaître Lock directement 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	Personnalise le texte utilisé pour les éléments du widget (comme les libellés et les textes indicatifs)
popupOptions	Personnalise l’emplacement de la fenêtre contextuelle à l’écran
rememberLastLogin	Indique s’il faut afficher ou non un écran qui vous permet d’ouvrir rapidement une session avec le compte utilisé la dernière fois
scrollGlobalMessagesIntoView	Indique si un globalMessage doit être défilé jusqu’à 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 des boutons de certaines connexions
labeledSubmitButton	indique si le bouton d’envoi 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 utilisera votre Jeton d’accès
autoParseHash	Indique s’il faut analyser automatiquement le hash et continuer
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 au format POST
responseType	Réponse sous forme de code ou de jeton
sso	Détermine si l’authentification unique (SSO) est activée dans Lock

Base de données

Option	Description
additionalSignUpFields	Champs supplémentaires recueillis à l’inscription
allowLogin	Indique s’il faut autoriser la connexion dans le widget
allowForgotPassword	Indique s’il faut autoriser l’option « mot de passe oublié » dans le widget
allowSignUp	Indique s’il faut autoriser l’inscription dans le widget
defaultDatabaseConnection	Connexion à la base de données affichée par défaut
initialScreen	Écran à afficher à l’ouverture du widget
loginAfterSignUp	Après l’inscription, indique s’il faut connecter automatiquement l’utilisateur
forgotPasswordLink	Lien vers une page personnalisée de réinitialisation du mot de passe
showTerms	Indique 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 courriel/nom d’utilisateur
signUpLink	Définit une URL personnalisée à ouvrir lorsqu’on clique sur « s’inscrire »
usernameStyle	Limite le champ nom d’utilisateur à n’accepter que des valeurs « username » ou « email »

Entreprise

Option	Description
defaultEnterpriseConnection	Spécifie une connexion s’il y en a plus d’une

Passwordless

Option	Description
passwordlessMethod	Lorsque vous utilisez Auth0LockPasswordless avec une connexion par courriel, vous pouvez utiliser cette option pour choisir d’envoyer un code ou un lien magique afin d’authentifier l’utilisateur.

Autres

Option	Description
configurationBaseUrl	Remplace l’URL de base de votre application
languageBaseUrl	Remplace l’URL de base de votre fichier de langue
hashCleanup	Remplace la suppression par défaut du fragment dans l’URL
connectionResolver	Fonction de rappel facultative pour choisir une connexion en fonction des informations du nom d’utilisateur

---

Options de l’interface utilisateur

allowAutocomplete

Détermine si les champs de courriel ou de nom d’utilisateur permettent la saisie semi-automatique (<input autocomplete />). La valeur par défaut est false.

allowAutocomplete: true

allowPasswordAutocomplete

Détermine si le champ de mot de passe autorise ou non la saisie semi-automatique (<input autocomplete />). La valeur par défaut est false.

Définissez allowPasswordAutocomplete sur true pour prendre en charge les gestionnaires de mots de passe et éviter d’autres comportements indésirables.

allowPasswordAutocomplete: true

allowShowPassword

Cette option détermine s’il faut ou non ajouter une case à cocher à l’interface utilisateur qui, lorsqu’elle est sélectionnée, permet à l’utilisateur d’afficher son mot de passe pendant qu’il le saisit. Par défaut, cette option est définie sur false.

allowShowPassword: true

Lock avec allowShowPassword défini sur true et activé pour afficher le mot de passe :

allowedConnections

Tableau des connexions utilisées 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 false. Si Lock n’est pas closable, il ne se fermera pas, même si cette option est définie à true.

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 du rendu 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 sert à récupérer l’avatar et le nom d’affichage de l’utilisateur, mais vous pouvez aussi les obtenir d’une autre source grâce à l’option avatar.

var options = {
  avatar: {
    url: function(email, cb) {
      // Obtenir l'URL de l'avatar pour le courriel saisi 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) {
      // Obtenir le nom d'affichage pour le courriel saisi 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 souhaitez afficher aucun avatar, passez simplement null.

avatar: null

Comportement par défaut avec Gravatar :

closable

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

closable: false

container

L’id de l’élément html où le widget sera affiché.

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

<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>

flashMessage

Affiche un message instantané de type error ou success lorsque Lock s’affiche. Cet objet comprend 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 voir la liste à jour des langues prises en charge.

language: 'es'

languageDictionary

Permet de personnaliser chaque texte affiché dans Lock. La valeur par défaut est . Consultez la spécification anglaise du dictionnaire de langue pour obtenir la liste complète des valeurs languageDictionary que cet objet permet de modifier.

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

Consultez également la page Personnaliser les 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 à l’écran. Toute option de positionnement et de taille acceptée par window.open est prise en charge. La valeur par défaut est .

Options des fonctionnalités de window.open. Cela 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 ou non afficher un écran qui vous permet de vous connecter rapidement avec le compte utilisé la dernière fois. Demande les données de Single Sign-on (SSO) et active le message La dernière fois que vous vous êtes connecté avec. La valeur par défaut est true. Ces informations proviennent de la session Auth0 de l’utilisateur; cette fonctionnalité reste donc disponible aussi longtemps que sa session Auth0 est valide (ce qui peut être configuré).

rememberLastLogin: false

Les nouveaux locataires ont Seamless SSO activé automatiquement. 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 identifiants lorsqu’ils passent d’une application que vous avez créée à une application tierce. Si l’utilisateur n’est pas connecté, il sera redirigé vers l’écran de connexion, comme prévu. De plus, le message La dernière fois que vous vous êtes connecté avec ne sera pas disponible dans les circonstances suivantes :

• Vous avez utilisé Lock dans une page de connexion hébergée, avec une session établie à l’aide de l’authentification Passwordless.
• Vous avez utilisé Lock dans un scénario de connexion intégrée où responseType: code (indiquant le flux de code d’autorisation, utilisé pour les applications Web traditionnelles).

scrollGlobalMessagesIntoView

Indique si un globalMessage doit être amené dans la zone visible de l’utilisateur par défilement. 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 de Lock pour des connexions OAuth2 personnalisées. Chaque connexion personnalisée dont vous souhaitez personnaliser le bouton doit être indiquée par son nom, chacune avec son propre ensemble de paramètres. Les paramètres personnalisables sont indiqués ci-dessous :

• displayName {String}: Le nom à afficher à la place du nom de la connexion lors de la création du titre du bouton, par exemple LOGIN WITH MYCONNECTION pour la connexion).
• primaryColor {String}: La couleur d’arrière-plan du bouton. La valeur par défaut est #eb5424.
• foregroundColor {String}: La couleur du texte du bouton. La valeur par défaut est #FFFFFF.
• icon {String}: L’URL de l’icône de 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 d’envoi doit comporter un libellé, et sa valeur par défaut est true. Lorsqu’elle est définie sur false, une icône s’affiche à la place.

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

Si l’option label est définie sur true, ce qui est la valeur par défaut, le texte du libellé peut être personnalisé à l’aide de l’option languageDictionary.

logo

La valeur de logo est l’URL d’une image qui sera placé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 offrir 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 sont calculées à partir de celle-ci. Cette option est utile lorsque vous fournissez un logo personnalisé, afin de garantir que toutes les couleurs s’harmonisent bien avec la palette de couleurs 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 par défaut utilisé 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 Jeton d’accès reçu après l’authentification.

autoParseHash

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

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

connectionScopes

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

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

Une liste des scopes précis associés à vos connexions sociales peut être obtenue auprès du fournisseur concerné. Par exemple, la documentation Facebook for Developers contient une liste des autorisations distinctes pouvant être demandées pour votre connexion.

params

Vous pouvez envoyer des paramètres au moment de démarrer une connexion en les ajoutant à l’objet d’options. L’exemple ci-dessous ajoute un paramètre state avec une valeur égale à foo, ainsi qu’un paramètre scope (qui comprend le scope ainsi que les attributs demandés).

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

Pour en savoir davantage sur les paramètres pris en charge, consultez Lock Authentication Parameters.

redirect

La valeur par défaut est true. Lorsqu’elle est définie sur true, le mode de redirection est utilisé. Lorsqu’elle est définie sur false, le mode popup est utilisé.

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

redirectUrl

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

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

Lorsque redirectUrl est fourni (c’est-à-dire qu’il est 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 à "form_post" si vous voulez que le code ou le jeton soit transmis à redirectUrl au moyen d’une requête HTTP POST, plutôt que d’être inclus dans les parties requête ou fragment de l’URL.

Sinon, cette option doit être omise; par défaut, elle l’est.

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

responseType

La valeur de responseType doit être définie sur “token” pour les applications monopages, et sur “code” dans les autres cas. La valeur par défaut 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 La dernière fois, vous vous êtes connecté avec, et demandera toujours à l’utilisateur de saisir ses identifiants.

sso

La valeur par défaut est true. Lorsque cette option est définie à true, elle active l’authentification unique (SSO) dans Lock.

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

Options de base de données

additionalSignUpFields

Vous pouvez ajouter des champs de saisie supplémentaires à l’écran d’inscription à l’aide de l’option additionalSignUpFields. Chaque option ajoutée de cette façon sera ensuite ajoutée au user_metadata de l’utilisateur. Pour en savoir plus, consultez Comprendre le fonctionnement des métadonnées dans les profils d’utilisateur. Chaque champ doit avoir un name et un placeholder, et vous pouvez aussi fournir une URL pour icon. Vous pouvez également définir la valeur initiale 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, défini au moyen de l’option type, dont la valeur par défaut est "text".

Option additionalSignUpFields destinée uniquement aux inscriptions avec base de données

Les additionalSignUpFields sont destinés uniquement aux inscriptions avec 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 s’affichent sous les champs de saisie standards de l’inscription, dans l’ordre où ils sont fournis.

Champs de texte

Les champs de texte sont le type par défaut des champs d’inscription supplémentaires. Notez qu’il est également 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 spécifiez pas de validator, le champ de texte sera obligatoire. Si vous voulez rendre le champ de texte facultatif, utilisez un validateur qui renvoie 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 pouvant ê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 liste déroulante

Le champ d’inscription type: "select" vous permet d’utiliser des éléments de liste déroulante 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 des champs select doivent respecter le format suivant : {label: “chaîne non vide”, value: “chaîne non vide”}, 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 arg 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 arg au lieu de null
      cb(null, prefill);
    }
  }]
}

Champ de type 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 des modèles de courriel, par exemple pour 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 ces modèles.

allowLogin

Lorsque cette option est définie sur false, le widget n’affiche pas l’écran de connexion. Cela est utile si vous voulez utiliser le widget uniquement pour l’inscription (les onglets de connexion et d’inscription de l’écran d’inscription seront masqués) ou pour réinitialiser des mots de passe (le bouton de retour de l’écran de mot de passe oublié sera masqué). Dans ces cas, vous devrez peut-être aussi préciser les options initialScreen, allowForgotPassword et allowSignUp. La valeur par défaut est true.

allowLogin: false

allowForgotPassword

Lorsque cette option est définie sur false, allowForgotPassword masque le lien « Vous avez oublié 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 de base de données avec une base de données personnalisée qui ne dispose pas de script de changement de mot de passe, l’écran Mot de passe oublié ne sera pas disponible.

allowForgotPassword: false

allowSignUp

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

Gardez également à 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 suffisamment 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 tableau de bord, dans les paramètres de la connexion.

allowSignUp: false

defaultDatabaseConnection

Indique la connexion de base de données à utiliser lorsqu’il y en a plusieurs.

defaultDatabaseConnection: 'test-database'

initialScreen

Le nom de l’écran qui s’affiche à l’ouverture du widget. Les valeurs valides 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

Détermine si l’utilisateur se connectera automatiquement 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’une chaîne non vide est définie, l’utilisateur est redirigé vers l’URL fournie lorsqu’il clique sur le lien « Vous avez oublié votre mot de passe ? » dans l’écran de connexion.

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

showTerms

Lorsqu’elle est définie à true, cette option affiche la chaîne languageDictionary.signUpTerms. 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 modalités et conditions; elle doit être cochée avant l’inscription. Les modalités et conditions peuvent être définies à l’aide de l’option languageDictionary. Cette option ne prend effet que pour les utilisateurs qui s’inscrivent avec des connexions de base de données. La valeur par défaut est false.

mustAcceptTerms: true

prefill

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

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

signUpLink

Définissez l’URL à utiliser lorsque vous cliquez sur le bouton d’inscription. Lorsqu’elle est définie avec 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 dans une connexion de 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; la définition de cette option limitera les connexions à l’un ou à l’autre.

usernameStyle: 'username'

Options d’entreprise

defaultEnterpriseConnection

Spécifie la connexion d’entreprise qui permet de se connecter à l’aide d’un nom d’utilisateur et d’un mot de passe. Elle sera utilisée s’il y en a plus d’une de disponible ou s’il existe une connexion de base de données. Si un defaultDatabaseConnection est fourni, la connexion de 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 du courriel. La valeur par défaut est true.

defaultADUsernameFromEmailPrefix: false

Options de 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 afin d’authentifier l’utilisateur. Les valeurs disponibles pour les connexions par courriel sont code et link. La valeur par défaut est code. Les connexions SMS Passwordless utilisent toujours code.

passwordlessMethod: code

Autres options

configurationBaseUrl

Remplace l’URL de base de la configuration de l’application. Par défaut, le domaine fourni est utilisé. Cette option n’est nécessaire que si votre cas d’utilisation exige que votre application ne suive pas le comportement par défaut.

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

languageBaseUrl

Remplace l’URL source des traductions de langue fournies par Auth0. Par défaut, cette option utilise l’URL du CDN d’Auth0 https://cdn.auth0.com, car c’est là que sont stockées toutes les traductions fournies. En spécifiant 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 de hachage de l’URL de rappel après l’authentification de l’utilisateur. Par défaut, sa valeur est true.

hashCleanup: false

connectionResolver

Lorsqu’elle est utilisée, cette fonction fournit un point d’extension qui permet de choisir la connexion à utiliser en fonction des informations du nom d’utilisateur.

Prend username, context et callback comme paramètres. La fonction de rappel attend un objet comme celui-ci : {type: 'database', name: 'connection name'}. Cela fonctionne uniquement pour les connexions de base de données. Gardez à l’esprit que cette fonction de résolution s’exécute lors de l’événement onSubmit du formulaire; gardez-la donc simple et rapide.

Il s’agit d’une fonctionnalité 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 — pour tenir compte d’un décalage d’horloge dans l’expiration des ID Token. En règle générale, cette valeur ne dépasse pas une ou deux minutes.

leeway: 30