Foros del Web » Creando para Internet » Flash y Actionscript »

Crear sistema de login en flash

Estas en el tema de Crear sistema de login en flash en el foro de Flash y Actionscript en Foros del Web. ¿Como hacer un sistema de registro de usuario y contraseña? Aclaro que quiero que el usuario pueda cambiar la contraseña cuando el quiera....
  #1 (permalink)  
Antiguo 14/04/2012, 22:34
 
Fecha de Ingreso: agosto-2011
Mensajes: 28
Antigüedad: 12 años, 8 meses
Puntos: 0
Crear sistema de login en flash

¿Como hacer un sistema de registro de usuario y contraseña?

Aclaro que quiero que el usuario pueda cambiar la contraseña cuando el quiera.
  #2 (permalink)  
Antiguo 15/04/2012, 11:14
 
Fecha de Ingreso: junio-2010
Ubicación: Charlotte, NC
Mensajes: 611
Antigüedad: 13 años, 10 meses
Puntos: 95
Respuesta: Crear sistema de login en flash

Voy a asumir que ya tienes una tabla MySQL (o del gestor que sea) en tu servidor (local o remoto).

El archivo PHP creara un archivo XML al vuelo, el cual utilizara para enviar a Flash con el estado de la autentificacion (algo asi como AJAX, pero este seria AFAX.. Asynchronous Flash and XML jaja).

Crea un archivo php con el siguiente codigo:
Código PHP:
Ver original
  1. <?php
  2. $hostname = "localhost";
  3. $username = "usuario";
  4. $password = "password123";
  5. $database = "mibd";
  6.  
  7. $mysqli = new MySQLi($hostname, $username, $password, $database);
  8. $amIConnected = ($mysqli->connect_errno) ? FALSE: TRUE;
  9.  
  10. isset($_POST['usr']) or die ("username not set");
  11. isset($_POST['pwd']) or die ("password not set");
  12.  
  13. $usr = $_POST['usr'];
  14. $pwd = md5($_POST['pwd']);
  15.  
  16. $strSQL = "SELECT `agent_code` FROM `users` WHERE `username` = ? AND `password` = ?";
  17.  
  18. if(!($query = $mysqli->prepare($strSQL))) {
  19.     die("Query no preparada\nCausas:\n".$mysqli->error);
  20. }
  21. if(!($query->bind_param("ss",$usr,$pwd))) {
  22.     die("Los parametros no fueron asociados con la consulta SQL\nCausas:\n".$query->error);
  23. }
  24. if(!($query->execute())) {
  25.     die("Hubo un error durante la ejecucion de la consulta SQL:\n".$query->error);
  26. }
  27. if(!($query->bind_result($user_id))) {
  28.     die("No se pudo asociar el resultado con la variable:\n".$query->error);
  29. }
  30. if($query->fetch()) {
  31. header("Content-Type: text/xml");
  32.     echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
  33.     echo "<authentication>\n";
  34.       echo "<result>\n";
  35.       echo "<ID>".$user_id."</ID>\n";
  36.       echo "</result>\n";
  37.   echo "</authentication>";
  38. } else {
  39. header("Content-Type: text/xml");
  40.     echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
  41.     echo "<authentication>\n";
  42.       echo "<result>\n";
  43.       echo "<ID>-1</ID>\n";
  44.       echo "</result>\n";
  45.   echo "</authentication>";
  46. }
  47. $query->close();
  48. $mysqli->close();
  49. ?>
Cambia $hostname, $username, $password y $database a los valores correspondientes en tu sistema.

Basicamente, genera un XML que regresa a flash el ID del usuario si es que existe, de lo contrario regresa un -1. Flash basado en esta informacion decide dejar pasar al usuario, o decirle que su nombre de usuario o contrasena es incorrecto.

