LinuxParty

Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 

Para aquellos de nosotros que viajan con frecuencia, a menudo terminan accediendo a los mensajes de correo electrónico y otros datos confidenciales web, en ordenadores con cuentas públicas. En tales circunstancias, estamos completamente a merced de los keyloggers y otros programas maliciosos que hacen un seguimiento de nuestras pulsaciones de teclado y contraseñas.

Sin embargo, son muy pocos los sitios web que ofrecen a sus usuarios la opción de utilizar un teclado virtual para introducir (al menos) sus contraseñas. Sí, unos pocos bancos suelen hacerlo, pero teniendo en cuenta la cantidad de información personal que almacenan en diversas aplicaciones web en estos días, la seguridad de estas cuentas son de menor importancia para nosotros. Este tutorial se explica cómo podemos aplicar un simple teclado virtual con alguna (bien, bien, bastante!) ayuda de jQuery.

Antes de comenzar, permítanme mostrar la manera en que todos esperamos verlo al final.

HTML Básico e instalación del CSS.

Ok, vamos a empezar. Empezamos con un típico antiguo formulario de acceso con nombre de usuario y contraseña campos y un botón de acceso. Añadimos un vínculo para mostrar / ocultar el teclado virtual cuando se hace clic.

Tenemos que explicar que intencionadamente puede que no hubiera un espacio entre < y > (en los ejemplo) sólo para poder utilizarlo en el artículo, debería de quitarlo si va a hacer un "copy & paste", aunque le recomiendo que no se esfuerze y lea el artículo tranquilo, ya que al final del mismo podrá descargarse el código completo (y funcional).

<h3>Login form</h3>
<form action="" method="post" id="loginform">
<label for="username" >Username:</label>
<input type="text" name="username" id="username" />
<label for="pwd" >Password:< /label>
<input type="text" name="pwd" id="pwd"/ >
<a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard." >Keyboard</a> <br />
<input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form>

A continuación, es el momento de poner el XHTML en su lugar para su teclado. Sólo quería tener un enfoque muy sencillo y, por tanto, descartar la generación de las claves dinámicamente. Las cuatro principales líneas de la norma teclado (cada uno encerrado en un DIV), junto con sus equivalentes de cambio. Así que eso significa, un total de 8 filas, de los cuales en cualquier momento (dependiendo de si se pulsa o no la tecla Shift), cuatro de las filas serán visibles, y los otros cuatro ocultos.


<div id="keyboard" >
<div id="row0" >
  <input name="accent" type="button" value="`" />
  <input name="1" type="button" value="1" />
  <input name="2" type="button" value="2" />
  <input name="3" type="button" value="3" />
  <input name="4" type="button" value="4" />
  <input name="5" type="button" value="5" />
  <input name="6" type="button" value="6" />
  <input name="7" type="button" value="7" />
  <input name="8" type="button" value="8" />
  <input name="9" type="button" value="9" />
  <input name="0" type="button" value="0" />
  <input name=" – " type="button" value=" – " />
  <input name="=" type="button" value="=" />
  <input name="backspace" type="button" value="Backspace" />
</div >

<div id="row0_shift">
  <input name="tilde" type="button" value="~" />
  <input name="exc" type="button" value="!" />
  <input name="at" type="button" value="@" />
  <input name="hash" type="button" value="#" />
  <input name="dollar" type="button" value="$" />
  <input name="percent" type="button" value="%" />
  <input name="caret" type="button" value="^" / >
  <input name="ampersand" type="button" value="&" />
  <input name="asterik" type="button" value="*" />
  <input name="openbracket" type="button" value="(" />
  <input name="closebracket" type="button" value=")" />
  <input name="underscore" type="button" value="_" />
  <input name="plus" type="button" value="+" />
  <input name="backspace" type="button" value="Backspace" />
</div>

<div id="row1">
  <input name="q" type="button" value="q" />
  <input name="w" type="button" value="w" />
  <input name="e" type="button" value="e" />
  <input name="r" type="button" value="r" />
  <input name="t" type="button" value="t" />
  <input name="y" type="button" value="y" />
  <input name="u" type="button" value="u" />
  <input name="i" type="button" value="i" /> 
  <input name="o" type="button" value="o" />
  <input name="p" type="button" value="p" />
  <input name="[" type="button" value="[" />
  <input name="]" type="button" value="]" />
  <input name="" type="button" value="" />
</div>

<div id="row1_shift">
  <input name="Q" type="button" value="Q" />
  <input name="W" type="button" value="W" />
  <input name="E" type="button" value="E" />
  <input name="R" type="button" value="R" />
  <input name="T" type="button" value="T" />
  <input name="Y" type="button" value="Y" />
  <input name="U" type="button" value="U" />
  <input name="I" type="button" value="I" />
  <input name="O" type="button" value="O" />
  <input name="P" type="button" value="P" />
  <input name="{" type="button" value="{" />
  <input name="}" type="button" value="}" />
  <input name="|" type="button" value="|" />
</div>

