Options de configuration de Lock

Lock peut être configuré par le paramètre options envoyé au constructeur. Ces options peuvent modifier le comportement du gadget logiciel Lock, la façon dont il gère les connexions, les champs d’inscription supplémentaires dont vous avez besoin pour votre projet, les valeurs de langue et de texte, les couleurs et les images du gadget logiciel, et bien plus encore. Consultez l’index ci-dessous si vous savez ce que vous recherchez, ou parcourez les options pour plus de détails.

Ces options sont groupées dans la propriété theme de l’objet options.

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

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

allowAutocomplete: true

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

Réglez allowPasswordAutocomplete à true pour la prise en charge du gestionnaire de mots de passe et pour éviter d’autres cas de comportement indésirable.

allowPasswordAutocomplete: true

Cette option détermine s’il faut ou non ajouter une case à cocher à l’interface utilisateur qui, lorsqu’elle est sélectionnée, permettra à l’utilisateur d’afficher son mot de passe lors de sa saisie. L’option par défaut est false.

allowShowPassword: true

Lock avec le réglage allowShowPassword sur true et basculez pour afficher le mot de passe :

Tableau de connexions qui seront utilisées pour les actions de signin|signup|reset. Par défaut pour toutes les connexions activées.

allowedConnections: ['Username-Password-Authentication']

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

allowedConnections: ['qraftlabs.com']

Exemples de allowedConnections:

Détermine si Lock sera fermé automatiquement après une connexion réussie. La valeur par défaut est false. Si Lock n'est pas closable, il ne sera pas fermé, même si cette option est définie sur true.

autoclose: true

Si c’est true, le focus est défini sur le premier champ du gadget logiciel. Par défaut sur false lorsqu’il est rendu sur un appareil mobile, ou si une option container est fournie; par défaut sur true dans tous les autres cas.

autofocus: false

Par défaut, Gravatar est utilisé pour récupérer l’avatar et le nom d’affichage de l’utilisateur, mais vous pouvez les obtenir de n’importe où avec l’option avatar.

var options = {
  avatar: {
    url: function(email, cb) {
      // Obtain the avatar url for the email input by the user, Lock
      // will preload the image before displaying it.
      // Note that in case of an error you call cb with the error in
      // the first arg instead of `null`.
      var url = obtainAvatarUrl(email);
      cb(null, url);
    },
    displayName: function(email, cb) {
      // Obtain the display name for the email input by the user.
      // Note that in case of an error you call cb with the error in
      // the first arg instead of `null`.
      var displayName = obtainDisplayName(email);
      cb(null, displayName);
    }
  }
};

Ou, si vous ne souhaitez afficher aucun avatar, passez tout simplement la valeur null.

avatar: null

Comportement par défaut avec Gravatar :

Détermine si le verrou peut être fermé ou non. Lorsqu’une option de container est fournie, sa valeur est toujours false, sinon elle est true par défaut.

closable: false

L'identifiant de l’élément html où le gadget logiciel sera affiché.

Cela fait apparaître le gadget logiciel en ligne dans votre div plutôt que dans une fenêtre contextuelle modale.

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

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

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

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

Affiche un message éclair error ou de success lorsque Lock est affiché. Cet objet a les propriétés suivantes :

• type {String}  : Le type de message, les types supportés sont error, info, et success

• text {String} : Le texte à afficher.

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

Spécifie la langue du gadget logiciel. La valeur par défaut est « en ». Consultez le répertoire d’internationalisation pour une liste actuelle des langues fournies.

language: 'es'

Permet de personnaliser chaque élément de texte affiché dans Lock. La valeur par défaut est {}. Voir Spécification du dictionnaire de langue en anglais pour la liste complète des valeurs LanguageDictionary pouvant être modifiées avec cet objet.

var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};

De plus, consultez la page Personnalisation des messages d’erreur ou la page Internationalisation pour plus d’informations sur l’utilisation de l’option LanguageDictionary.

Permet de personnaliser l’emplacement de la fenêtre contextuelle dans l’écran. Toute fonctionnalité de position et de taille autorisée par window.open est acceptée. La valeur par défaut est {}.

Options pour les fonctionnalités window.open. Cela ne s’applique que si la redirection est définie sur false.

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

Détermine s’il faut ou non afficher un écran qui vous permet de vous connecter rapidement avec le compte que vous avez utilisé la dernière fois. Demande des données d’authentification unique (SSO) et active un message Dernière fois que vous vous êtes connecté avec. Par défaut sur true. Ces informations proviennent de la session Auth0 de l’utilisateur, cette capacité durera donc aussi longtemps que sa session Auth0 (qui est configurable).