El codigo en flash seria asi:
Código Actionscript:
Ver original
  1. package  {
  2.     import flash.display.*;
  3.     import flash.net.*;
  4.     import flash.events.*;
  5.     import flash.text.*;
  6.    
  7.  
  8.     public class main extends MovieClip {
  9.         private static const DEFAULT_TEXT:String = "Iniciando Test...";
  10.         private static const dx:int = 400;
  11.         private static const URL:String = "index.php";
  12.  
  13.         private var _loader:URLLoader;
  14.         private var _request:URLRequest;
  15.         private var _requestVars:URLVariables;
  16.         public var usuario:TextField = new TextField();
  17.         public var contrasena:TextField = new TextField();
  18.         public var usuarioLbl:TextField = new TextField();
  19.         public var contrasenaLbl:TextField = new TextField();
  20.        
  21.         public var botonLogin:MovieClip = new MovieClip();
  22.         public var campo:TextField = new TextField();
  23.            
  24.         public function main() {
  25.             usuario.type = TextFieldType.INPUT;
  26.             usuario.background = true;
  27.             usuario.border = true;
  28.             usuario.height = 20;
  29.             usuario.x = 300;
  30.             usuario.y = 150;
  31.             addChild(usuario);
  32.             usuarioLbl.text = "Nombre de usuario:";
  33.             usuarioLbl.x = 170;
  34.             usuarioLbl.y = 150;
  35.             addChild(usuarioLbl);
  36.            
  37.             contrasena.type = TextFieldType.INPUT;
  38.             contrasena.background = true;
  39.             contrasena.displayAsPassword = true;
  40.             contrasena.border = true;
  41.             contrasena.height = 20;
  42.             contrasena.x = 300;
  43.             contrasena.y = 200;
  44.             addChild(contrasena);
  45.             contrasenaLbl.text = "Contraseña:";
  46.             contrasenaLbl.x = 170;
  47.             contrasenaLbl.y = 200;
  48.             addChild(contrasenaLbl);
  49.            
  50.             botonLogin.graphics.beginFill(0x0000FF);
  51.             botonLogin.graphics.drawRect(0,0,100,20);
  52.             botonLogin.graphics.endFill();
  53.             botonLogin.x = (contrasenaLbl.x + contrasenaLbl.width + contrasena.x + contrasena.width)/2-botonLogin.width;
  54.             botonLogin.y = 250;
  55.             botonLogin.addEventListener(MouseEvent.CLICK,autenticarUsuario);
  56.             addChild(botonLogin);
  57.            
  58.             campo.border = true;
  59.             campo.width = 400;
  60.             campo.height= 100;
  61.             campo.x = botonLogin.x-150;
  62.             campo.y = 300;
  63.             campo.text = DEFAULT_TEXT;
  64.             addChild(campo);
  65.         }
  66.        
  67.         public function autenticarUsuario(e:MouseEvent):void{
  68.             output("Validando Usuario...");
  69.             if((usuario.text=="")||(contrasena.text=="")) {
  70.                 output("Campo de usuario o contrasena está vacío\n");
  71.             } else {
  72.                 _requestVars = new URLVariables();
  73.                 _requestVars.usr = usuario.text;
  74.                 _requestVars.pwd = contrasena.text;
  75.                 _request = new URLRequest(URL);
  76.                 _request.method = URLRequestMethod.POST;
  77.                 _request.data = _requestVars;
  78.                 _loader  = new URLLoader();
  79.                 _loader.addEventListener(Event.COMPLETE,completado);
  80.                 _loader.load(_request);
  81.             }
  82.         }
  83.         public function output(s:String):void
  84.         {
  85.             campo.appendText(s+"\n");
  86.         }
  87.         public function completado(e:Event)
  88.         {
  89.             output("Consulta completada!\n");
  90.             output("Mostrando Infomación:\n");
  91.             var xml:XML = new XML(e.target.data);
  92.             var campos:XMLList = xml..result;
  93.             if(campos[0].ID == -1) {
  94.                 output("Usuario no existe");
  95.             } else {
  96.             output("Usuario autentificado con ID: "+campos[0].ID);
  97.             }
  98.         }
  99.  
  100.     }
  101. }

Como menciono anteriormente, doy por hecho que ya tienes instalado un gestor de base de datos con una tabla de usuario creada.

Utilizo prepared statements para evitar SQL Injection, incluso aunque un posible atacante envie inputs como "-- OR 1" , al utilizar prepared statements; MySQL ya sabe de antemano cual es la consulta a ejecutar, asi que literalmente buscara "-- OR 1" en la base de datos, y no se ejecutara como SQL bajo ninguna circunstancia.

Sin embargo, para evitar basura, la clase TextField, tiene un metodo restrict, en donde puedes especificar una expresion regular para sanitizar la informacion proveida por el usuario.

usuario.restrict = [a-z];

restringe a que el input en el campo de texto de usuario, sean solamente letras de la 'a' a la ' z' (en minusculas).

Escribi un tutorial sobre esto en mi pagina web, es algo diferente mi tutorial simplemente hago consultas a la base de datos, pero con menores modificaciones como puedes ver hice un sistema de login :)

Te dejo mi web, por si quieres echarle un vistazo ;)
http://www.alanchavez.com


Aqui te dejo dos tutoriales relacionados al tema:
http://alanchavez.com/tutorial-como-...esarla-con-php
http://alanchavez.com/tutorial-de-co...sql-php-xml-hd

Desventaja:
El nombre de usuario y contrasena se envian en texto plano hacia PHP, asi que es vulnerable a un ataque de "man in the middle", alguien escuchando el trafico entre una computadora y un servidor. Si quieres agregar una capa de seguridad, utilizaria un algoritmo de encriptacion, con un secreto, como SHA256 para mayor seguridad, sin embargo no se si exista una libreria de encriptacion para AS3.

SHA256 encripta tu password con un secreto (una clase de contrasena), en php recibes la contrasena encriptada y la desencriptas con el mismo secreto.
Es mala practica de programacion, guardar los secretos en la base de datos. No lo pongas en Flash en texto plano, porque Flash se puede desencriptar y van a ver tu secreto, por lo tanto no tiene punto la "molestia" de encriptar el password.

Yo lo pondria en el servidor, FUERA DEL WEBROOT, con permisos solamente de lectura para el usuario y grupo de apache.

Lo que yo haria para agregar una capa de seguridad extra seria:
1) hacer un URLRequest del archivo PHP donde se encuentra el secreto, y pasarlo a flash.

2)Con el secreto dentro de flash; encriptar la contrasena del usuario, y pasar SOLAMENTE el usuario y contrasena al archivo de autentificacion.

Posteriormente en el script PHP donde se verifica si el usuario existe o no:

1) Leer el archivo PHP donde se encuentra el secreto
2) Desencriptar la contrasena del usuario
3) Codificarla con MD5 (en realidad se recomienda PBKDF2, ya que MD5 ya no se considera seguro)
4) Tratar de encontrar a un usuario, con esa contrasena.

Pero eso ya te lo dejo a tu criterio, lo veo dificil principalmente porque yo no conozco ninguna libreria de criptografia para Flash, sin embargo; no dudo que pueda existir.

Etiquetas: flash, login, sistema
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:30.