<div id="row2" >
  <input name="a" type="button" value="a" />
  <input name="s" type="button" value="s" />
  <input name="d" type="button" value="d" />
  <input name="f" type="button" value="f" />
  <input name="g" type="button" value="g" />
  <input name="h" type="button" value="h" />
  <input name="j" type="button" value="j" />
  <input name="k" type="button" value="k" />
  <input name="l" type="button" value="l" />
  <input name=";" type="button" value=";" />
  <input name="’" type="button" value="’" />
</div >

<div id="row2_shift" >
  <input name="a" type="button" value="A" /> 
  <input name="s" type="button" value="S" />
  <input name="d" type="button" value="D" />
  <input name="f" type="button" value="F" />
  <input name="g" type="button" value="G" />
  <input name="h" type="button" value="H" />
  <input name="j" type="button" value="J" />
  <input name="k" type="button" value="K" />
  <input name="l" type="button" value="L" />
   <input name=";" type="button" value=":" />
   <input name="’" type="button" value=’"’ />
</div >

<div id="row3">
  <input name="Shift" type="button" value="Shift" id="shift" />
  <input name="z" type="button" value="z" />
  <input name="x" type="button" value="x" />
  <input name="c" type="button" value="c" />
  <input name="v" type="button" value="v" />
  <input name="b" type="button" value="b" />
  <input name="n" type="button" value="n" />
  <input name="m" type="button" value="m" />
  <input name="," type="button" value="," />
  <input name="." type="button" value="." />
  <input name="/" type="button" value="/" />
</div >

<div id="row3_shift" >
  <input name="Shift" type="button" value="Shift" id="shifton" />
  <input name="Z" type="button" value="Z" />
  <input name="X" type="button" value="X" />
  <input name="C" type="button" value="C" />
  <input name="V" type="button" value="V" />
  <input name="B" type="button" value="B" />
  <input name="N" type="button" value="N" />
  <input name="M" type="button" value="M" />
  <input name="lt" type="button" value="< " />
  <input name="gt" type="button" value=" > " />
  <input name="?" type="button" value="?" />
</div>

<div id="spacebar">
  <input name="spacebar" type="button" value=" " />
</div>
</div>

CSS


He tomado el cuidado de representar los caracteres que tienen un significado especial en HTML, utilizando entidades "<".

He mantenido un mínimo estilo CSS. Por supuesto, si usted desea que su teclado se parezca a un dragón, puede seguir adelante y "viva el jazz!". Hemos establecido la propiedad div adjuntaba del teclado para ser "ninguno" inicialmente, ya que no queremos que se presenta hasta que el usuario pulse un clic en el "teclado". Además, también ocultamos la tecla "shift", es decir, las teclas que se activan sólo cuando el botón de cambio este pulsado. He nombrado estas filas con una ID div terminando en "_shift". Dando vuelta atrás cuando el usuario pulsa la tecla de mayúsculas (veremos más adelante).

El resto del CSS implica un formato básico para que las teclas parezcan que están en un teclado estándar QWERTY.

#keyboard {
position: absolute;
display: none;
border: 1px solid #ccc;
width: 560px;
padding: 10px;
cursor: move;
}

#spacebar input {
width: 180px;
margin: 0 auto;
margin-left: 150px;
}

#shift, #shifton {
width: 70px;
text-align: left;
}

#row0_shift, #row1_shift, #row2_shift, #row3_shift {
display: none;
}

#row0, #row0_shift {
padding-left: 20px;
}

#row1, #row1_shift {
padding-left: 60px;
}

#row2, #row2_shift {
padding-left: 70px;
}

#shifton {
border-left: 3px solid #000;
border-top: 3px solid #000;
}

jQuery

Ahora vamos a llegar a la parte más importante - el código JavaScript que controla el comportamiento del teclado. Vamos a utilizar dos extensiones jQuery - uno para que el teclado, y la otra a la ayuda en la selección y manipulación de el campo de la contraseña. He hecho algunas adiciones al original plugin fieldSelection de jQuery por Alex Brem para adaptarse a nuestras necesidades adicionales. vkeyboard.js contiene nuestro código personalizado.

< script type="text/javascript" src="/jquery-1.2.6.min.js" > < /script >
< script type="text/javascript" src="/jquery-ui-personalized-1.5.2.min.js" > < /script >
< script type="text/javascript" src="/jquery-fieldselection.js" > < /script >
< script type="text/javascript" src="/vkeyboard.js" > < /script >

En vkeyboard.js, ponemos nuestro código jQuery en función de la lista para asegurarse de que el código se ejecuta sólo después de que el documento está completamente cargado.

