Ext JS - Learning Center

Tutorial:Basic Login (Spanish)

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Ejemplo Simple de Autenticación
Author: David Fitch
Published: February 22, 2009
Ext Version: 2.x
Languages: en.png Englishcn.png Chinesefr.png Frenches.png Spanish br.png Portuguese


Esta es mi primera publicación en el tutorial, ¡así que esperemos que salga bien! Gracias al creador de estos ejemplo en este hilo: http://extjs.com/forum/showthread.php?t=26320


Contents

Punto de entrada

Asumamos que el punto de entrada a vuestra aplicación es index.asp, estructurado de la siguiente manera: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "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>

Obviamente, modificad los paths a vuestro directorio EXT. Veamos el código de Login.js a continuación.

Login.js

A continuación viene login.js. Se encarga de todas las cargas pesadas, en mi opinión, todos los elementos que me perdí en un enfoque más tradicional para la autenticación de usuario. Crea el formulario, se muestra en una ventana emergente, presenta la ventana al usuario, envía la petición a través de ajax, y gestiona el éxito o el fracaso de respuesta en función de si el usuario se ha registrado correctamente. 

Ext.onReady(function(){
    Ext.QuickTips.init();
 
    // Creamos una variable que contenga nuestro EXT FormPanel.
    // Asignamos varias opciones de configuración.
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login.asp', 
        frame:true, 
        title:'Por favor, identifíquese', 
        defaultType:'textfield',
	monitorValid:true,
	// Atributo específico para los campos usuario/clave.
	// El atributo "name" defiene el nombre de la variable enviada al servidor. 
        items:[{ 
                fieldLabel:'Usuario', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Clave', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
    // Toda la mágia ocurre después de que el usuario pulse el botón.
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // Función que se ejecuta cuando el usuario pulsa el botón.
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Conectando', 
                        waitMsg:'Enviando datos...',
 
            // Función que se ejecuta (éxito o fracaso) cuando el servidor responde.
            // Cual se ejecuta es determinado por la respuesta
            // proveniente de login.asp como se muestra abajo. El servidor responde
            // realmente con un JSON valido, algo como: response.write "{succes: true}"
            // o response.write "{succes: false, errors: { reason: 'Identificación incorrecta. Inténtelo de nuevo.' }}"
            // dependiendo en la lógica contenida en su servidor.
            // Si tiene éxito, se notifica al usuario con un messagebox de alerta,
            // y cuando se pulsa "OK", eres redirigido a cualquier página
            // que haya elegido.
 
                        success:function(){ 
                        	Ext.Msg.alert('Estatus', 'Identificación correcta', function(btn, text){
				   if (btn == 'ok'){
		                        var redirect = 'test.asp'; 
		                        window.location = redirect;
                                   }
			        });
                        },
 
			// Función de fallo, see comment above re: éxito y fallo.
			// Como puede ver aquí, si la identificación falla, lanza
			// un mensaje al usuario con los detalles del fallo.
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Identificación incorrecta', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('¡Atención!', 'Fallo de conexión con el servidor de autenticación: ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
    // Esto sólo crea una ventana para envolver el formulario de registro.
    // El objeto login se pasa a la colección de 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

Este es el servidor de procesamiento para la identificación. Voy a pegar este código muy simple para montar las respuestas devueltas por el servidor, y determinar qué función ejecutar en login.js (éxito o fracaso). Sin embargo, este es el lugar donde se haría la llamada a la base de datos con el nombre de usuario/contraseña, realizar su autenticación y, a continuación, enviar una de estas respuestas en función de la validez de los parámetros de identificación. 

<%
    if request.form("loginUsername") = "f" then
        response.write "{ success: true}"
    else
        response.write "{ success: false, errors: { reason: 'Identificación incorrecta. Inténtelo de nuevo.' }}"
    end if
%>

Login.php

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
 
if($loginUsername == "f"){
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: 'Identificación incorrecta. Inténtelo de nuevo.' }}";
}
?>

Login.cfm

<cfsetting showdebugoutput="No">
<cfif form.loginUsername eq "f">
    <cfset result = "{success: true}">
<cfelse>
    <cfset result="{success: false, errors: { reason: 'Identificación incorrecta. Inténtelo de nuevo.' }}">
</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:'Identificación incorrecta. Inténtelo de nuevo.'}}";
 
	} else {
		result = "{success:false,errors:{reason:'Identificación incorrecta. Inténtelo de nuevo.'}}";
	}
%>
<%=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: 'Identificación incorrecta. Inténtelo de nuevo.' }}" : "{success: true}";
exit;

Usted notará una línea en login.js que redirige a Test.asp si la identificación es correcta. Esta puede ser, evidentemente, cualquier página de su aplicación. En mi situación, los usuarios pueden tener cualquier número de combinaciones de opciones de navegación, por lo que el siguiente paso sería validar con cualquier mecanismo de gestión de sesión que utilice, que la persona que acceda a test.asp está autorizado para hacerlo. Además, quiero eliminar cualquier opciones de navegación que esté asignada a ese usuario y crear mi barra de herramientas en consecuencia. Como esta sección está en construcción, será en otro tutorial :)

Espero que esto sea útil y gracias de nuevo al creador de la mayoría del código js.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Login_(Spanish)"
  • This page was last modified on 25 September 2009, at 02:13.
  • This page has been accessed 2,279 times.