Le login

Principe

Le login XTEND est basé sur l'appel d'un web service via une action utilisateur.

Ce document décrit la mise oeuvre de la fonction de login dans le site de référence ASAMPLE.

Dans notre exemple, le sous programme de login valide la signature et renvoie des informations sur le compte utilisateur :

• Son identité qui sera stockée dans l'entité session
• La liste des adresse d'expédition qui sera stockée sous la forme d'entités de type 'Action' afin de pouvoir être affichées

Si votre site XTEND a été créé à partir d'une copie du site ASAMPLE les fiches de paramétrages sont déjà créées.

Sinon vous pouvez soit les créer soit les copier une à une à partir du site ASAMPLE avec le bouton d'action X3 'Copie'.

Procédure

1. Création d'une 'page web' (ALOGIN) pour la saisie du code utilisateur/Mot de passe.
    Cette page sera affichée en mode sécurisé (HTTPS)

2. Création d'une interface (AXTDLOGIN) pour l'appel du web service de login

3. Création de entités (ASHIPADDR) pour stocker les information du compte utilisateur

4. Création d'une 'action Web' de type 'Login' (ASESSLOGIN)
    Paramètres en entrée : le code utilisateur et le mot de passe.
    Ces paramètres seront 'mappés' sur les paramètres en entrée du web service.

5. Création d'un token 'lien dynamique' (ADLKLOGIN)
    Inséré dans la page HTML (bouton 'Valider') pour déclencher l'action utilisateur

6. Création d'une 'page web' (AUSERACCOUNT)
    Affiche les informations du compte client renvoyées par le sous-programme de login
    Cette page sera affichée en mode sécurisé (HTTPS)

Gestion du login pour le site ASAMPLE

Fonctionnement du traitement de login pour le site ASAMPLE

Les informations de login XTEND sont gérés dans la fiche utilisateur X3.

Un utilisateur XTEND est déclaré comme un utilisateur X3 pour lequel on a coché la case à cocher 'Connexion site web'.

Son profil Safe X3 Was est récupéré et alimenté dans l'entité ASESSION.AUSERPROFILE.

Paramètrage X3

Etape 1 - Création de l'interface

Le traitement L4G

Le fichier AYTXTLOGIN.src contient les sources du programme de login.

Les données du compte utilisateur sont programmées 'en dur' dans le traitement.

Les compte sage/sage permet d'effectuer le login sans contrôle du mot de passe.

Exemple
    Traitement du login(info) du site ATEMPLATE

La fiche sous-programme

La fiche sous-programme AYTXTLOGIN décrit les paramètres du sous-programme.

Voir le document action utilisateur pour plus d'information sur le programme de login.

Les autres paramètres (AX*) sont les paramètres obligatoire qui doit implémenter tout sous-programme de login XTEND.

Avant de continuer il faut s'assurer que le sous-programme est bien publié avec le nom de publication AXTDLOGIN

La fiche Interface

   1. Créer une fiche Interface AXTDLOGIN de type 'Action sous-programme'

   2. Sélectionner le nom de publication AXTDLOGIN

   3. Vérifiez que l'accès n'est pas protégé

   4. Cocher l'affichage de tous les messages

   5. Enregistrer et valider

   6. Générer l'accès

•  Dans notre exemple nous avons regroupé les paramètres qui concernent les adresses d'expéditions (SHIP*) sous le groupe de nom X3LOG. On aurait pu utiliser un autre groupe si la dimension était différente du groupe contenant les autres paramètres AX3*.
• Les autres paramètres (AX*) sont les paramètres obligatoires qui doivent implémenter tout sous-programme de login XTEND.
• AXLOGCOD / AXLOGVAL : Informations complémentaires sur l'utilisateur, de type clé/valeur, qui seront stockées dans la session XTEND (bloc ASESSION).
  Ex: NOM/DUPONT,TEL/0476232526,COMPANY/SAGE...

   7. Générer tous les champs de l'interface
      Voir le menu 'Outils/Création token champ'

Champs non décrits dans l'interface