rememberLastLogin: false

Pour les nouveaux locataires Seamless SSO est automatiquement activé. Une fois cette option activée, l’option RememberLastLogin ne sera pas pertinente, car si une session est en place, la page de connexion universelle ne sera pas affichée du tout. L’utilisation de Seamless SSO est fortement recommandée, car elle offre une expérience d’authentification transparente : les utilisateurs se connectent une seule fois et n’auront pas à saisir à 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 Dernière fois que vous vous êtes connecté avec ne sera pas disponible dans les circonstances suivantes :

• Vous avez utilisé Lock sur une page de connexion hébergée avec la session établie à l’aide de l'authentification sans mot de passe.

• Vous avez utilisé Lock dans un scénario de connexion intégré où responseType: code (indiquant le flux de code d’autorisation, utilisé pour les applications Web standard).

Détermine si un globalMessage doit ou non défiler dans la fenêtre d’affichage de l’utilisateur. Par défaut sur vrai.

scrollGlobalMessagesIntoView: false

Ces options sont groupé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"
      }
    }
  }
};

Permet la personnalisation des boutons dans Lock avec des connexions OAuth2 personnalisées. Chaque connexion personnalisée dont vous souhaitez personnaliser le bouton doit être répertoriée par nom, chacune avec son propre ensemble de paramètres. Les paramètres personnalisables sont énuméré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} : couleur d’arrière-plan du bouton. La valeur par défaut est #eb5424.

• foregroundColor {String} : 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",
      }
    }
  }
};

Cette option indique si le bouton de soumission doit avoir ou non une étiquette et la valeur par défaut est true. Lorsqu’il est défini sur false, une icône s’affichera à la place.

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

Si l’étiquette est définie sur true, ce qui est la valeur par défaut, le texte de l’étiquette peut être personnalisé via l’option languageDictionary.

La valeur de logo est une URL pour une image qui sera placée dans l’en-tête de Lock, et par défaut le logo d’Auth0. Il a une hauteur maximale recommandée de 58 pixels pour une meilleure expérience utilisateur.

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

La propriété primaryColor définit la couleur primaire du Lock; toutes les couleurs utilisées dans le gagdet logiciel seront calculées à partir de cette couleur. Cette option est utile lorsque l’on fournit un logo personnalisé, afin de s’assurer que toutes les couleurs s’harmonisent 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'
  }
};

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

La valeur par défaut de la permission utilisée 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' ]
   }
  }
};

L’option audience indique l’API qui consommera le jeton d’accès reçu après l’authentification.

var options = {
  auth: {
    audience: 'https://{yourDomain}/userinfo',
  }
}

Lorsque autoParseHash est défini sur true, Lock analysera la chaîne window.location.hash une fois instanciée. S’il est défini sur false, vous devrez reprendre manuellement l’authentification à l’aide de la méthode summaryAuth.

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

Cette option vous permet de définir les permissions à envoyer à la connexion oauth2/média social pour l’authentification.

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

Une liste de domaines particuliers pour vos connexions aux médias sociaux peut être obtenue auprès du fournisseur en question. Par exemple, la référence Facebook for Developers a une liste d’autorisations distinctes qui peuvent être demandées pour votre connexion.

Vous pouvez envoyer des paramètres lors du démarrage d’une connexion en les ajoutant à l’objet options. L’exemple ci-dessous ajoute un paramètre state avec une valeur égale à foo et ajoute également un paramètre scope (qui inclut la permission, puis les attributs demandés).

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

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

La valeur par défaut est true. Lorsqu’il est défini sur true, le mode de redirection sera utilisé. S’il est défini sur false, le mode fenêtre contextuelle est choisi.

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

L’URL Auth0 de redirectiion après l’authentification. La valeur par défaut est le lien vide "" (pas d’URL de redirection).

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

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

Doit être défini sur « form_post » si vous souhaitez que le code ou le jeton soit transmis via une requête HTTP POST à ​​redirectUrl, au lieu d’être inclus dans ses parties de requête ou de fragment.

Sinon, cette option doit être omise et est omise par défaut.

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

La valeur responseType doit être définie sur « token » pour les applications à page unique et sur « code » dans le cas contraire. La valeur par défaut est « code » lorsque redirectUrl est fourni, et « token » dans le cas contraire.

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