$(document).ready(function() { // all our code goes here });

Permítanme que caminar a través de la lógica del código. En primer lugar, añadir un evento "onclick" hace que el teclado se active o desactive (es decir, mostrar si está oculto, ocultar si ya se ha mostrado) cuando el usuario hace clic en el "teclado".

$("#showkeyboard").click(function(e) {
var height = $(’#keyboard’).height();
var width = $(’#keyboard’).width();
leftVal=e.pageX-40+"px";
topVal=e.pageY+20+"px";
$(’#keyboard’).css({left:leftVal,top:topVal}).toggle();
});

A continuación, hacemos el teclado funcional, de modo que el usuario puede pulsar y mantener en cualquier parte de la pantalla tal sin que ello impida que aparezca el. Hacemos esto llamando a la funcion draggable(), cortesía de la jQuery UI + draggable plugin.

$("#keyboard").draggable();

Tenemos que definir una próxima función que alterna entre las filas por defecto en el teclado y las filas que se activan cuando la tecla "Mayúsculas" se presiona.

function onShift(e) {
var i;
if(e==1) {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).hide();
$(rowid+"_shift").show();
}
}
else {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).show();
$(rowid+"_shift").hide();
}
}
}


Por último, definir una función que llama siempre para saber si se pulsa cualquier tecla en el teclado.

Esta función comprueba si se pulsa la tecla Retroceso. Si es así, entonces se llama a la función replaceSelection de la fieldSelection plugin, con una cadena vacía como un parámetro, para indicar que una operación de retroceso (que sustituye al anterior carácter de la posición actual del cursor por una cadena vacía - es decir, la supresión de la anterior caracteres)

Si la tecla "Mayúsculas" ha sido presionado, entonces la función establece el variable "shifton" a verdad "True" para indicar que el cambio de clave ha sido presionado y llama a onShift(1). Sin embargo, si la tecla ya ha sido presionado, la función se desactiva y el cambio hace una llamada a onShift(0).

Si alguna otra clave ha sido presionado, entonces simplemente insertará en el carácter entre la posición actual del cursor. El replaceSelection() maneja el caso de que algunos caracteres ya han sido seleccionados por el usuario. En ese caso, los caracteres seleccionados se sustituyen por el carácter que está representado por la tecla presionada.

$("#keyboard input").bind("click", function(e) {

if( $(this).val() 'Backspace' ) {
$('#pwd').replaceSelection("", true);
}

else if( $(this).val() "Shift" ) {
if(shifton false) {
onShift(1);
shifton = true;
}

else {
onShift(0);
shifton = false;
}
}

else {

$('#pwd').replaceSelection($(this).val(), true);

if(shifton true) {
onShift(0);
shifton = false;
}
}
})

... Y ya lo tienes hecho! Echa un vistazo a la demo y descargar el código fuente completo aquí.

Como puede ver, la mayoría de la ardua labor está a cargo de los plugins de jQuery. Si usted está interesado en leer más sobre los problemas relacionados con campo de selección y reemplazo utilizando Javascript, usted debe ver este artículo en Quirksmode.
Pin It

Comentarios   

Clown
-4 # Clown 13-11-2012 14:38
si no confio en los teclados, tu crees que voy a confiar en el teclado de la pagina?
la intencion es buena, pero es mas sopeschoso que un keyloger
Responder | Responder con una citación | Citar
Carlos
+1 # Carlos 13-11-2012 16:34
Jo Clown, es "más sospechoso" ¿y estás viendo el código fuente de la página? Al menos, podrías indicar que parte del código de la página es sospechoso...

Sospechoso, será cuando el código no es visible, como las empresas que hacen software privativo, pero ¿con código abierto?

Yo creo, que es bastante claro, que es más seguro.
Responder | Responder con una citación | Citar
geniutrisone
+2 # geniutrisone 13-11-2012 22:48
Cito a Clown:
si no confio en los teclados, tu crees que voy a confiar en el teclado de la pagina?
la intencion es buena, pero es mas sopeschoso que un keyloger


Si crees que es sospoechoso revisa el codigo fuente y veras si lo es o no, si no tienes conocimientos de programación pagale a alguien para que lo haga, pero lances cosas solo por decir algo, si no sabes no comentes.
Responder | Responder con una citación | Citar
CharlyG
+1 # CharlyG 21-06-2014 02:49
:-x Clown, evidentemente de esto no entendes nada, causa gracia tu comentario. Justamente, pienso en dos alternativas: 1) o no entendes absolutamente nada de programacion, o 2) tenes la mente retorcida, y le buscas la trampa a todo... el que ve tramposo a otro es porque uno mismo tiene ese pensamiento.

Excelente aporte, felicitaciones por el codigo, justamente esto se utiliza para dar mayor seguridad en el ingreso de datos. Salu2.
Responder | Responder con una citación | Citar
Marcos
0 # Marcos 23-02-2017 19:04
El teclado solo tira target al password, en ningun momento me deja darle target al usuario, tengo un teclado numérico y me pasa exactamente lo mismo :/
Responder | Responder con una citación | Citar

Escribir un comentario


Código de seguridad
Refescar



Redes:



 

Suscribete / Newsletter

Suscribete a nuestras Newsletter y periódicamente recibirás un resumen de las noticias publicadas.

Donar a LinuxParty

Probablemente te niegues, pero.. ¿Podrías ayudarnos con una donación?


Tutorial de Linux

Filtro por Categorías

Nos obligan a moslestarte con la obviedad de que este sitio utiliza Cookies. Ver política