Teclado Virtual Com PHP E MySQL
Últimamente na Internet virou moda garotos de 14, 15 anos entrarem nas contas ou sistemas de outras pessoas a fim de provar que sabem algo.
Este é apenas um dos problemas que pequenas, médias e grandes empresas enfrentam no dia a dia.
Para evitar problemas, nós desenvolvedores trabalhamos dia e noite a fim de criar soluções que venham aumentar a segurança nos sistemas disponíveis na Internet.
Na matéria de hoje, vamos apresentar um Teclado Virtual.
Ele é simples, porém, em alguns casos torna-se eficaz, aumentando as chances de identificação em combate de programas maliciosos em execução no equipamento.
Por exemplo:
- Janelas falsas do tipo pop up, que aparecem na frente de seu navegador no momento em que você acessa o Teclado Virtual do Real Internet Banking ou do Real Internet Empresa e solicitam os dados de acesso a sua conta;
- páginas falsas contendo imagens e frases relacionadas ao BANCO REAL;
- programas que monitoram suas ações no computador, conhecidos como key-loggers e mouseloggers, que copiam e gravam tudo que é digitado ou clicado com o mouse;
- ataques realizados por fraudadores ou programas maliciosos que redirecionam a navegação para páginas falsas.
Como de costume, em anexo disponibilizamos o sistema completo.
Configurando A Base de Dados MySQL
Antes de tudo, é necessário configurar a base de dados.
Com o BD já criado, acesse o ficheiro “conexao.php” e configure o ficheiro alterando as informações de acesso à base de dados (conforme script a seguir).
<?
// SERVIDOR
$database = "SERVIDOR";
$dbname = "BASEDEDADOS";
$usuario = "USUARIO";
$dbsenha = "SENHA";
$conexao=mysql_connect ($database, $usuario, $dbsenha);
if($conexao){
if (mysql_select_db($dbname, $conexao)){
print "";
}else{
print "Não foi possível selecionar o Banco de Dados";
}
}else{
print "Erro ao conectar o MySQL";
}
?>
Após a configuração, vamos agora criar a tabela que será usada!
Criando A Tabela Na Base De Dados MySQL
Para configurar a base de dados através do script, abra o ficheiro script-sql.txt (disponível em anexo) e cole seu conteúdo no Programa utilizado para gerenciamento da base de dados.
Em nossas matérias utilizamos como padrão o MySQLFront. Caso tu também esteja utilizando este programa, clique em SQL Editor e cole o conteúdo do script (conforme disponibilizado a seguir).
----- INSTALANDO A TABELA -----
CREATE TABLE `tbl_usuarios` (
`usuarios_id` int(11) NOT NULL auto_increment,
`usuarios_nome` varchar(255) default NULL,
`usuarios_password` varchar(25) default NULL,
`usuarios_email` varchar(80) default NULL,
`status` char(1) default NULL,
PRIMARY KEY (`usuarios_id`)
);
INSERT INTO `tbl_usuarios` (`usuarios_id`,`usuarios_nome`,`usuarios_password`,`usuarios_email`,`status`) VALUES (3,'Administrador','123456','teste@teste.com','1');
Após importar os dados, você já poderá fazer uso do sistema abaixo.
Explorando O Ficheiro index.php
Conforme dissemos anteriormente, este sistema é muito prático de implementar.
Abaixo disponibilizamos o código da página “index.php”, onde são apresentadas as perguntas e respostas (conforme script e imagem a seguir):
<? include('includes/conexao.php'); ?>
<html>
<head>
<title>.:: Administração ::.</title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>.style7 {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.style8 {
FONT-SIZE: 12px
}
.style10 {
FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
</STYLE>
<LINK href="scripts/css/css.css" type=text/css rel=stylesheet>
<link href="scripts/css/keyboardstyle.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/js/jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="scripts/js/jquery-fieldselection.js"></script>
<script type="text/javascript" src="scripts/js/vkeyboard.js"></script>
<STYLE type=text/css>BODY {
MARGIN: 0px
}
</STYLE>
<META content="MSHTML 6.00.2800.1561" name=GENERATOR></HEAD>
<BODY>
<P align=center> </P>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>
<TBODY>
<TR>
<TD><A href="autenticacao.php"><IMG
src="imagens/topo_login.jpg" border=0></A></TD></TR>
<TR>
<TD background=imagens/fundo_login.jpg>
<P> </P>
<TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0>
<TBODY>
<TR>
<TD width=330 background=imagens/login2_r1_c1.jpg
height=150 rowSpan=3>
<FORM action='includes/autenticacao.rotinas.php' method=post><BR>
<TABLE cellSpacing=0 cellPadding=0 width=225 align=right border=0>
<TBODY>
<TR>
<TD width=57 height=25>
<DIV align=right><SPAN class=style10>Login:</SPAN></DIV></TD>
<TD width=173 height=25>
<INPUT class=botoes size=20 name='username'>
</TD></TR>
<TR>
<TD height=25>
<DIV align=right><SPAN class=style10>Senha:</SPAN></DIV></TD>
<TD height=25>
<INPUT class=botoes id=pwd type=password size=20 name='pwd'><br><a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard."><SPAN class=style10>teclado virtual</span></a>
</TD></TR>
<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>
<TR>
<TD colSpan=2 height=25>
<DIV class="style7 style8" align=center>
<input type='hidden' name="enviado" value="posted">
<INPUT class=botoes type=submit value=":: Entrar ::" name=Submit>
</DIV></TD></TR></TBODY></TABLE>
<DIV class=style7 align=center><BR><BR></DIV></FORM>
<DIV align=right><SPAN class=style7></SPAN></DIV></TD>
<TD><A onclick="MM_showHideLayers('info','','show')"
href="#"><IMG
height=63
src="imagens/login2_r1_c2.jpg" width=170 border=0
name=login2_r1_c2></A></TD>
</TR>
<TR>
<TD><A
href="#"><IMG
height=59 alt=":: Recuperar senha"
src="imagens/login2_r2_c2.jpg" width=170 border=0
name=login2_r2_c2></A></TD>
</TR>
<TR>
<TD><IMG height=28
alt="" src="imagens/login2_r3_c2.jpg" width=170 border=0
name=login2_r3_c2></TD>
</TR></TBODY></TABLE>
<DIV align=center><BR>
<STYLE type=text/css>.style7 {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.style9 {
FONT-SIZE: 10px; COLOR: #ff0000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
BODY {
MARGIN: 0px
}
</STYLE>
<BR>
<TABLE cellSpacing=0 cellPadding=0 width=500 border=0>
<TBODY>
<TR>
<TD vAlign=top width=500 background=imagens/info_senha.jpg
height=150><BR>
<TABLE cellSpacing=0 cellPadding=0 width=430 align=right border=0>
<TBODY>
<TR>
<TD>
<DIV class=style7 align=left>
<P><STRONG>PRIMEIRO ACESSO:</STRONG></P>
<P>Em caso de dúvidas relacionadas ao email cadastrado
em nosso sistema, entre em contato com nosso suporte:
<br>
<br>
MSN: grupoqsa@hotmail.com<br>
SKYPE: scrivusa<br>
Email: suporte@qsasolucoescorporativas.com.br</P>
</DIV>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE height=50 cellSpacing=0 cellPadding=0 width=400 align=center
border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><SPAN class=style7>Ao utilizar este serviço,
finalize o sistema para que outros usuários não possam visualizar
seus dados. </SPAN></DIV></TD></TR></TBODY></TABLE>
<P align=center><span class='TextoPretoPequeno'><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Seu
IP / HOST foi identificado como: <br>
<?
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
if($host=='')
{
$host = $_SERVER['REMOTE_ADDR'];
echo "$ip";
}
else
{
$ip = $_SERVER['REMOTE_ADDR'];
echo "$ip / $host";
}
?>
</font> </span></P>
</DIV></TD></TR>
<TR>
<TD><IMG height=2 src="imagens/rodape_login.jpg"
width=600></TD></TR></TBODY></TABLE>
</BODY></HTML>
IMAGEM 01 (Formulário da página Inicial)
OBS.:
Veja que na página chamamos os scripts abaixo:
<link href="scripts/css/keyboardstyle.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/js/jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="scripts/js/jquery-fieldselection.js"></script>
<script type="text/javascript" src="scripts/js/vkeyboard.js"></script>
Eles servem para trazer à página os eventos do teclado.
O trecho abaixo (disponível em divs) estará construindo as teclas (conforme código a seguir):
<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>
IMAGEM 02 (Formulário da página Inicial com o Teclado Virtual)
Faça os ajustes em seu ficheiro e comece a usar esta solução em suas páginas!
Espero que esse código lhe ajude em algo.
Download do código usado neste tutorial: Teclado Virtual PHP MySQL
