Password en tablas

ajmataurus · #1 (**permalink**) 23/03/2005, 15:09

Hola a todos:
Aqui hay un par de links, quisiera que me pasen el dato còmo es que realizan este mètodo para ingresar la contraseña, como veràn si hacen click el link aparece el textBox para el password pero ya no digitas, sol haces click en los numeros que aparecen en esa pequeña tabla y ademàs estos npumero son aleatorios, no siempre aparecen en el mismo orden. Saben ustedes en que esta hecho y como lo harìa en ASp.NET???
gracias.
aquì está el link:

Código HTML:

http://cel.reniec.gob.pe/cel/servlet/cel.servlet.SrMain

Código HTML:

https://www.viabcp.com

-->operaciones en linea
____
cualquier comentario sobre esta manera de ingrsar passwords,
gracias.
Att.
Taurus

RootK · #2 (**permalink**) 23/03/2005, 15:19

Pues no hay gran ciencia para hacer eso friend.. no es mas que poner un textbox tipo password en formato read.

<input readonly="true" name="clave" type="password" class="caja">

Y desde javasccript meter en un array los valores para despues hacer una funcion de forma aleatoria, echale un ojo al source para que veas las funciones.. , en la llamada genRandomArray es la que genera los valores aleatorios.

Está deshabilitado el boton derecho para cualquier tipo de browser pero solo baste con que le des view-source ya que ni siquiera lo puso en frames para esconder el code.. aunque de todas formas se puede sacar.. jeje..

De todas formas cualquier cosa por aqui andamos..

ajmataurus · #3 (**permalink**) 23/03/2005, 16:24

Bueno parece facil, pero hasta ahora no entiendo còmo hacerlo, ese class="caja" llama a un JavaScript y la fuente de JavaScript???
Ahhh y còmo es eso de que cuando uno trabaja con frames nose puede ver el Source???
gracias.

DarkRigel · #4 (**permalink**) 23/03/2005, 16:37

Yo me olvidaba de hacer eso en .NET y lo hacia directamente en Javascript, de todas formas lo de poner los numeros aleatorios....muy bonito para practicar, pero nada serio.

ajmataurus · #5 (**permalink**) 29/03/2005, 09:40

Hola DarkRigel
como nada serio????
Y Rootk, còmo puedo hacerlo????. me prodrias dar màs pistas????
Gracias
Att.
Taurus

RootK · #6 (**permalink**) 29/03/2005, 11:09

ajmataurus, no es de pistas.. es de darse una vuelta al source del site...ahi esta el javascript que necesitas...

Ok... te paso un ejemplo de como te puede quedar.. pero es indispensable que busques como hacer las cosas para que aprendas..

Coloca 2 textbox de ésta forma con el nombre del form por ejemplo rootk jeje

Cita:

<form id="rootk" name="rootk" method="post" runat="server">
...

<input readonly name="clave" type="password"><br>
<input type="text" name="pin">
...

ahora.. colocar la tabla que generará los numeros aleatorios..

y sería de esta forma:

Código PHP:

  <table bordercolor="#9f4569" cellpadding="0" cellspacing="1" border="1" width="75"> 
                <tr align="center" height="20"> 
                    <td width="25"> 
                        < href="javascript:onPadClick(1,%207,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_7" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%208,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_8" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%209,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_9" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                </tr> 
                <tr align="center" height="20"> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%204,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_4" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%205,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_5" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%206,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_6" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                </tr> 
                <tr align="center" height="20"> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%201,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_1" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%202,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_2" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%203,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="window.status='CLAVE';this.style.cursor='hand';this.style.color='#FF8533';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_3" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                </tr> 
                <tr align="center" height="20"> 
                    <td width="25"> 
                        <a href="javascript:onPadClick(1,%200,document.RootK.pin,document.RootK.clave,%208)"> 
                            <input onmouseout="this.style.color='#000066'" onmouseover="window.status='CLAVE';this.style.cursor='hand';this.style.color='#FF8533';return true;" 
                                style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center" 
                                readonly name="_1_llave_0" size="1" tabindex="-1" type="text"></a> 
                    </td> 
                    <td colspan="2"> 
                        <font><a class="texto_limpiar" href="javascript:onPadClick(1,%20-1,document.RootK.pin,document.RootK.clave,%208);" 
                                onmouseover="window.status='Limpiar';return true;">&nbsp;limpiar&nbsp;</a></font> 
                    </td> 
                </tr> 
            </table>

Y despues en los headers colocaras el javascript que se encarga de hacer el efecto:

Código PHP:

  <script language="javascript"> 
        var random_array1 = new Array(0,1,2,3,4,5,6,7,8,9); 
    var random_array2 = new Array(0,1,2,3,4,5,6,7,8,9); 
    var gHiddenField  = null; 
    var gShownField   = null; 
     
    function cTrim(cad, car){ 
        //Descripcion:    Elimina los caracteres 'car' que encuentre en la cadena 'cad' 
        var i; 
        var cad2=""; 
        for(i=0;i<cad.length;i++) 
            if(cad.charAt(i)!=car) 
                cad2 += cad.charAt(i); 
         
        return cad2; 
    } 
   
  function genRandomArray( keyPad ){ 
    var aux = 0; 
    var swpIdx = 0; 
    var random_array; 
     
    if( keyPad == 1 ) 
      random_array = random_array1; 
    else 
      random_array = random_array2; 
     
    for( var i = 0; i < 10; i ++ ){ 
      swpIdx = Math.ceil(Math.random()*9); 
      aux = random_array[swpIdx]; 
      random_array[swpIdx] = random_array[i]; 
      random_array[i] = aux; 
    } 
    for( var i = 0; i < 10; i ++ ) 
      eval("document.RootK._"+keyPad+"_llave_"+i+".value='"+random_array[i]+"';");     
  } 
   
    function onPadClick( keyPad, padPos, hiddenField1, shownField1, lengthField) {     
    var random_array; 
    var field; 
     
      if( padPos == -1 ){       
        hiddenField1.value = ""; 
        shownField1.value = "";         
        return; 
    }   
     
      field = cTrim(shownField1.value, " ");                   
    if (field.length >= lengthField){ 
          if( keyPad != 2 ) 
            return; 
    } 
        
    if( keyPad == 1 ) 
      random_array = random_array1; 
    else 
      random_array = random_array2; 
       
    var padKey = random_array[ padPos ];       
    hiddenField1.value += padKey; 
    shownField1.value += "*"; 
    field = cTrim(shownField1.value, " ");  
  } 
   
</script>

Y listo... solo haz copy and paste.. , ya está listo para usar..

Mas facil no te lo puedo hacer...