Les champs concernant l'identité de l'utilisateur sont passés sous la forme de liste clé/valeur (AXPARCOD/AXPARVAL) et ne sont pas visibles dans les paramètres du sous programme (NAME, FIRSTNAME, PHONE, EMAIL).

Il est donc nécessaire de déclarer ces champs via la fonction XTEND 'Token champ'.

Etape 2 - Création des entités

Identité utilisateur

Les champs portés par les paramètres AXPARCOD/AXPARVAL (clé/valeur) sont ajoutés automatiquement par le serveur XTEND dans la session utilisateur ASESSION.

L'utilisation de clé/valeur permet de limiter le nombre de paramètres du sous-programme.

Adresses de livraison

Créer l'entité ASHIPADDR de type Action.

Voir le menu 'Outils/Aide au remplissage'

Cette entité sera ensuite utilisée dans le mapping retour de l'action de login.

Etape 3 - Création de l'action web

Déclaration des paramètres

Créer une action ASESSLOGIN de type Login avec pour paramètres les champs AXUSERCODE et AXPWD en saisie.

Suppression en début'
    décoché: pour supprimer les entités seulement si le login est validé.

Suivi de l'activité
    Oui : pour que chaque appel de l'action doit enregistré dans le fichier de log

Actif sur reload
    Non : pour ne pas rapeller le login si l'utilisateur appuie sur F5

Mapping des paramètres en entrée

Il s'agit de faire correspondre les champs XTEND avec les paramètres d'appel du web service de login.

Dans notre cas nous devons faire uniquement un mapping des paramètres de l'action AXUSERCODE, AXPWD.

Pour 'mapper' les paramètres de l'action on ne renseigne pas le code de l'entité.

Mapping des paramètres en sortie

Il s'agit de créer l'entité de type Action ASHIPADDR à partir des données renvoyées par X3.

Cette entité est de type Multi car elle est basée sur un groupe de paramètres (AXLOG_PAR) multi-dimensionné.

Les entités de type Action sont stockées en mémoire pendant toute la durée de la session utilisateur.

Elles sont recréées automatiquement à chaque appel de l'action.

Etape 4 - Création du lien dynamique

Le lien dynamique ADLKLOGIN est le token qui sera inséré dans le bouton (tag <input>) de login. Il permet de définir la page de destination (Page courante dans notre cas), d'associer l'action ASESSLOGIN et de valoriser les paramètres.

Paramètres généraux

Suivi de l'activité
    Oui : pour que chaque clic sur le lien soit enregistré dans le fichier de log

Forcer le mode http post
    Non : Comme une action avec paramètres est associée au lien dynamique, la requête sera envoyée automatiquement en mode POST

Page courante
    Oui : Le résultat (information utilisateur) est affiché dans la page courante

Action
    Code de l'action à déclencher (ASESSLOGIN)

Contrôler les champs web
    Oui:  pour le paramètre code utilisateur pour contrôler automatiquement les champs en saisie obligatoire 
    Non:  pour le paramètre mot de passe car autorise la saisie de mots de passe vides

Paramètres de l'action

Il s'agit de déclarer les paramètres de l'action de login et d'indiquer la manière dont on souhaite les valoriser.

AXUSERCODE, AXPWD
    'Chp Web Oblig' : Saisie obligatoire par un champ web
    'Champ web' : contient le nom du tag input (attribut name)

Le contrôle de la saisie n'est actif que si l'option 'Onglêt Général/Contrôler champs web' est cochée.

La requête sera postée vers le serveur XTEND seulement si:

• l'utilisateur a valorisé tous les champs obligatoires
• les données saisies sont correctes pour les champs de type date et numérique.

Le contrôle est effectué par la bibliothèque JavaScript d'XTEND.

Etape 5 - Création des tokens bloc

Le token bloc ABLKSHIPADDR est utilisé pour afficher les entités ASHIPADDR qui représentent les adresses de livraison.

