Ext JS - Learning Center

Tutorial:Basic Login (French)

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Exemple simple d'authentification
Author: David Fitch (Traduction: Damien Serve)
Published: February 14, 2008 (Traduction: 20/02/2009)
Ext Version: 2.x
Languages: en.png Englishcn.png Chinesefr.png Frenches.png Spanish br.png Portuguese

Ceci est mon premier tutoriel, j'espère qu'il conviendra ! Merci au créateur des exemples de cette discussion : http://extjs.com/forum/showthread.php?t=26320


Contents

Point d'entrée

Imaginons que le point d'entrée de votre application soit le fichier index.asp, structuré comme suit : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="/igs/includes/ext/resources/css/ext-all.css"> 
 <script type="text/javascript" src="/igs/includes/ext/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="/igs/includes/ext/ext-all.js"></script>
 <script type="text/javascript" src="login.js"></script> 
 </head>
 <body></body>
</html>

Bien sûr, modifiez les chemins d'accès à votre répertoire EXT en conséquence. Voir la source du fichier Login.js ci-dessous.

Login.js

Ensuite vient Login.js. Il prend en charge toutes les lourdes fonctionnalités et comporte selon moi tout les éléments qui me manquaient dans une approche plus traditionnelle de l'authentification utilisateur.

Il crée le formulaire, l'affiche dans une popup, présente la fenêtre à l'utilisateur, envoie la requête en ajax, puis gère le succès ou l'échec de cette requête qui dépend du fait que l'utilisateur ait rentré une identification correcte ou pas. 

Ext.onReady(function(){
    Ext.QuickTips.init();
 
    // Crée une variable qui stocke notre panneau de formulaire ('Form Panel' en anglais) EXT. 
    // Assigne diverses options de configuration
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login.asp', 
        frame:true, 
        title:'Please Login', 
        defaultType:'textfield',
        monitorValid:true,
        // Attributs spécifiques pour les champs texte username / password. 
        // L'attribut "name" définit le nom des variables envoyées au serveur.
        items:[{ 
                fieldLabel:'Nom d\'utilisateur', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Mot de passe', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
        // Toute la magie se produit après que l'utilisateur ait cliqué sur le bouton
        buttons:[{ 
                text:'Login',
                formBind: true,  
                // Fonction qui s'exécute lorsque l'utilisateur clique sur le bouton
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connection en cours', 
                        waitMsg:'Envoi des données...',
 
                        // Fonctions qui s'exécutent lorsque le serveur répond. 
                        // Celle qui s'exécute est déterminée par la réponse provenant de login.asp comme décrit plus bas.
                        // Le serveur devrait répondre avec du JSON valide, quelque chose comme:
                        // response.write "{ success: true}" ou  
                        // response.write "{ success: false, errors: { reason: 'Echec de l\'identification. Merci de réessayer.' }}" 
                        // en fonction de la logique de votre script serveur.
 
                        // En cas de succès, l'utilisateur est notifié avec une boîte de message
                        // et lorsqu'il clique sur "OK" il est redirigé vers une page de votre choix.
 
                        success:function(){ 
                            Ext.Msg.alert('Statut', 'Identification réussie!', function(btn, text){
                                if (btn == 'ok'){
                                    var redirect = 'test.asp'; 
                                    window.location = redirect;
                                }
                            });
                        },
 
                        // Fonction d'échec, voir le commentaire ci-dessous
                        // Comme vous pouvez le voir, si l'identification échoue il ouvre une boîte de dialogue
                        // donnant à l'utilisateur des détails sur l'échec.
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Echec de l\'identification!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Attention!', 'Identification serveur injoignable : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
    // Ce code crée juste une fenêtre qui intègre le formulaire.
    // L'objet login est passé en paramètre à la collection d'éléments (items).
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
 });
 win.show();
});

Login.asp

Voici le traitement serveur pour l'identification. Je vais coller directement ce code simplissime pour montrer les réponses renvoyées par le serveur, et déterminer quelle fonction du login.js s'exécute (success ou failure). Cependant c'est ici qui vous devriez vous connecter à votre base de données avec les variables nom d'utilisateur / mot de passe, faire votre identification, et renvoyer l'une ou l'autre des réponses en fonction de la validité des paramètres d'identification. 

<%
 
if request.form("loginUsername") = "f" then
 response.write "{ success: true}"
else
 response.write "{ success: false, errors: { reason: 'L\'identification a échoué. Merci de réessayer.' }}"
end if
 
%>

Login.php

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
 
if($loginUsername == "f")  {
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: L\'identification a échoué. Merci de réessayer.' }}";
}
?>

Login.cfm

<cfsetting showdebugoutput="No">
<cfif form.loginUsername eq "f">
    <cfset result = "{success: true}">
<cfelse>
    <cfset result="{success: false, errors: { reason: L\'identification a échoué. Merci de réessayer.' }}">
</cfif>
<cfoutput>#result#</cfoutput>

Login.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%
 String result;
 String loginUsername = request.getParameter("loginUsername");
 if (null != loginUsername && loginUsername.length() > 0) {
 if (loginUsername.equals("f"))
 result = "{success:true}";
 else
 result = "{success:false,errors:{reason:L\'identification a échoué. Merci de réessayer.'}}";
 
 } else {
 result = "{success:false,errors:{reason:L\'identification a échoué. Merci de réessayer.'}}";
 }
%>
<%=result %>

Test.asp

.

Login.pl

#!/usr/bin/perl -w
use strict;
use CGI qw/:standard/;
my $login = param() ? param('loginUsername') : '';
print "Content-type: text/plain\n\n";
print $login eq "f" ? "{success: false, errors: { reason: L\'identification a échoué. Merci de réessayer.' }}" : "{success: true}";
exit;

Vous remarquerez une ligne dans le fichier login.js qui redirige vers la page Test.asp en cas de succès de l'identification. Cela peut bien sûr être n'importe quelle page en fonction de votre application. Dans mon cas, les utilisateurs peuvent avoir un nombre indéterminé de combinaisons d'options d'identification, donc la prochaine étape serait de valider avec n'importe quel mécanisme de gestion de session que vous utilisez, que la personne accédant à la page test.asp ait les accréditations nécessaires. En allant plus loin, je construirais de façon dynamique le menu de navigation de l'application pour cet utilisateur en fonction des options qui lui sont affectées. Comme cette partie est en construction, elle fera l'objet d'un prochain tutoriel. :)

En espérant que ce soit utile et merci encore au créateur de la plupart du code js.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Login_(French)"
  • This page was last modified on 25 October 2009, at 08:26.
  • This page has been accessed 1,587 times.