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
Code paramètre |
Groupe |
Dimension |
Nom paramètre |
AXPARCOD |
AX_PAR |
20 |
Code paramètre |
AXPARVAL |
AX_PAR |
20 |
Valeur paramètre |
AXUSERCODE |
AXLOG_PAR |
1 |
Code utilisateur récupéré |
AXPWD |
AXLOG_PAR |
1 |
Mot de passe de l'utilisateur récupéré |
AXUSERPROF |
AXLOG_PAR |
1 |
Profil XTEND récupéré |
AX3SOL |
X3LOG |
10 |
Solution retounée |
AX3FLDR |
X3LOG |
10 |
Dossier retourné |
AX3LANG |
X3LOG |
10 |
Langue retournée |
AX3USER |
X3LOG |
10 |
Utilisateur retournée |
AX3PWD |
X3LOG |
10 |
Mot de passe retourné |
AXLOGCOD |
AXLOG_RES |
50 |
AXLOCOD / AXLOGVAL : Informations complémentaires sur l'utilisateur, de type clé/valeur, qui seront stockées dans la session XTEND (bloc ASESSION). |
AXLOGVAL |
AXLOG_RES |
50 |
Idem |
SHIPADDR1 |
X3LOG |
10 |
informations retounées lié à l'utilisateur |
SHIPADDR2 |
X3LOG |
10 |
idem |
SHIPCITY |
X3LOG |
10 |
idem |
SHIPZIP |
X3LOG |
10 |
idem |
- 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">