Type
    Multi enregistrements : Effectue une itération sur toutes les entités ASHIPADDR et positionne chaque entité au sommet (top) de la pile du contexte de données puis exécute les tokens fils

Aucune donnée
    Ne rien afficher : Si l'entité ASHIPADDR n'existe pas le bloc et les tokens 'fils' sont ignorés

Entité
    ASHIPADDR : Code de l'entité à afficher

Ligne par bloc
    10 : Affiche 10 entités ASHIPADDR maximum dans la page

Cellule par ligne
    1 : Affiche une entité par ligne

Style par ligne
    oddLine et evenLine : Styles à définir dans le fichier 'my.css' pour alterner la couleur de fond des lignes

Il n'est pas possible de définir des critères de sélection sur les blocs qui sélectionnent des entités stockées en mémoire du serveur XTEND, c'est à dire de type session ou Action. Le bloc sélectionne automatiquement toutes les entités.

Les critères de sélection s'appliquent uniquement qu'aux entités de type 'Accès données'.

Etape 6 - Création des pages web

Login

Créer la page web ALOGIN.

Page par défaut
    Associer le fichier login.html.
    Le fichier doit être présent sur le serveur X3 et peut être sélectionné par la touche F12.

Protocole
    Https : Pour indiquer qu'il faut crypter les données de la requête (Voir configuration HTTPS)

Bloc principal et bloc de fond
    Aucun

Accès protégé
    Non : Pour indiquer que cette page est en accès libre (anonyme)

Suivi de l'activité
    Oui : Pour que l'affichage de la page soit enregistré dans le fichier de log

Compte utilisateur

Créer la page web AUSERACCOUNT.

Page par défaut
    Associer le fichier account.html

Protocole
    Https : Pour indiquer qu'il faut crypter les données de la requête

Accès protégé
    Oui : Pour bloquer l'accès à cette page aux utilisateurs anonymes

Suivi de l'activité
    Oui : Pour que l'affichage de la page soit enregistré dans le fichier de log

Etape 7 - Validation du site

Après modification des paramètres X3 il est conseillé de valider l'intégralité du site via la fonction afin de reconstruire le dictionnaire du serveur XTEND via la fonction 'Validation site Web(AYTFCYGEN)'.

Bien vérifier que le site XTEND est publié, c'est à dire le champ 'Publié le site' de la fiche 'Site web' est coché.

Page HTML

Lien vers la page

Insertion du token 'page web' ALOGIN dans le menu gauche pour afficher la page.

    <TD class="button"><A adx="ALOGIN">Login</A></TD>

Pour effectuer un lien simple (sans action ni sélection) vers une page web via un tag ancre il suffit d'insérer un token de type 'page web' dans le tag (<a adx="PageWeb"></a>) afin de limiter le nombre de tokens 'lien dynamiques'.

Gestion du menu login/logout

Le contenu du menu gauche est modifié dynamiquement selon que l'utilisateur soit signé ou non.

Pour cela nous avons utilisé le token lien conditionnéADISPUSERLOGGEDIN qui affiche le contenu du bloc (éléments fils) )si l'utilisateur est signé.

 <!adx="ADISPUSERLOGGEDIN">
 <!--Left menu for authenticated user-->
        <TR>
          <TD class="button">
                <A adx="AUSERACCOUNT">Compte</A>       
          </TD>
        </TR>
        <TR>
          <TD class="button">
                <A adx="ADLKLOGOUT">Logout</A> 
          </TD>
        </TR>
<!adx="ADISPUSERLOGGEDIN">
<!adx="ADISPUSERLOGGEDIN:xnot">
 <!--Left menu for anonymous user-->
        <TR>
          <TD class="button">
                         <A adx="ALOGIN">Login</A>
          </TD>
        </TR>
<!adx="ADISPUSERLOGGEDIN">

Saisie du login

Création des champs de saisie <input type="text"> du code utilisateur et mot de passe.

Si on ne précise pas d'attribut name dans un tag <input> il sera généré automatiquement avec le nom du token adx.

