[Tutorial]Validar Usuario y Contraseña en Flash

Tema en 'Tutoriales Desarrollo Web' iniciado por kitsch, 28 Nov 2006.

  1. kitsch

    kitsch Nuevo usuario

    Bien aquí les dejo otro pequeño tutorial explicando las bondades de usar Flash en nuestras webs o proyectos. En el ejemplo de ahora les traigo como validar un nombre de usuario y contraseña para mostrar el contenido de nuestros sitios; se puede hacer de muchas formas y para los más avanzados les resultara fácil hacerlo con PHP y MySQL, pero eso lo dejo para siguientes tutos, aquí solo dejo dos ejemplos que funcionan con condicionales simples, uno con un solo usuario y otro con un array de ellos.

    1.- Creamos una nueva película de 260x200 píxeles.
    2.- Creamos dos textos dinámicos y les damos los nombres de instancia de: "user" y "pass" (que obvio no?).
    3.- Seleccionamos el cuadro de texto pass y en la propiedades seleccionamos"contraseña", para agregar los asteriscos al texto.
    4.- Creamos un botón al que le asignamos el nombre de instancia de: "entrar_btn".

    Nuestro entorno se debe de ver más o menos así:
    <img src="http://img99.imageshack.us/img99/1216/eez0.jpg" border="0" alt="Imagen IPB" />

    5.- Creamos otros dos fotogramas y los nombraremos como "denegado" y "acceso".
    6.- Creamos una nueva capa en blanco y agregamos 3 fotogramas clave, a los que les agregaremos el script: <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->stop();<!--c2--></div><!--ec2-->
    7.- Regresamos al primer fotograma e ingresamos el siguiente código:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->fscommand("showmenu", false); //Desactivamos el menu secundario del mouse.
    //---------------------------------
    _root.entrar_btn.onPress = function (validar) {
    //validara que user y pass sean iguales a los textos usuario1 y pass1
    &nbsp;&nbsp;&nbsp;&nbsp;if (user.text == "usuario1" and pass.text == "pass1"){
    //llevara a la parte que queremos que vea si es el usuario que esperamos
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gotoAndStop("acesso");
    &nbsp;&nbsp;&nbsp;&nbsp;}else {
    //lo llevara a otra pantalla de error si no cumplen las condiciones
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gotoAndStop("denegado");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    stop();//Detiene la pelicula<!--c2--></div><!--ec2-->
    En el anterior ejemplo validamos únicamente dos textos simples: "usuario1" y "pass1"; si se escribe esto nos envira a donde queremos que valla el usuario que tiene la contraseña, de lo contrario nos mostrara una pantalla de error.

    <!--Flash 260+200+http://www.kitschmultimedia.info/ejemplos/log.swf--><OBJECT CLASSID='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' WIDTH=260 HEIGHT=200><PARAM NAME=MOVIE VALUE=http://www.kitschmultimedia.info/ejemplos/log.swf><PARAM NAME=PLAY VALUE=TRUE><PARAM NAME=LOOP VALUE=TRUE><PARAM NAME=QUALITY VALUE=HIGH><EMBED SRC=http://www.kitschmultimedia.info/ejemplos/log.swf WIDTH=260 HEIGHT=200 PLAY=TRUE LOOP=TRUE QUALITY=HIGH></EMBED></OBJECT><!--End Flash-->
    <a href="http://www.kitschmultimedia.info/ejemplos/log.fla" target="_blank">Descargar el FLA de ejemplo</a>

    Ahora ¿Que pasa si queremos agregar más de un usuario? Pues la opción practica si no serán muchos (de lo contrario mejor directamente al MySQL) es crear un array. Con dos vectores "usuarios" y "passwords" podremos validar varios usuarios simultáneos. Además de que utilizaremos otro método de error un tanto mas simple.

    1.- Anexamos dos cuadros de texto dinámicos más a nuestro entorno, "error" e "intentos"

    <img src="http://img223.imageshack.us/img223/2240/dqs0.jpg" border="0" alt="Imagen IPB" />

    2.- Modificamos el script agregando varias lineas más, quedando de la siguiente manera:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->fscommand("showmenu", false);
    Stage.scaleMode = "noScale";//evita que se escale si se aumenta el tamaño.
    //Desactivamos el menu secundario del mouse.
    //---------------------------------
    var i:Number = 1;
    var usuario:Array = new Array();
    //Creamos la lista de usuarios
    usuario[0] = "kitsch";
    usuario[1] = "quique";
    usuario[2] = "sapinto";
    var passwords:Array = new Array();
    //Creamos las contraseñas
    passwords[0] = "pass0";
    passwords[1] = "pass1";
    passwords[2] = "pass2";
    //---------------------------------
    _root.entrar_btn.onPress = function(validar) {
    &nbsp;&nbsp;&nbsp;&nbsp;i = i+1;
    &nbsp;&nbsp;&nbsp;&nbsp;if (user.text == usuario[0] and pass.text == passwords[0]) {
    /*Validamos si el texto del campo usuario es igual al array usuario0 y el campo
    pass es igual al array passwords0*/
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gotoAndStop("acesso");
    &nbsp;&nbsp;&nbsp;&nbsp;} else if (user.text == usuario[1] and pass.text == passwords[1]) {
    /*Validamos si el texto del campo usuario es igual al array usuario1 y el campo
    pass es igual al array passwords1*/
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gotoAndStop("acesso");
    &nbsp;&nbsp;&nbsp;&nbsp;} else if (user.text == usuario[2] and pass.text == passwords[2]) {
    /*Validamos si el texto del campo usuario es igual al array usuario2 y el campo
    pass es igual al array passwords2*/
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gotoAndStop("acesso");
    &nbsp;&nbsp;&nbsp;&nbsp;} else {
    //Si las condiciones no se cumplen, que valla a la pantalla de error
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.user.text = "";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.pass.text = "";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.error.text = "Usuario o contraseña incorrectos."
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.intentos.text = "Intento numero "+i+".";
    &nbsp;&nbsp;&nbsp;&nbsp;}
    };
    stop(); //Detiene la pelicula<!--c2--></div><!--ec2-->
    <!--Flash 260+200+http://www.kitschmultimedia.info/ejemplos/log2.swf--><OBJECT CLASSID='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' WIDTH=260 HEIGHT=200><PARAM NAME=MOVIE VALUE=http://www.kitschmultimedia.info/ejemplos/log2.swf><PARAM NAME=PLAY VALUE=TRUE><PARAM NAME=LOOP VALUE=TRUE><PARAM NAME=QUALITY VALUE=HIGH><EMBED SRC=http://www.kitschmultimedia.info/ejemplos/log2.swf WIDTH=260 HEIGHT=200 PLAY=TRUE LOOP=TRUE QUALITY=HIGH></EMBED></OBJECT><!--End Flash-->
    <a href="http://www.kitschmultimedia.info/ejemplos/log2.fla" target="_blank">Descargar el FLA de ejemplo</a>

    Dudas y comentarios, aquí mismo :)
  2. opinguino

    opinguino Espécimen en peligro de extinción

    brutal javier
  3. elQuique

    elQuique Usuario activo

    Excelente tutorial :)
  4. yxed

    yxed Nuevo usuario

    gracias kamarada me salvaste el pellejo jajajaja me dejaron hoy hacer algo similar :p
  5. SAPINTO

    SAPINTO Nuevo usuario

    perfectirijillo... hasta salgo como protagonista en el code :banana:
  6. Scriptmaster

    Scriptmaster Guest

    exelente amigo, exelente......

    Ya esto es alto nivel de programacion en flash jejeje

    Salu2:: Scriptmaster
  7. Humber

    Humber Nuevo usuario

    :arriba: :arriba: :arriba: :arriba: :arriba:
  8. mack

    mack Nuevo usuario

    Abra que ponerlo en practica :p
  9. elQuique

    elQuique Usuario activo

    Lo acabo de republicar aca:
    <a href="http://www.tallerwebmaster.com/Tutorial-Validar-Usuario-y-Contrasenia-en-Adobe-Flash-c-57.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Va...Flash-c-57.html</a>

    Ya que esta interesante :)
  10. GnD

    GnD Nuevo usuario

    pero como hago q se registren los nuevos en flash

    se puede o no?
  11. elQuique

    elQuique Usuario activo

    Los metodos propuestos son manuales, el primero es insertar en tu codigo en la condicion if el usuario (sirve para 2 o 3 usuarios fijos), y el segundo ejemplo es utilizando array (sirve para 5 a 10 usuarios fijos).

    Si tu quieres tener una lista dinamica de usuarios, deberias implementar un formulario de ingreso que permita almacenar esa informacion en una base de datos y luego un chequeo que lea si el usuario esta en esa base de datos.
  12. norbertino11

    norbertino11 Guest

    HE TRATADO DE DESCARGAR EL FLA DE EJEMPLO, PERO NO PUEDO ALGUIEN ME PODRIA DAR EL LINK PARA DESCARGARMELO?,.. SE LO AGRADECERIA MUCHO.
  13. elQuique

    elQuique Usuario activo

    norbertino11, bienvenido al foro :)
  14. airamL

    airamL Nuevo usuario

    Hola. Estoy intentado hacer una web en flash, pero tengo un apartado en el que tengo que poner un password. Son bastantes usuarios y los tengo en un excel. Así que me da igual hacerlo en Acces, mySQL o xml. Lo que quiero es conseguirlo y no se que hacer ya. No puedo instalar bien el Apache, mysql... ese bloque. Me pide usuario y contraseña para ejecutarlo y yo no pongo ningun usuario y no se que poner. Además no puedo poner los usuarios en Flash ya que tiene que ser fácil añadir otros, bien en xml para abrirlo con el bloc de notas o algo así.

    ¿Me podeis echar una mano por favor?.

    Un saludo
  15. kitsch

    kitsch Nuevo usuario

    Mmmm hay formas modificando el tutorial de meter un php directamente de la base de datos, sin necesidad de usar XML, despues simplemente creas otro formulario para ingresar datos a esa db.

    Te dejo un tuto de Cristalab que es bastante claro al respecto:
    <a href="http://www.cristalab.com/tutoriales/157/login-en-flash-con-usuario-y-contrasena" target="_blank">http://www.cristalab.com/tutoriales/157/lo...io-y-contrasena</a>
  16. elQuique

    elQuique Usuario activo

    airamL bienvenido al foro
  17. airamL

    airamL Nuevo usuario

    Hola. No entiendo muy bien el de cristalab. Cuando le doy al botón, me pone conctando... y ahí se queda. No se como decirle que lo compare con el de la base de datos. Por cierto como no lo puedo hacer con mysql ya que no se como acceder, lo he tenido que hacer con Access, igual ahí el problema. Otra cosa que he hecho a sido hacerlo con XML. ya que si abro el XML con un bloc de notas ya puedo insertar otro usuario.

    Necesito que sea fácil insertar más registros con lo cual no lo puedo meter en el código de Flash además son bastantes usuarios. Mirando por internet e visto la opción de hacerlo con mySql, pero cuando lo instalo y ejecuto <a href="http://localhost/phpmyadmin" target="_blank">http://localhost/phpmyadmin</a>, me pide usuario y contraseña y yo cuando lo instalo solo me pide contraseña, con lo cual no he podido crear la BD por que no se como entrar, no se que usuarios poner.
    He pensado hacerlo en xml poniendo usuarios y contraseña y tantas opciones como usuarios tuviera y estas opciones compararlos mediante un if con lo que escribamos en los campos de texto (donde escribimos el nombre lo he cargado con la variable identificador). Para ello he creado este código en flash con 2 usuarios (childNodes[0]=Maria y childNodes[1]=Juan):

    txt = "<usuario>"+ identificador +"</usuario> ";// lo concateno así por que no se que me muestre solo el texto del xml sin las etiquetas. ¿Igual es este el problema?
    misdatos = new XML();
    misdatos.load("datos.xml");
    misdatos.ignoreWhite = true;
    misdatos.onLoad = function() {
    if (txt == misdatos.childNodes[0].childNodes[0].firstChild) {
    trace(txt);
    trace(misdatos.firstChild.childNodes[0].childNodes[0]);
    } else {
    trace(txt);
    trace(misdatos.firstChild.childNodes[1].childNodes[0]);
    }};
    El problema viene que si cargo identificador=Maria, dice que tiene que hacer el else y debería hacer el IF.

    Estos es datos.xml:

    <usuarios>
    <usuario>
    <nombre>Maria</nombre>
    <password>123</password>
    </usuario>
    <usuario>
    <nombre>Juan</nombre>
    <password>456</password>
    </usuario>
    </usuarios>

    ¿Cómo puedo hacer el login pidiendo usuario y contraseña?

    Gracias. Un saludo María
  18. elQuique

    elQuique Usuario activo

    El usuario siempre es por defecto root :)

    En cuanto a tu problema debes tener en cuenta que todo son elementos apartes, tienes diferentes "capas"

    Flash
    action script
    xml
    php
    mysql o access

    Flash no accede a la base de datos, por eso mediante ActionScript utilizando como lenguaje de comunicación usas XML.

    PHP no accede a Flash y también utilizara XML para enviar información, pero es quien se comunica con la base de datos MySql y lo hace bien.

    Mi sugerencia es que testees por parte, por ejemplo haz un echo campo para saber si el php te esta mostrando datos, luego haz un ECHO de todo el html generado para ver si es lo que debería ser.

    Lo mismo del lado del flash, imprime lo que el flash te envía y ve si es lo correcto.

    De esa forma parte a parte vas testeando y enterándote donde esta el problema.

    Si no puedes, nos sería de ayuda ver el sistema publicado y/o el código completo :)
  19. airamL

    airamL Nuevo usuario

    Vale con root si me funciona el phpmyadmin asi que voy a probarlo con php. A ver si sale. Pero no las tengo todas conmigo.

    aunque a mi me gustaba mas la opción de xml ya que así se podrá insertar pronto un usuario. bueno haber que saco.

    Un saludo y gracias
  20. airamL

    airamL Nuevo usuario

    Lo estoy haciendo al final con PHP y mysql. Pero sigue sin salir. Mirando por internet e visto un código, pero hay una cosa que no entiendo. la palabra "exito", no se a que se refiere. Os paso lo que tengo si le podeis echar un vistazo, os lo agradecería.

    <u>EN EL FLASH:</u>
    tengo 2 campos de Input Text con nombre de instacion: username_txt y password_txt. Un Dinamic Text con nombre de intancia mensaje_txt y un botón llamado login.

    En este <b>BOTÓN </b> tengo este código:
    on (release) {
    login();
    mensaje_txt.text = "conectando...";
    }

    EN EL <b>PRIMER FRAME</b>:
    stop();
    var envio:LoadVars = new LoadVars();
    var recibir:LoadVars = new LoadVars();
    function login() {
    envio.username = username_txt.text;
    envio.password = password_txt.text;
    envio.action = "login";
    envio.sendAndLoad("consulta.php", recibir, "POST");
    }

    recibir.onLoad = function(exito) {
    trace(amria)
    if (exito) {
    switch (this.opcion) {
    case "0" :
    mensaje_txt.text = "no existe el usuario";
    break;
    case "1" :
    mensaje_txt.text = "nombre de usuario o contraseña incorrectos";
    break;
    case "2" :
    mensaje_txt.text = "datos correctos";
    gotoAndPlay(2);
    break;
    default :
    mensaje_txt.text = "no hay conexión";
    break;
    }
    } else {
    mensaje_txt.text = "Error en el Script";
    }
    };

    Hay 2 archivos de php que son:

    <b>CONNECT.PHP</b>:

    <?php
    $hostname_conn = "localhost";//servidor donde corre mysql
    $database_conn = "mi_db";//base de datos
    $username_conn = "username";//usuario de mysql
    $password_conn = "password";//pass de mysql
    //la conexion
    $conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or die(mysql_error());
    ?>


    <b>CONSULTA.PHP</b>:

    <?php
    $action = $HTTP_POST_VARS['action'];
    $username = $HTTP_POST_VARS['username'];
    $password = $HTTP_POST_VARS['password'];
    require_once('connect.php'); //llamada a la conexion
    mysql_select_db($database_conn, $conn); //selecciona la db
    if ($action == 'login'){
    $sql = mysql_query("SELECT password,tipo FROM usuarios WHERE username='".$username."'");
    if (!$sql) {
    die('Could not query:' . mysql_error());
    }
    $sql2 = mysql_fetch_row($sql);
    if (!$sql2){
    //no existe usuario
    echo 'no existe usuario<br>';
    ?>&opcion=0&<?
    } else{
    if ($password !== $sql2[0]){
    //no coincide pass
    echo 'el pass no coincide<br>';
    ?>&opcion=1&<?
    } else{
    //usuario y pass correctos
    echo 'datos correctos<br>';
    ?>&opcion=2&
    &tipo=<? echo $sql2[1]; ?>&<?
    }
    }
    mysql_close($conn);
    }
    ?>

    Lo guardo todo en C:\AppServ\www\web

    La base de datos se llama mi_db, y la tabla usuarios la cual tiene 3 campos id (clave princial), username y password)

    Espero que me podais echar una mano, estoy un poco rallada y no lo veo muy claro. Solo me queda esto para terminarlo y me está volviendo loca. Espero no volveros locos a vosotros.

    Ayudarme por favor.

    Un saludo






      
      
      
      
Sitios amigos: GuiaHosting · Unidominios · Interalta · Forocreativo