martes, junio 30, 2009

Conociendo Flex XIV: Validando el acceso

.
En ciertas ocasiones es necesario que la interface que se está desarrollando tenga acceso reservado a usuarios previamente registrados. El ejemplo siguiente habilita que el usuario pueda acceder a un estado reservado u oculto siempre y cuando su nombre y clave sean validadas. Se utiliza una aplicación adicional php que nos permite conectarnos con una BD para valiar los datos del usuario.

Aplicación Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<!-- El siguiete bloque se ejecuta si el usuario se validó (estado "validado"-->
<mx:states>
<mx:State name="validado">
<mx:SetProperty target="{panel1}" name="width" value="95%"/>
<mx:SetProperty target="{panel1}" name="height" value="95%"/>
<!-- Se eliminan objetos de la pantalla -->
<mx:RemoveChild target="{password}"/>
<mx:RemoveChild target="{username}"/>
<mx:RemoveChild target="{label1}"/>
<mx:RemoveChild target="{Submit}"/>
<mx:RemoveChild target="{label2}"/>
<!-- Se agregan elementos a la pantalla -->
<mx:SetProperty target="{panel1}" name="title" value="Usuario validado"/>
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:Label x="10" y="10" text="Bienvenido!" />
</mx:AddChild>
</mx:State>
</mx:states>

<!-- Función que setea el estado luego de la consulta a la BD-->
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
private function checkLogin(evt:ResultEvent):void
{
if(evt.result.loginsuccess == "yes") {currentState = "validado";}
if(evt.result.loginsuccess == "no") {mx.controls.Alert.show('Error en Acceso!');}
}
]]>
</mx:Script>


<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://127.0.0.1/login.php" useProxy="false">
<mx:request xmlns="">
<username>
{username.text}
</username>
<password>
{password.text}
</password>
</mx:request>
</mx:HTTPService>

<!-- Se solicitan datos de acceso -->
<mx:Panel resizeEffect="Resize" width="250" height="200" layout="absolute" title="Ingreso al sistema" horizontalCenter="0" verticalCenter="-2" id="panel1">
<mx:Label x="10" y="10" text="Usuario:" id="label1"/>
<mx:TextInput x="10" y="36" id="username"/>
<mx:Label x="10" y="66" text="Clave:" id="label2"/>
<mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
<mx:Button x="10" y="122" label="Enviar" id="Submit" click="login_user.send();"/>
</mx:Panel>

</mx:Application>

Aplicación PHP


[php]<?php

//Conexión a la BD
$mysql = mysql_connect("localhost", "root", "tasistro") or die(mysql_error());
mysql_select_db( "flex");

//Se instancian variables locales con datos pasados por Flex
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);

//Consulta a la BD
$query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysql_fetch_array(mysql_query($query));

//Armado e impresión de la respuesta
$output = "<loginsuccess>";
if(!$result) { $output .= "no"; }else{ $output .= "yes";}
$output .= "</loginsuccess>";
print ($output);

?>[/php]


2 comentarios:

Anónimo dijo...

Muy buen ejemplo sir!!!
Ojala siga publicando mas sobre Flex.

Anónimo dijo...

buenos su espacio online es muy bueno,esto es la tercera vez que vi tu blog, buen espacio!
abrazo