Le paramètre xrc(<input adx="TokenName:xrc">) est utilisé pour réafficher la dernière valeur saisie en cas d'erreur de saisie détectée par le serveur XTEND ou l'application X3. Il permet d'éviter de perte des données saisies.

Pour la saisie du mot de passe on ajoute l'attribut name="AXPWD" car il n'est pas necéssaire d'insérer un token adx pour réafficher le mot de passe.

Création d'un bouton <input type="button"> 'Valider' et insertion du token 'ADLKLOGIN' qui déclenchera l'action de login.

Tous les boutons <input type="button"> qui contiennent des tokens adx doivent être de type 'button'.
Le type submit ne doit pas être utilisé.

  <tr>
    <td><b>Code:</b></td>
    <td> <input name="AXUSERCODE" type="text" adx="AXUSERCODE:xrc"></td>
    <td><input type="button" value="Valider" class="button" adx="ADLKLOGIN"></td>
  </tr>
  <tr>
    <td><b>Mot de passe:</b></td>
    <td colspan="2"> <input type="password" name="AXPWD">    </td>
  </tr>

Le token ADLKLOGIN afiche la page AXUSERACCOUNT si la signature est validée par le sous-programme X3.

Une action utilisateur est considérée comme validée si l'appel du web service n'a renvoyé aucun message d'erreur.

Les messages d'erreur sont postés en L4G via le sous programme ADDMESSERR (Call ADDMESSERR("Message") From AWEB)

L'affichage des messages X3 est effectué via le token AXUSERMSG.

Ex : <span id="userMsg" class="userMsg" adx="aMsgUser"></span>

Affichage compte utilisateur

La page AUSERACCOUNT affiche les informations du compte utilisateur. Les données sont issues du mapping des paramètre renvoyés par le sous-programme de login :

• identité de l'utilisateur stocké ASESSION
• liste des adresses (entité ASHIPADDR)

L'affichage des données d'identité consiste à positionner des token 'champ web' sans préciser le contexte de donnée (token bloc) car les données de la session sont toujours disponibles dans une page web.

  <tr>
        <td><b>Nom:</b></td>
        <td adx="NAME"></td>
  </tr><tr>
        <td><b>Prénom:</b></td>
        <td adx="FIRSTNAME"></td>
  </tr><tr>
        <td><b>EMail:</b></td>
        <td adx="EMAIL"></td>
  </tr><tr>
        <td><b>Tél.:</b></td>
        <td adx="PHONE"></td>
  </tr>

L'affichage de la liste des adresses de livraison consiste à positionner le bloc ABLKSHIPADDR qui effectue une itération sur la liste des adresses et permet de créer autant de lignes dans le tableau que d'adresses dans la liste.

Pour chaque ligne on crée autant de cellules avec un tag adx="SHIP*" que de données à afficher.

<table width="100%" border="1">
    <tr  class="tabTitle">
        <th><small><b>Adresse1</b></small></th>
        <th><small><b>Adresse2</b></small></th>
        <th><small><b>Ville</b></small></th>
        <th><small><b>Code postal</b></small></th>
    </tr>    
<!adx="ABLKSHIPADDR">  
    <tr adx="aLineStyle:xattr=Class">
        <td><small adx="SHIPADR1"></small></td>
        <td><small adx="SHIPADR2"></small></td>
        <td><small adx="SHIPCITY"></small></td>
        <td><small adx="SHIPZIP"></small></td>
    </tr> 
<!adx="ABLKSHIPADDR">         
</table>

Pour afficher les lignes d'un tableau avec des couleurs alternées on place un token adx dans le tag <tr>.
<tr adx="aLineStyle:xattr=Class">

aLineStyle contient le nom de la classe et xAttr=Class indique qu'il faut valoriser l'attribut classe avec la valeur du champ aLineStyle.

Les classes css (aLineStyle) qui sont appliquées aux lignes du tableau sont définies dans la fiche de paramètrage du bloc.

Affichage de la description de la page

<!adx="ABLKDOCHTML">
   <div adx="TEXTE">
   </div>
<!adx="ABLKDOCHTML">