Manuel de référence

# Authentication Component

# Initialisation

Le composant AnkAuthent est défini dans la bibliothèque "@anakeen/user-interfaces/components/lib/AnkAuthent.esm".

Exemple d'initialisation

<template>
  <div>
    <ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />
  </div>
</template>
<script>
  import AnkAuthent from "@anakeen/user-interfaces/components/lib/AnkAuthent.esm";
  export default {
    components: {
      AnkAuthent
    }
  };
</script>

Aperçu du composant

authentDefault

# Description

# Fonctionnement général

Ce composant est un formulaire permettant de lancer une requête de connexion et d'accéder à la page d'accueil d'Anakeen Platform par défaut. La connexion est annulable et, dans ce cas, l'utilisateur reste déconnecté et n'est pas redirigé.

Le formulaire est composé :

  • D'un champ pour le login du compte
  • D'un champ pour le mot de passe du compte
  • D'un bouton de connexion
  • D'un menu déroulant permettant de choisir la langue de navigation. La valeur sélectionnée déterminera la langue des labels du formulaire
  • D'un bouton d'aide
  • D'un bouton permettant à l'utilisateur de réinitialiser son mot de passe

# Mot de passe oublié

Si l'utilisateur a oublié son mot de passe, il lui suffit de cliquer sur le bouton Mot de passe oublié ? et de rentrer son identifiant ou son mot de passe dans la boîte de dialogue ouverte.

authentDefault

Un mail lui sera envoyé à l'adresse enregistrée dans son compte. Le contenu du mail propose à l'utilisateur de suivre un lien lui permettant de réinitialiser son mail. En suivant ce lien, l'utilisateur est redirigé vers l'interface de changement de mot de passe ci-dessous :

authentDefault

En remplissant les champs puis en cliquant sur le bouton de réinitialisation de mot de passe, un message de confirmation ainsi qu'un bouton de redirection est présenté.

# Propriétés

# authentLanguage (String, default: "fr_FR, en_US")

Définit les options de langue dans Anakeen Platform.Ces options seront accessibles depuis le menu déroulant. Par défaut, la valeur est fr_FR, en_US.

authentDefault

# defaultLanguage (String, default: "fr_FR")

Définit la langue utilisée par défaut d'Anakeen Platform. Cette propriété déterminera la valeur par défaut du menu déroulant ainsi que la langue des labels. Une valeur auto définira la langue d'Anakeen Platform en fonction de la langue utilisée par le navigateur. La valeur par défaut de cette propriété est fr_FR.

# Événements

# beforeLogin

Événement se déclenchant lorsque l'utilisateur clique sur le bouton de connexion, avant que la requête de connexion ne soit envoyée sur le serveur. Il transmet les informations de connexion (login, langue et url de redirection). L'événement peut être intercepté pour modifier les données transportées avant l'envoi de ces paramètres sur le serveur. La fonction preventDefault() de l'événement permet d'annuler la connexion.

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
        "redirect": "/"
    }

Cet exemple permet de rediriger l'utilisateur vers l'URL personnalisée /myurl dans le cas où l'authentification est acceptée.

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeLogin", event => {
  let data = event.detail[0];
  data.redirect = "/myurl";
});

Cet exemple permet d'annuler la connexion

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeLogin", event => {
  event.preventDefault();
});

# afterLogin

Événement se déclenchant lorsque la requête de connexion a été transmise au serveur et que l'authentification a été acceptée. Il transmet les informations de connexions (login, langue et url de redirection).

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
        "redirect": "/"
    }

Cet exemple permet d'afficher les données de connexion

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("afterLogin", event => {
  alert(JSON.stringify(event.detail[0]));
});

# beforeRequestResetPassword

Événement se déclenchant lorsque l'utilisateur clique sur le bouton de demande de changement de mot de passe, avant que la requête ne soit envoyée sur le serveur. Il transmet les informations de connexion (login et langue). L'événement peut être intercepté pour modifier les données transportées avant l'envoi de ces paramètres sur le serveur. La fonction preventDefault() de l'événement permet d'annuler la connexion.

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
    }

Cet exemple permet de préfixer le login avec "USER_" avant l'envoi de la requête de changement de mot de passe

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeRequestResetPassword", event => {
  let data = event.detail[0];
  data.login = "USER_" + data.login;
});

Cet exemple permet d'annuler la demande de changement de mot de passe

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeResetPassword", event => {
  event.preventDefault();
});

# afterRequestResetPassword

Événement se déclenchant lorsque la requête de demande de changement de mot de passe a été transmise au serveur et acceptée. Il transmet les informations de connexion (login et langue).

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
    }

Cet exemple permet d'afficher les données de l'utilisateur

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("afterRequestResetPassword", event => {
  alert(JSON.stringify(event.detail[0]));
});

# beforeApplyResetPassword

Événement se déclenchant lorsque l'utilisateur clique sur le bouton de changement de mot de passe, avant que la requête ne soit envoyée sur le serveur. Il transmet les informations de connexion (login et langue). L'événement peut être intercepté pour modifier les données transportées avant l'envoi de ces paramètres sur le serveur. La fonction preventDefault() de l'événement permet d'annuler la connexion.

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
    }

Cet exemple permet de préfixer le login avec "USER_" avant l'envoi de la requête de changement de mot de passe

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeApplyResetPassword", event => {
  let data = event.detail[0];
  data.login = "USER_" + data.login;
});

Cet exemple permet d'annuler la demande de changement de mot de passe

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("beforeResetPassword", event => {
  event.preventDefault();
});

# afterApplyResetPassword

Événement se déclenchant lorsque la requête de changement de mot de passe a été transmise au serveur et acceptée. Il transmet les informations de connexion (login et langue).

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "language": "FR_fr",
        "login": "user",
    }

Cet exemple permet d'afficher les données de l'utilisateur

<ank-authent ref="authentComponent" default-language="fr_FR" authent-languages="fr_FR, en_US" />

const authentComponent = this.$refs.authentComponent;
authentComponent.$on("afterApplyResetPassword", event => {
  alert(JSON.stringify(event.detail[0]));
});

← Identity →