[Tutorial]Validar Usuario y Contraseña en Flash

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='clsid27CDB6E-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='clsid27CDB6E-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

 

brutal javier

 

Excelente tutorial

 

gracias kamarada me salvaste el pellejo jajajaja me dejaron hoy hacer algo similar

 

perfectirijillo... hasta salgo como protagonista en el code

 

exelente amigo, exelente......

Ya esto es alto nivel de programacion en flash jejeje

Salu2:: Scriptmaster

 

:arriba: :arriba: :arriba: :arriba: :arriba:

 

Abra que ponerlo en practica

 

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

 

pero como hago q se registren los nuevos en flash

se puede o no?

 

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.

 

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

 

norbertino11, bienvenido al foro

 

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

 

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>

 

airamL bienvenido al foro

 

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

 

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

 

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

 

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