Options de configuration de Lock

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);
    }
  }
};

<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>
```](/docs/images/

<Frame>![Lock Option: Container](/images/fr-ca/cdy7uua7fh8z/5L4S47Yfset2DR9pjcqVrX/1c4d1928cf75acf40129ffd01394bf33/lock-container.png)</Frame>

### flashMessage {Object}

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.

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

var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};
```](/docs/images/

<Frame>![Lock Option: Language Dictionary](/images/fr-ca/cdy7uua7fh8z/5203ofwtagtIKGT4HnIPmk/8ad9cdd151a2cdb18b8a42ee47dbf679/lock-languagedictionary.png)</Frame>

De plus, consultez la page [Personnalisation des messages d’erreur](/docs/fr-ca/customize/login-pages/classic-login/customize-lock-error-messages) ou la page [Internationalisation](/docs/fr-ca/customize/internationalization-and-localization/lock-internationalization) pour plus d’informations sur l’utilisation de l’option `LanguageDictionary`.

### popupOptions {Object}

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

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

var options = {
  theme: {
    labeledSubmitButton: false,
    logo: "https://example.com/assets/logo.png",
    primaryColor: "green",
    authButtons: {
      connectionName: {
        displayName: "...",
        primaryColor: "...",
        foregroundColor: "...",
        icon: "https://.../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",
      }
    }
  }
};

var options = {
  theme: {
    labeledSubmitButton: false
  }
};
```](/docs/images/

<Frame>![Lock Option: Labeled Submit Button](/images/fr-ca/cdy7uua7fh8z/5PNCvsbYa98pKZwWHVPS9S/39cb5ac63818ec5558c451b1e37f735f/lock-theme-labeledsubmitbutton.png)</Frame>

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](#languagedictionary-object-).

### logo {String}

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.

```javascript lines
var options = {
  theme: {
    logo: 'https://example.com/logo.png'
  }
};
```](/docs/images/

<Frame>![Lock UI customization - Logo](/images/fr-ca/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png)</Frame>

### primaryColor {String}

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

```javascript lines
var options = {
  theme: {
    logo: 'https://example.com/logo.png',
    primaryColor: '#31324F'
  }
};
```](/docs/images/

<Frame>![Lock UI customization - primary color](/images/fr-ca/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png)</Frame>

## Options d’authentification

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

```javascript lines
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' ]
   }
  }
};

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

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

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

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

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

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

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

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

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"
  }]
}

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

var options = {
  additionalSignUpFields: [{
    name: "name",
    storage: "root"
  }]
};
```](/docs/images/

<Frame>![Lock Option: Additional Signup Fields](/images/fr-ca/cdy7uua7fh8z/2KPDGZb3caq57caJ90w53k/e092bdb4a4d93589aa006f796ff20fca/lock-additionalsignupfields.png)</Frame>

#### Sélectionnez un champ

Le champ de connexion `type: "select"` vous permettra d’utiliser des éléments de sélection parmi lesquels l’utilisateur pourra choisir une valeur.

```javascript lines
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"
  }]
}

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);
    }
  }]
}

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

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

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