Lorsque responsetype est défini sur code, Lock n’affichera jamais un message Dernière fois que vous vous êtes connecté avec et demandera toujours à l’utilisateur ses informations d’identification.

La valeur par défaut est vrai. Lorsqu’il est défini sur true, il active l'authentification unique dans Lock.

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

Des champs de saisie supplémentaires peuvent être ajoutés à l’écran d’inscription avec l’option additionalSignUpFields. Chaque option ajoutée de cette manière sera ensuite ajoutée aux user_metadata de cet utilisateur. Pour en savoir davantage, consultez Comprendre le fonctionnement des métadonnées dans les profils utilisateurs. Chaque entrée doit avoir un name et un paramètre fictif, et l’URL d’une icône peut également être fournie. De plus, la valeur initiale peut être fournie avec l’option prefill, qui peut être un lien avec la valeur ou une fonction qui l’obtient. Les autres options dépendent du type du champ, qui est défini via l’option type et par défaut « texte ».

Les nouveaux champs sont affichés sous les champs de saisie de connexion habituels dans l’ordre dans lequel ils sont fournis.

Les champs de texte sont le type par défaut de champ de connexion supplémentaire. À noter qu’une fonction validator peut également être fournie.

var options = {
  additionalSignUpFields: [{
    name: "address",
    placeholder: "enter your address",
    // The following properties are optional
    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" // optional
      };
    }
  },
  {
    name: "full_name",
    placeholder: "Enter your full name"
  }]
}

Si vous ne spécifiez pas de validator, le champ de texte sera obligatoire. Si vous souhaitez 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 le storage: 'root'. Seul un sous-ensemble de valeurs peut être stocké de cette manière. La liste des attributs pouvant être ajoutés à votre profil root est ici. Par défaut, chaque champ de connexion supplémentaire est stocké dans l’objet user_metadata.

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

Le champ de connexion type: "select" vous permettra d’utiliser des éléments de sélection parmi lesquels l’utilisateur pourra 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"}
    ],
    // The following properties are optional
    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 via une fonction :

var options = {
  additionalSignUpFields: [{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: function(cb) {
      // obtain options, in case of error you call cb with the error in the
      // first arg instead of null
      cb(null, options);
    },
    icon: "https://example.com/assests/location_icon.png",
    prefill: function(cb) {
      // obtain prefill, in case of error you call cb with the error in the
      // first arg instead of null
      cb(null, prefill);
    }
  }]
}

Le troisième type de champ de connexion personnalisé est type: "checkbox". La valeur préremplissage peut déterminer 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"
  }]
}

Le champ de connexion type "hidden" : vous permettra d’utiliser une entrée cachée avec une valeur fixe.

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

Certains cas d’utilisation peuvent être en mesure d’utiliser des données additionalSignUpFields pour les modèles de courriels, comme une option pour les préférences linguistiques, dont la valeur pourrait ensuite être utilisée pour définir la langue des communications par courriel modélisées.

Lorsqu’il est défini sur false, le gadget logiciel n’affichera pas l’écran de connexion. Ceci est utile si vous souhaitez utiliser le gadget logiciel uniquement pour les inscriptions (les onglets de connexion et d’inscription dans l’écran d’inscription seront masqués) ou pour réinitialiser les mots de passe (le bouton de retour dans l’écran de mot de passe oublié sera masqué). Dans de tels cas, vous devrez peut-être également spécifier les options initialScreen, AllowForgotPassword et AllowSignUp. La valeur par défaut est true.

allowLogin: false

Lorsqu’il est défini sur false, allowForgotPassword masque le lien « Vous ne vous souvenez pas de votre mot de passe? » dans l’écran de connexion, rendant l’écran Mot de passe oublié inaccessible. La valeur par défaut est vrai. Si vous utilisez une connexion à une base de données personnalisée qui ne dispose pas d’un script de modification du mot de passe, l’écran Mot de passe oublié ne sera pas disponible.

allowForgotPassword: false

Lorsqu’il est défini sur false, masque les onglets de connexion et d’inscription dans l’écran de connexion, rendant l’écran de connexion inaccessible. Par défaut sur vrai. Gardez à l’esprit que si la connexion à la base de données a désactivé les inscriptions ou si vous utilisez une base de données personnalisée qui ne dispose pas de script de création, l’écran de connexion ne sera pas disponible.

