Criar um sistema de loginutilizando banco de dados MySql, requisição Ajax juntamente com a biblioteca jQuery. Nesse post, partimos do principio de que as senhas estão sendo gravadas no banco com criptografia md5.
Tecnologia aplicada:
Estrutura de arquivos:
- index.html => Formulário de login para acesso ao sistema.
- login.php => Responsável por validar usuário e senha digitado no formulário e registrar uma sessão.
- sessao.php => Responsável por verificar se o usuário está validado e com permissão para acessar um arquivo de acesso restrito do sistema.
- sistema.php => Página inicial do sistema [com usuário logado].
- logoff.php => Arquivo responsável por efetuar o logoff do usuário do sistema.
Desenvolvimento
Arquivo: index.html
Vamos criar nesse arquivo um formulário configurado para enviar os dados de usuário e senha. Nesse arquivo, vamos importar a biblioteca jQuery e configurar o evento Submit do formulário no JavaScript. Esse evento vamos colocar um return False para que o envio do formulário não seja finalizado pelo navegador no momento que o usuário clicar no botão de submit. Isso é necessário para que cancelamos a requisição padrão do navegador e realizamos a nossa requisição via Ajax. Em nossa requisição vamos configurar o arquivo login.php, no método POST com formato JSON. Vamos utilizar a função serialize para empacotarmos os campos e valores digitado no formulário e encaminhar como parâmetro para o arquivo login.php. Vamos criar uma DIV com ID "retorno" para exibição da mensagem retornado pelo processamento do arquivo login.php.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frmlogin').submit(function(){ //configura a função submit do formulário
$.ajax({ //requisição para buscar os dados
url : 'login.php', //nome do script que fará a consulta
dataType: 'json', //tipo de requsição Ajax
data : $('#frmlogin').serialize(), //empacotamento do formulário para encaminhar via POST
type : 'POST', //método de requisição POST
success : function(data){ //função executada ao finalizar o processamento da requisição
$('#retorno').html(data.mensagem); // preenche a DIV com a mensagem retornado pelo arquivo login.php
if(data.status == true){ //verifica foi processado com sucesso
window.location = 'sistema.php'; // chama a pagina inicial do sistema
}
}
});
return false; //cancela a requisição padrão do navegador.
});
});
</script>
</head>
<body>
<form id="frmlogin" name="frmlogin">
<input type="text" name="txtusuario" placeholder="Usuário" required /><br />
<input type="password" name="txtsenha" placeholder="Senha" required /><br />
<input type="submit" value="Ok" />
</form>
<div id="retorno"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frmlogin').submit(function(){ //configura a função submit do formulário
$.ajax({ //requisição para buscar os dados
url : 'login.php', //nome do script que fará a consulta
dataType: 'json', //tipo de requsição Ajax
data : $('#frmlogin').serialize(), //empacotamento do formulário para encaminhar via POST
type : 'POST', //método de requisição POST
success : function(data){ //função executada ao finalizar o processamento da requisição
$('#retorno').html(data.mensagem); // preenche a DIV com a mensagem retornado pelo arquivo login.php
if(data.status == true){ //verifica foi processado com sucesso
window.location = 'sistema.php'; // chama a pagina inicial do sistema
}
}
});
return false; //cancela a requisição padrão do navegador.
});
});
</script>
</head>
<body>
<form id="frmlogin" name="frmlogin">
<input type="text" name="txtusuario" placeholder="Usuário" required /><br />
<input type="password" name="txtsenha" placeholder="Senha" required /><br />
<input type="submit" value="Ok" />
</form>
<div id="retorno"></div>
</body>
</html>
Feito isso, temos nosso formulário pronto.
Arquivo: login.php
Linhas 2 a 18: Conecta no servidor MySql e selecionar o banco que iremos trabalhar.
Linhas 21: Declara um vetor para guardar os dados do JSON que será retornado.
Linhas 24 e 25: Recebe os dados preenchido no form de login.
Linhas 24 e 25: Recebe os dados preenchido no form de login.
Linha 28: Trata o que foi digitado no campo usuário para prevenção contra ataques por SQL Injection.
Linha 32: Criptografa a senha digitada pelo usuário para que seja comparada com a senha já criptografa salva no banco.
Linhas 36, 38: Monta e executa a consulta no banco para verificar se o usuário existe.
Linhas 39 e 40: Verifica se a consulta retornou 1 registro com o usuário informado.
Linha 42: Extrai os dados do usuário encontrado.
Linha 43: Verifica se a senha digitada está igual a senha cadastrada em banco.
Linha 45: Inicia uma sessão para o usuário autenticado.
Linha 46: Faz uma marcação na sessão informando que o usuário está logado.
Linha 48: Armazena o status como true para retornar no json.
Linha 49: Armazena a mensagem de retorno no json.
Linha 67: Converte o vetor para o formato JSON e retorna para a requisição ajax.
<?php
//Conexão com o banco de dados MySql
$servidor = 'localhost'; //endereço do servidor
$usuario_banco = 'root'; //usuário de acesso ao banco
$senha_banco = ''; //senha de acesso ao banco
$banco = 'blog'; //nome do banco de dados
if($con = mysql_connect($servidor, $usuario_banco, $senha_banco)){
if(!mysql_select_db($banco, $con)){ //seleciona o banco que iremos trabalhar
//OBS: o "!" no inicio da proposição do IF nega o retorno da função.
//Se a função retorna TRUE, que indica que a operação foi realizada com sucesso, ele não entra nesse IF.
//interrompe o processamento do script e exibe a mensagem caso não for possível selecionar o banco.
die("Erro: Não foi possível conectar ao banco de dados.");
}
}
else{
//interrompe o processamento do script e exibe a mensagem.
die("Erro: Não foi possível conectar ao banco de dados.");
}
//variável de retorno
$retorno = array();
//recebe os dados do formulário
$usuario_login = $_POST['txtusuario'];
$senha_login = $_POST['txtsenha'];
//trata a variavel recebida pelo formulário para evitar SQL Injection.
$usuario_login = mysql_escape_string($usuario_login);
//criptografa a senha digitada pelo usuário para comparar com a senha gravada no banco com criptografia md5.
//OBS: A senha salva no banco é criptografada e, por isso, para fazer a verificação se a senha digitada é igual à senha do banco, precisamos criptografar a senha digitada para comparar com ambas strings criptogradas.
$senha_login = md5($senha_login);
//Monta consulta que será executada no banco
// busca na tabela de login o cadastro que possui o usuario informado
$sql = "select * from login where usuario = '$usuario_login'";
//executa a consulta
$consulta = mysql_query($sql, $con);
if($consulta){//verifica se a consulta foi executada com sucesso
$qtdelinhas = mysql_num_rows($consulta); //busca a quantidade de linhas retornadas pela consulta
if($qtdelinhas == 1){//se retornou 1 linha de resultado indica que o usuario foi encontrado
//recebe os dados do banco;
$resultado = mysql_fetch_assoc($consulta);
if($resultado['senha'] == $senha_login){ //verifica a senha digitada pelo usuario com a senha cadastrada no banco
session_start(); //Inicia uma sessão para o login do usuário
$_SESSION['login'] = 's'; // coloca um marcador que o usuário passou pelo processo de autenticação
//header('Location: sistema.php'); //redireciona para a página inicial do sistema.
$retorno['status'] = true;
$retorno['mensagem'] = 'Autorizado';
}
else{
$retorno['status'] = false;
$retorno['mensagem'] = 'Usuario/Senha invalido';
}
}
else{//caso entre nesse else, significa que a consulta não retornou nenhum resultado, indicando que o usuário não está cadastrado, ou retornou mais de 1 resultado, indicando que existe usuário duplicado na tabela de cadastro.
$retorno['status'] = false;
$retorno['mensagem'] = "Usuario/Senha invalido. Contate o administrador do sistema.";
}
}
else{
$retorno['status'] = false;
$retorno['mensagem'] = "Erro: Não foi possível realizar o login no sistema";
}
//monta o array de retorno no formato do json.
echo json_encode($retorno);
?>
Nesse arquivo, vamos verificar se o usuário está logado e com permissão para acessar a página requisitada. Caso usuário não estiver logado, redireciona para a página de login.
<?php
//Esse arquivo é responsável por verificar se o usuário está autenticado para acessar a página.
//Importe esse arquivo em todas as páginas requer que o usuário esteja autenticado.
//inicia a sessão
session_start();
if($_SESSION['login'] != 's'){//Se o usuário não estiver autenticado
//redireciona para a página de login
header('Location: index.html');
}
?>
Arquivo: sistema.php
Esse é o arquivo da página inicial do sistema.
Antes de qualquer operação, importamos o arquivo sessao.php para que ele faça a verificação se o usuário está logado para acessar essa página.
Vamos colocar ainda um link para que o usuário efetue o logoff.
<?php
//importa o arquivo responsável por verificar se o usuário está autenticado.
include('sessao.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sistema</title>
</head>
<body>
Seja bem-vindo. <a href="logoff.php" title="Sair">Sair</a>
</body>
</html>
Arquivo: logoff.php
Esse arquivo é responsável por destruir a sessão criada para o usuário. A função session_destroy() é responsável por executar essa operação. Após destruir a sessão, redirecionamos o usuário para a tela de login novamente.
//importa o arquivo responsável por verificar se o usuário está autenticado.
include('sessao.php');
//destroi a sessão criada para o usuário
session_destroy();
header('Location: index.html');
?>
Feito isso finalizamos nosso login.
Obrigado pela sua visita.
Em breve novos posts!
Até a próxima.
Download dos arquivos
Nenhum comentário:
Postar um comentário