Ext JS - Learning Center

Tutorial:Basic Login (Português)

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Simple Authentication Example
Author: David Fitch (Tradução: Marcos Timm)
Published: February 14, 2008
Ext Version: 2.x
Languages: en.png Englishcn.png Chinesefr.png Frenches.png Spanish br.png Portuguese

Esta é a minha primeira publicação de tutorial, mas espero que funcione bem. Graças a criação dos exemplos desta página: http://extjs.com/forum/showthread.php?t=26320


Contents

Ponto de Partida

Vamos assumir que o ponto de partida de sua aplicação seja index.asp, e é estruturada como a seguir: 

<!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>

Obviamente, modifique os path de acordo com seu diretório EXT. Veremos o código do Login.js a seguir

Login.js

A seguir vem o login.js. Ele lida com todo o trabalho pesado e, pra mim, tem todas as peças que faltavam para quem vem de uma forma tradicional de autenticação de usuário. Ele cria o formulário, renderiza uma janela popup, exibe a janela ao usuário, submete os dados via AJAX, e lida com o sucesso e o fracasso de resposta dependendo se o usuário inseriu os dados com sucesso. 

Ext.onReady(function(){
    Ext.QuickTips.init();
 
	// Crie uma variável para armazenar nosso EXT Form Panel 
	// Assinamos várias opções de configuração	 
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login.asp', 
        frame:true, 
        title:'Please Login', 
        defaultType:'textfield',
	monitorValid:true,
	// Atributos específicos para os campos de usuário/senha. 
	// O atributo "name" define o nome da variável que será enviada do servidor.
        items:[{ 
                fieldLabel:'Username', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Password', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
	// Toda a mágica que acontece depois que o usuário clique no botão     
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // Função que é executada quando o usuário clicar no botão 
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connecting', 
                        waitMsg:'Sending data...',
 
			// Função que executa (sucesso ou falha) quando o servidor responder. 
			// A que será executada é determinada pela 
			// responsta que virá do login.asp como mostrado abaixo. O servidor responde 
			// um JSON válido. 
			// Algo como: response.write "{ success: true}" ou
			// responde.write "{ success: false, errors: { reason: 'Falha no Login. Tente novamente.' }}" 
			// dependendo da lógica que contiver no código de retorno do servidor.
			// Se o sucesso ocorrer, o usuário será notificado com uma mensagem de alerta messagebox, 
			// e quando ele clicar em "Ok", então será redirecionado a qualquer página
			// que você tenha definido para redirecionamento. 
 
                        success:function(){ 
                        	Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				   if (btn == 'ok'){
		                        var redirect = 'test.asp'; 
		                        window.location = redirect;
                                   }
			        });
                        },
 
			// Função de falha, veja comentário sobre re: sucesso e falha. 
			// Você poderá ver aqui, se o login falhar, chama uma messagebox
			// com detalhes da falha  
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
	// Aqui é criado uma janela para agregar o formulário. 
	// O objeto login é passado como ítem desta janela.       
    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

Aqui é onde o servidor processa o seu login. Vou me apegar a colocar apenas um código simples para mostrar as respostas que serão retornadas, e tederminar que função o login.js executará (sucesso ou falha). COntanto, aqui é onde você deverá chamar seu banco de dados com o usuário/senha da variável, da autenticação, e por fim enviar uma das mensagens de resposta dependendo se o usuário digirou uma credencial válida. 


<%
 
if request.form("loginUsername") = "f" then
	response.write "{ success: true}"
else
	response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
end if
 
%>


Login.cfm

<cfsetting showdebugoutput="No">
<cfif form.loginUsername eq "f">
    <cfset result = "{success: true}">
<cfelse>
    <cfset result="{success: false, errors: { reason: 'Login failed. Try again.' }}">
</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:'Login failed.Try again'}}";
 
	} else {
		result = "{success:false,errors:{reason:'Login failed.Try again'}}";
	}
%>
<%=result %>

Login.php

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
 
if($loginUsername == "f"){
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

Ou, você pode usar PHP avançado com array associativo e a função json_encode, e renderizar a resposta em JSON. Isso pode ser útil caso você se esqueça de sequências de escape ou para não ter trabalho braçal caso esteja utilizando um JSON mais complexo. 

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
 
if($loginUsername == "f"){
    $result["success"] = true;
} else {
    $result["success"] = false;
    $result["errors"]["reason"] = "Login failed. Try again.";
}
echo json_encode($result);
?>

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: 'Login failed. Try again.' }}" : "{success: true}";
exit;

Você vai notar uma lina no login.js que redireciona para o Text.asp caso um login bem sucedido aconteça. Esta pode ser, obviamente, qualquer que seja a página principla de sua aplicação. Na minha situação, os usuários podem ter diversas combinações de de opções de navegação, assim o próximo passo seria fazer com que o mecanismo tenha gerenciamento da sessão que você utiliza, que a pessoa que está acessando o teste.asp está realmente autenticado. Além disso, gostaria atribuir ao usuário as opções de navegação e contruir a minha barra de ferramentas em conformidade. Eu continuo tentando entender esta parte de fora, mas ficará para um outro tutorial :)


Espero que isso ajude e obrigado novamente a crafter pela maioria do código JS.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Login_(Portugu%C3%AAs)"
  • This page was last modified on 25 September 2009, at 02:11.
  • This page has been accessed 367 times.