Gardez également à l’esprit que cette option contrôle uniquement l’apparence côté client et n’arrête pas complètement les nouvelles connexions de visiteurs anonymes déterminés. Si vous souhaitez empêcher complètement la connexion de nouveaux utilisateurs, vous devez utiliser l’option Disable Sign Ups (Désactiver les connexions) dans le tableau de bord, dans les paramètres de connexion.

allowSignUp: false

Spécifie la connexion à la base de données qui sera utilisée lorsqu’il y en a plusieurs disponibles.

defaultDatabaseConnection: 'test-database'

Le nom de l’écran qui sera affiché à l’ouverture du gadget logiciel. Les valeurs valides sont connexion, s’inscrire et Mot de passe oublié. Si cette option n’est pas spécifiée, le gadget logiciel affichera par défaut le premier écran disponible dans cette liste.

initialScreen: 'forgotPassword'

Détermine si l’utilisateur sera automatiquement connecté ou non après une inscription réussie. Par défaut sur vrai.

loginAfterSignUp: false

Définissez l’URL d’une page qui permet à l’utilisateur de réinitialiser son mot de passe. Lorsqu’il est défini sur un lien non vide, l’utilisateur sera redirigé vers l’URL fournie lorsqu’il cliquera sur le lien « Vous ne vous souvenez pas de votre mot de passe? dans l’écran de connexion.

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

Lorsqu’il est défini sur true, affiche le lien languageDictionary.signUpTerms. Par défaut sur vrai.

showTerms: false

Une fois définie sur true, affiche une case à cocher à côté des modalités qui doivent être vérifiées avant de procéder à l’inscription. Les modalités peuvent être spécifiées à l’aide de l’option languageDictionary. Cette option ne prendra effet que pour les utilisateurs s’inscrivant avec des connexions à la base de données. La valeur par défaut est false.

mustAcceptTerms: true

Permet de définir la valeur initiale des entrées courriel et/ou nom d’utilisateur. En cas d’omission, aucune valeur initiale ne sera fournie.

var options = {
  prefill: {
    email: "someone@auth0.com",
    username: "someone",
    phoneNumber: "+1234567890"
  }
};

Définissez l’URL à demander en cliquant sur le bouton d’inscription. Lorsqu’elle est définie sur un lien non vide, cette option force Permettre l’inscription à true.

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

Détermine ce qui sera utilisé pour identifier l’utilisateur pour une connexion à la base de données dont l’option require_username est défini (s’il n’est pas défini, l’option usernameStyle sera ignorée). Les valeurs possibles sont "username" and "email". Par défaut, username et email sont autorisés; la définition de cette option limitera les connexions à utiliser l’un ou l’autre.

usernameStyle: 'username'

Spécifie la connexion d’entreprise qui permet de se connecter à l’aide d’un nom d’utilisateur et d’un mot de passe qui seront utilisés lorsqu’il y en a plusieurs disponibles ou qu’il existe une connexion à une base de données. Si defaultDatabaseConnection est fourni, la connexion à la base de données sera utilisée et cette option sera ignorée.

defaultEnterpriseConnection: 'test-database'

Résolvez le nom d’utilisateur de l’espace réservé AD à partir du préfixe du courriel. Par défaut sur vrai.

defaultADUsernameFromEmailPrefix: false

Lorsque vous utilisez Auth0LockPasswordless avec une connexion de messagerie, vous pouvez utiliser cette option pour choisir entre l’envoi d’un code ou d’un lien magique pour authentifier l’utilisateur. Les valeurs disponibles pour les connexions de messagerie sont code et lien. Par défaut à code. Les connexions SMS sans mot de passe utiliseront toujours code.

passwordlessMethod: code

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

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

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

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

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

hashCleanup: false

Lorsqu’il est utilisé, fournit un point d’extensibilité pour permettre de choisir la connexion à utiliser en fonction des informations du nom d’utilisateur.

Possède les paramètres username, context, et callback. Le rappel attend un objet comme : {type: 'database', name: 'connection name'}. Cela ne fonctionne que pour les connexions à la base de données. Gardez à l’esprit que ce résolveur s’exécutera dans l’événement onSubmit du formulaire, alors restez simple et rapide.

Il s’agit d’une fonctionnalité bêta. Si vous trouvez un bogue, veuillez le signaler via une issue sur GitHub.

L’option leeway peut être définie sur un nombre entier - une valeur en secondes - qui peut être utilisée pour tenir compte du décalage d’horloge dans les expirations des jetons d’ID. Généralement, la valeur ne dépasse pas une minute ou deux au maximum.

leeway: 30