Olá a todos, pretendo aqui desenvolver um sistema de login simples com o uso de PHP, AJAX, jQuery e Banco de Dados MySQl.
Primeiro crie uma tabela no seu banco de dados chamada usuarios da seguinte maneira:
CREATE TABLE `usuarios` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nome` text NOT NULL,
`email` text NOT NULL,
`senha` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
E faça a inserção de um registro na tabela, usando o método SHA1, função usada geralmente para criptografia, que de acordo com texto informado gera uma sequencia de números e letras equivalentes ao texto anterior, só que de forma disfarçada. A fução SHA1 tem suas vulnerabilidades, por isso a considerada mais segura é a SHA-256.
insert into usuarios (nome, email, senha ) values ('admin', 'admin@clubedosgeeks.com', sha1('123456'));
Depois disso crie um arquivo HTML, chamado index.html, importe a biblioteca jQuery nele:
Formulário de login
Crie um formulário simples para o login, é um H2 ou div com id=”errolog” para que possamos informar ao usuário que suas credenciais são inválidas.
Usuário ou senha errados!
Ainda no arquivo index.html abra uma tag script e coloque o seguinte código JavaScript:
$(document).ready(function(){
$('#errolog').hide(); //Esconde o elemento com id errolog
$('#formlogin').submit(function(){ //Ao submeter formulário
var login=$('#email').val(); //Pega valor do campo email
var senha=$('#senha').val(); //Pega valor do campo senha
$.ajax({ //Função AJAX
url:"login.php", //Arquivo php
type:"post", //Método de envio
data: "login="+login+"&senha="+senha, //Dados
success: function (result){ //Sucesso no AJAX
if(result==1){
location.href='restrito.php' //Redireciona
}else{
$('#errolog').show(); //Informa o erro
}
}
})
return false; //Evita que a página seja atualizada
})
})
Arquivo login.php
Este arquivo é responsável pelo login propriamente dito, pois nele acontecem a conexão com o banco de dados, a validação dos dados e a abertura da seção no servidor, veja:
Arquivo restrito.php
O arquivo restrito.php, como o próprio nome diz será a nossa página restrita, que testa se há sessão criada, se não houver ele redireciona para a tela de login, coloque o seguinte no cabeçalho do arquivo e de todos os outros que você deseja proteger.
Logout
Para logout criaremos o arquivo logout.php com o seguinte código:
E no link do botão sair, ou como você preferir, aponte para o arquivo, da seguinte forma:
SAIR
Pronto, qualquer dúvida ou sugestão deixe um comentário. Até a próxima!
[ads1]
Olá, eu não entendo muita coisa sobre php queria saber como faço pra inserir o codigo do passo 2 na tabela?
Você quer saber como faz a inserção por PHP é isso?
Um dos melhores tutoriais de login com ajax que achei na internet!
Parabéns!!
Otimo post, caro ..
Eu so queria saber, como retornar a informacao de sucesso ou nao pro JS, pra ele sim, redirecionar a pagina. Há como ?!
A informação já está sendo retornada, no arquivo login.php linha 17.
É seguro fazer as validações somente por jquery?
Não conheço nenhum método de validação somente por jQuery. Como ela funciona?
Acho que me expressei mal devido a minha falta de conhecimento. O correto seria: Essa forma de validação que você mostrou nesse post é segura visto que é possível desativar o JS?
É sim, não se faz muita coisa na internet hoje sem JS, não imagino a situação que alguém desativaria.
Obrigado por responder. Não tem muita haver com o seu post, mas estou com código aqui e não faço ideia de como fazê-lo funcionar:
$.ajax({
url: “login.php”,
method: ‘POST’,
dataType: ‘json’,
data: {
do_login: true,
username: $(form).find(‘#username’).val(),
password: $(form).find(‘#password’).val(),
},
success: function(resp)
{}
Nunca mexi com dataType “json”, somente “html”. O que + ou – eu teria que colocar no arquivo login.php para que funcionasse?
A mesma coisa do exemplo do post. Só os nomes dos parametros username e password, que no exemplo estão login e senha
aqui sempre da a mensagem de errolog, como se nao reconhecesse esse if result success: function (result){ //Sucesso no AJAX
if(result==1){
location.href=’restrito.php’ //Redireciona
}else{
$(‘#errolog’).show(); //Informa o erro
}
Coloca:
alert(result);
Antes do if, pra saber qual resultado tá vindo.
Não estava vindo, corrigi o erro, não conectava com o banco. obrigado pela paciência.
Também era problema no sha1, fiz o teste sem o sha e achou no banco.
Blz cara. Qualquer coisa é só falar.
Vlw
Olá, seu script apresentou erros, após testar verifiquei que o retorno de erros de código que podem se tornar obsoletos como o ‘mysql’ impediam a leitura, como muitos utilizam dos códigos de erros em capturas para prever necessidades de atualizar seus scripts oculta-los pode não ser a solução, então necessita-se atualizar para as tags ‘mysqli’. Grato.
Valeu PMunari, irei fazer uma versão mais atualizada do post.
Ok, informe-me sobre o link do novo post se possível, grato.
Muito bom!
Highly descriptive post, I liked that a lot. Will there be a part 2?
Amigão, eu devo estar sendo de uma ignorância enorme, mas não conheço esse “” que está na segunda linha do terceiro bloco de código. Meu servidor também não, ele fica dizendo
Parse error: syntax error, unexpected ‘<' in (e o caminho do arquivo e linha do código onde está o pre)
Opa Mandaricks. Problema resolvido.
Como faço pra exibir o nome do usuário logado?
Obrigado!
Tenho outra dúvida. Como faço pra pegar mais dados do usuário logado por SESSION?
Da mesma forma Rooney, só que ao invés de nomeUsuario você vai usar usuarioID e email.
Sim… Tipo, eu acrescentei uma nova coluna na tabela com outras informações e queria puxá-las…
Só criar um novo item no array $_SESSION, coloca $_SESSION[‘seuItem’] = ‘SEU valor’;
Ou então pega o id do usuário e faz uma consulta no banco de dados.
Consegui. Muito obrigado!
Cara, perfeito o seu tutorial. Simples e objetivo. Muito fácil de seguir e entender.
Funcionou perfeito aqui.
Obrigado.
Muito bom o tutorial, agora digamos que eu pretenda usar esse sistema num app hibrido, nesse caso não poderia usar codigo php direto no script, teria que criar um metodo para restringir as paginas em javascript (ajax) e pegando o id do usuario, como eu faria isso?
Olá, como eu faço em vez do success: function(result) retornar echo “1”, retornar $_SESSION[‘nome’]. Sei que da pra imprimir utilizando , porém no que eu to precisando agora é pra que retorne em json para o success do ajax. Se puder ajudar, vai ser de suma importancia.
Obrigada
Brows perfeito, só que está obsoleto, “mysql” meu servidor externo por exemplo não aceita, da erro de conexão e diz “deprecade bla!!bla!!”, atualiza que tem tudo a ver pra quem quer desenvolver no app no cordova.
Dá uma atualizada aí!!
Valew!!
Oi Peter.
Temos alguns tutoriais sobre API RESTFUL, que podem ajudar:
http://clubedosgeeks.com.br/programacao/php/api-restful-com-php-e-slim-framework
http://clubedosgeeks.com.br/programacao/php/api-restful-laravel
Opa beleza meu caro desculpe pela demora
Opá beleza, professo… então fiz este comentário devido estar tentando desenvolver um app pelo cordova utilizando a sessionStorage só que o problema é que a maioria dos tutos em AJAX o start(), são em pag.php, que não é o caso em html lado cliente, o seu exemplo chega bem próximo ao que eu quero, atualizei por aqui pra misqli, então relacionei uma tabela_fk, o problema parou por aí não consigo realizar a inserção, explicando “Quero mostrar os pedidos só de um cliente na sessão dele ao logar-se” acho que o é o problema de todo principiante, mas, deixando claro que em php a session funciona perfeitamente pois é só lado servidor. A pergunta que faço é como as sessions se conversam lado cliente e servido para otimizar a funcionalidade do app.
Mas meu caro, caso tenha uma dica que facilite minha vida agradeço bastante.
Valeu e até +.
Oi Peter. Você vai precisar usar outra estratégia para autenticação, pois não dá pra trabalhar com sessões quando o cliente é ionic (ou mobile). Recomendo o JWT e o Laravel Passport para isso. Seu servidor vai dar um token ao usuário, que ele vai usar para todas as requisições de áreas protegidas.
Opa meu caro tudo bem, dei uma atualizada no codigo convertendo para mysqli então tentei relacionar uma tabela pedidos para o usuarios e não deu certo a inserção, porem quando segrego as tabelas ai consigo cadastrar os pedidos, consigo logar tranquilamente estando ou não relacionadas tem alguma dica?
Abaixo as tables;
CREATE TABLE `usuarios ` (
`id` int(9) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `usuarios `
ADD PRIMARY KEY (`id`);
ALTER TABLE `usuarios `
MODIFY `id` int(9) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
CREATE TABLE `pedidos` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(100) NOT NULL,
`name` int(5) NOT NULL,
`price` decimal(10,2) NOT NULL,
`login_id` int(11) NOT NULL,
PRIMARY KEY (`id`),
CONSTRAINT FK_pedidos_1
FOREIGN KEY (login_id) REFERENCES usuarios (id)
ON UPDATE CASCADE ON DELETE CASCADE
) ENGINE=InnoDB;
Abraços
Oiii, estou tentando seguir o tutorial, ams ta dando o seguinte erro: extension, edge, https, chrome-untrusted.
jquery.min.js:4 POST file:///C:/xampp/htdocs/projeticolos/login.php net::ERR_FAILED
index.html:1 Access to XMLHttpRequest at ‘file:///C:/xampp/htdocs/projeticolos/login.php’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
jquery.min.js:4 POST file:///C:/xampp/htdocs/projeticolos/login.php net::ERR_FAILED