É o sonho de todo desenvolvedor criar ou trabalhar em uma página da Web ou projeto da Web que prometa recursos de segurança de alto nível e atenda às preocupações de privacidade de todos os usuários. No entanto, antes de criar e hospedar um site em um servidor, você precisa seguir as melhores práticas de codificação.
Só porque você deseja criar uma página da Web segura não significa que seu código deva ser compreensível apenas aos olhos de um cientista de foguetes. Simplicidade é a chave no desenvolvimento de código incrível.
Um código simples não é um código fraco, mas compreensível. A simplicidade se aplica à refatoração de código e ao uso contínuo de comentários. Além disso, ajuda você a avaliar e editar seu código posteriormente, quando precisar reutilizá-lo em outros projetos. Como este artigo procura fornecer um passo a passo sobre como criar uma página de login segura em PHP e MySQL, primeiro precisamos considerar os benefícios dessa abordagem.
Criando um script de login seguro em PHP e MySQL
Primeiro, como sua página de login concederá acesso privilegiado às informações armazenadas pelo usuário, você desejará evitar que ladrões cibernéticos e hackers comprometam facilmente seu sistema e saiam impunes de dados confidenciais. Em segundo lugar, sem uma plataforma web segura, infraestruturas de TI como redes e sites correm o risco de ataques de cibersegurança e malware.
Primeiros passos
Neste tutorial de artigo, estamos assumindo que você precisa de uma página de login segura por dois motivos. Primeiro, você pode estar trabalhando em um sistema web dedicado onde precisa de acesso de administrador a dados ou informações armazenados de forma sensível. Em segundo lugar, seu sistema web pode acomodar usuários ou visitantes específicos aos quais serão atribuídas as credenciais de login necessárias antes que possam efetuar login na área do painel do seu sistema web.
O aspecto mais importante deste tutorial de artigo é o nosso ambiente de servidor web. Precisamos de um, pois nosso sistema web usará um banco de dados MySQL para consultar usuários ativos e conceder a eles acesso autoritário ao sistema web criado.
Requisitos
O XAMPP é um ambiente de servidor web local ideal para testar seus projetos baseados na web em uma máquina local. Ele fornece a perspectiva de desempenho dos sites antes de lançá-los em um ambiente de produção. O XAMPP está disponível para usuários de Windows, Linux e OS X, tornando-o um ambiente de servidor web multiplataforma. Além disso, o XAMPP abrevia Apache, MariaDB (um fork do MySQL), PHP e Perl, tornando-o um ambiente de desenvolvimento PHP completo.
Depois de instalar o XAMPP, você não precisa instalar nenhum outro software de terceiros para que seus projetos PHP sejam executados.
Instalação do XAMPP Linux
O download do arquivo XAMPP terá uma extensão “.run”. O primeiro passo é torná-lo executável. Abra seu terminal no local do arquivo XAMPP baixado e considere a seguinte abordagem. Certifique-se de que o nome do arquivo XAMPP digitado corresponde ao que você baixou.
$ chmod 755 xampp-linux-x64-8.0.7-0-installer.run
Depois, você poderá iniciar o instalador do XAMPP com o seguinte comando.
$ sudo ./xampp-linux-x64-8.0.7-0-installer.run
Siga as etapas de instalação até que o XAMPP esteja totalmente instalado em seu computador.
Certifique-se de que as caixas acima estejam marcadas para serem seguras.
A instalação levará algum tempo para ser concluída
Iniciar o XAMPP a partir do seu terminal Ubuntu requer o uso do seguinte comando.
$ sudo /opt/lampp/lampp start
Uma saída como a captura de tela a seguir significa que está tudo bem.
Se você encontrar erros ao iniciar o XAMPP, pode haver três soluções de diagnóstico para o problema. Primeiro, você pode ter instalado o Apache e o XAMPP simultaneamente. Você pode resolver esse problema interrompendo o serviço Apache do terminal e reiniciando o XAMPP, pois o Apache já está empacotado como um de seus pacotes.
$ sudo /etc/init.d/apache2 stop
$ sudo /opt/lampp/lampp start
Um servidor NGINX instalado também pode estar usando a porta 80 da sua máquina necessária para o Apache do XAMPP. Portanto, você precisará parar o NGINX e reiniciar o XAMPP.
$ sudo systemctl stop nginx
$ sudo /opt/lampp/lampp start
Você também pode ter um servidor MySQL instalado simultaneamente com o XAMPP. O servidor XAMPP já vem com um pacote MySQL. Você precisará parar o que está sendo executado em seu sistema.
$ sudo /etc/init.d/mysql stop
$ sudo /opt/lampp/lampp start
O problema final é que você pode estar perdendo a ferramenta netstat em seu sistema. Você pode instalá-lo com o seguinte comando.
$ sudo apt install net-tools
Para verificar a instalação bem-sucedida do XAMPP em seu sistema, você deve poder acessar confortavelmente a seguinte URL do seu navegador.
http://localhost/dashboard/
A página de destino deve se parecer com a captura de tela a seguir.
Você também deve poder acessar a página de destino do phpMyAdmin confortavelmente.
http://localhost/phpmyadmin
A captura de tela a seguir verifica se o phpMyAdmin está funcionando bem.
Nosso objetivo do tutorial
Depois de baixar e instalar a versão do XAMPP que favorece a plataforma do seu sistema operacional, precisamos destacar os principais objetivos deste artigo.
Ao final deste artigo do tutorial, você terá entendido os quatro conceitos principais a seguir por trás da criação de uma página de login segura em PHP e MySQL.
-
Design de formulário:aqui, você precisa explorar alguns módulos de HTML5 e CSS3
-
Preparando consultas SQL:As consultas SQL que você cria devem ser à prova de balas para injeções de SQL. É a única maneira de manter a integridade do seu banco de dados MySQL.
-
Validação de formulário básico:o nome de usuário e a senha de um usuário devem corresponder aos armazenados no banco de dados para que não sejam credenciais válidas.
-
Gerenciamento de sessão:As sessões são boas, pois um sistema deve se lembrar de um usuário repetitivo sem que ele precise digitar suas credenciais de login toda vez que visitar um site. Você poderá inicializar sessões e mantê-las ativas.
Estrutura e configuração do projeto
Como agora temos certeza de que o servidor web Apache e o servidor de banco de dados MySQL estão em execução, o próximo passo é criar nosso código PHP. Mas, primeiro, precisamos nos familiarizar com seu painel de controle. Quando a instalação do XAMPP estiver concluída, ela será iniciada com um painel de controle semelhante à captura de tela abaixo.
Se você clicar no menu “Gerenciar Servidores” em seu cabeçalho, verá três servidores em execução (Apache, MySQL e ProFTPD). Todos esses três servidores precisam estar em execução. Isso significa que o servidor XAMPP está em um estado íntegro.
Clique no menu “Abrir pasta do aplicativo” neste painel de controle do XAMPP e rastreie um diretório chamado “htdocs”. Em seguida, crie uma pasta com um nome como “fosslinux_login” dentro deste diretório. Será o principal ponto de acesso do nosso projeto. Dentro desta pasta “fosslinux_login”, crie os seguintes arquivos e considere suas respectivas extensões de arquivo.
\ -- Project files structure
| -- authenticate.php
| -- home.php
| --
| -- logout.php
| -- style.css
A maneira mais simples de obter essa atribuição de criação de arquivo é navegar até a interface gráfica da pasta “fosslinux_login” e abrir o terminal do sistema a partir de sua localização e, em seguida, usar o comando “touch” para criar os arquivos declarados. Por exemplo, para criar o arquivo index.html, você usaria a seguinte abordagem de comando de toque.
root@FOSSlinux:/opt/lampp/htdocs/fosslinux_login# touch index.html
O arquivo index.html criado usará principalmente as linguagens de programação HTML5 e CSS3 para criar o formulário de login para digitar os nomes de usuário e senhas necessários.
O arquivo style.css criado atuará como um script CSS externo referenciado pelo cabeçalho do arquivo index.html.
O arquivo authenticate.php criado tratará da autenticação do usuário, da conexão com o banco de dados, da validação de dados do formulário, da recuperação dos resultados do banco de dados e da criação de novas sessões.
O arquivo logout.php criado tratará da destruição das sessões de login antes de redirecionar o usuário para a tela de login novamente.
O arquivo home.php criado é o destino ou a página inicial para usuários que efetuam login com êxito no sistema da web.
O arquivo profile.php criado associa um usuário logado com sucesso com seus detalhes de conta de usuário preenchidos e personalizados.
Nosso design de formulário de login
Para que nosso script de loin PHP e MySQL funcione, precisamos criar um formulário de login a partir do qual os usuários autenticados inserirão suas informações de login. Assim, estamos criando o front-end da nossa página de login. Só precisamos de CSS e HTLM para esta tarefa. Usaremos PHP para a parte lógica do nosso script.
Você pode usar o editor nano ou qualquer outro editor de sua escolha para abrir o arquivo index.html que você criou anteriormente.
root@FOSSlinux:/opt/lampp/htdocs/fosslinux_login# nano index.html
Preencha o arquivo com o seguinte segmento de código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FossLinux Login Tutorial</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="login">
<h1>FossLinux Login Tutorial</h1>
<form action="authenticate.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>Agora precisamos visualizar a exibição resultante desse código. No seu navegador, digite o seguinte endereço.
http://localhost/fosslinux_login
A exibição resultante deve ser semelhante à captura de tela a seguir.
Como a exibição acima é básica, precisamos adicionar algum estilo ao nosso formulário de login por meio de CSS. Então, primeiro, abra o arquivo style.css que você criou anteriormente com seu editor de terminal favorito.
root@FOSSlinux:/opt/lampp/htdocs/fosslinux_login# nano style.css
Preencha-o com o seguinte segmento de código CSS.
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}Precisamos vincular este arquivo style.css ao nosso arquivo index.html para testemunhar as mudanças notáveis. Adicione o seguinte ao cabeçalho do seu arquivo index.html.
<link href="style.css" rel="stylesheet" type="text/css">A tag acima deve estar entre as tags e em seu arquivo index.html.
Se você atualizar a página de exibição de login, deverá obter uma visualização de um formulário de login mais atraente, conforme ilustrado na captura de tela a seguir.
Vamos agora tentar entender o que fizemos com nosso formulário de login. A forma possui dois atributos, “ação” e “método”. O atributo “method” é definido como “post”, pois estaremos alimentando os dados do usuário no sistema do servidor e não recebendo, pois isso exigiria o atributo “method” definido como “get”. O atributo “action” é definido como “authenticate.php” porque é o arquivo que trata da autenticação dos dados do usuário digitados. É o arquivo que processa as entradas de dados do formulário bem-sucedidas.
Quanto aos campos do formulário, os tipos de entrada são “texto” para o nome de usuário e “senha” para a senha do usuário. A entrada “texto” será visível ao olho humano, ao contrário da entrada “senha” que deveria ser criptografada durante a entrada do usuário. O tipo de entrada “submit” é a ação final para enviar os dados do usuário capturados para processamento pelo arquivo “authenticate.php”.
Configurando o banco de dados e as tabelas necessárias
Aqui, você precisará navegar até o link “http://localhost/phpmyadmin/” para acessar o banco de dados MySQL. A interface phpMyAdmin resultante tem a função principal de gerenciar um aplicativo de banco de dados MySQL.
Na parte superior desta interface, você verá uma guia "Bancos de dados". Clique nele para criar um novo banco de dados. Nomeie-o com algo como “fosslinuxlogin”.
Depois de clicar em "criar", o novo banco de dados (fosslinuxlogin) aparecerá na seção/painel do menu esquerdo da tela. Sua tarefa de rede seria criar as tabelas necessárias para seu banco de dados. Precisamos apenas de uma tabela para este artigo tutorial.
Para criar e preencher uma tabela com o phpMyAdmin, você tem a opção de fazê-lo graficamente ou usando a tela do console na parte inferior da tela da interface. Usar o console é muito mais eficiente, pois só precisamos criar uma única instrução SQL para criar e preencher uma tabela inteira. Por exemplo, considere a seguinte instrução de código SQL.
CREATE TABLE IF NOT EXISTS `accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'Brandon', '[email protected]', '[email protected]');
Conforme ilustrado pelas capturas de tela abaixo, uma vez que você pressionar Ctrl+Enter em seu teclado, a instrução SQL será executada e sua tabela de banco de dados será preenchida.
Criamos um banco de dados de contas com quatro colunas (id, nome de usuário, senha e email). Também atribuímos a essas colunas da tabela alguns valores padrão, mas precisaremos principalmente dos valores de nome de usuário e senha para testar o script de login do PHP.
Autenticação de usuários
Em seu estado, criamos um formulário de login estático atraente e também configuramos nosso banco de dados MySQL. O banco de dados possui uma tabela e alguns dados úteis do usuário para impulsionar a próxima etapa deste tutorial. Primeiro, precisamos trabalhar no arquivo authenticate.php vinculado ao atributo “action” do nosso formulário de login.
Usando seu editor de terminal favorito, preencha o arquivo authenticate.php criado com os dados a seguir.
<?php
session_start();
// Change this connection setting to your preference.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'fosslinuxlogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}O script começa iniciando uma sessão. Esta etapa é vantajosa, pois o servidor da Web lembra os detalhes de login da conta do usuário. Assim, quando os mesmos usuários fizerem logout e retornarem ao site mais tarde usando o mesmo computador, será fácil fazer login novamente sem digitar um novo nome de usuário e senha.
Também especificamos o banco de dados ao qual desejamos nos conectar, juntamente com seu host, usuário e senha, se houver.
O primeiro passo para autenticar nosso formulário de login é garantir que um usuário não possa enviar um formulário vazio. Ambos os campos devem ser preenchidos. Adicione o seguinte código ao seu arquivo authenticate.php para nos ajudar a atingir esse objetivo.
// Time to check if the login form data was submitted. The isset() function checks if the form data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not fetch any data from form subbmission
exit('Please make sure you filled both the username and password form fields!');
}Com o snippet de código acima, um usuário receberá um erro ao enviar um formulário vazio. Como lidamos com envios de formulários em branco, agora precisamos autenticar o envio do formulário do usuário com dados que já existem no banco de dados.
Adicione o seguinte código ao seu arquivo authenticate.php.
// We need to Prepare our SQL. This SQL preparation helps prevent SQL injections
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc). Since a string is the username in our case, we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store or preserve the results. It helps counter-check if the user account exists within our database.
$stmt->store_result();
$stmt->close();
}
?>Os valores de id e senha são selecionados na tabela do banco de dados e comparados com as entradas do usuário. Ele vincula os valores de id e senha ao valor de nome de usuário. Uma vez que a instrução SQL é executada com sucesso, os resultados são armazenados para serem usados como sessões. Como você pode ver no código acima, a linha “
$stmt->store_result(); ” cuida desse objetivo de armazenamento de sessão. A próxima linha de código a ser adicionada ao seu arquivo authenticate.php deve suceder a seguinte instrução de código:
$stmt->store_result(); Adicione o trecho de código a seguir após a instrução de código destacada acima.
if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// At this point, the account exists. The only thing left is to verify the password.
// The use of password_hash in the registration file is encouraged for the storage of hashed passwords.
if ($_POST['password'] === $password) {
// Verification was a success! Use log in took place!
// Sessions creation takes place because a user is logged in. Sessions functionality resemble cookies because they can remember the server's data.
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
echo 'Welcome ' . $_SESSION['name'] . '!';
} else {
// Incorrect password
echo 'Incorrect username and/or password!';
}
} else {
// Incorrect username
echo 'Incorrect username and/or password!';
}O código acima lida com a consulta do banco de dados para a viabilidade de quaisquer resultados. Se o nome de usuário digitado não estiver no banco de dados, não haverá nada para mostrar. Se um usuário for autenticado com sucesso, ocorre a inicialização das variáveis de sessão. O servidor da web armazena essas variáveis e o navegador da web do usuário as referencia para determinar o status de login do mesmo usuário.
É hora de testar a viabilidade do nosso código de autenticação. Atualize seu link “http://localhost/fosslinux_login/” antes de continuar.
Tente fazer login com uma combinação incorreta de nome de usuário e senha e veja o que acontece.
Do meu lado, recebi o erro de captura de tela acima.
Agora faça login com a combinação correta de nome de usuário e senha armazenada em seu banco de dados MySQL.
Nossa página de destino
Ter uma página de login não é suficiente para nosso tutorial, um usuário que logar com sucesso no sistema deve ser redirecionado para uma página inicial. A partir daqui, esse usuário também terá a opção de sair do sistema, se for conveniente. Primeiro, preencha seu arquivo home.php criado com o seguinte trecho de código.
<?php
// We should always remember to use sessions. Te code statement belows start should always be used to start sessions.
session_start();
// A user not actively logged-in is redirected to the main login page...
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit;
}
?>
Adicione o seguinte código HTML ao seu arquivo home.php.
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>FossLinux Home Page</title>
<linkhref="style.css"rel="stylesheet"type="text/css">
<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<bodyclass="loggedin">
<navclass="navtop">
<div>
<h1>FossLinux Login Tutorial</h1>
<ahref="logout.php"><iclass="fas fa-sign-out-alt"></i>Logout</a>
</div>
</nav>
<divclass="content">
<h2>FossLinux Home Page</h2>
<p>Welcome back, <?=$_SESSION['name']?>!</p>
</div>
</body>
</html>
Esta página inicial também precisa de algum estilo. Adicione o seguinte código ao seu arquivo style.css.
.navtop {
background-color: #2f3947;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #eaebed;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #eaebed;
}
body.loggedin {
background-color: #f3f4f7;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content > p, .content > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content > p table td, .content > div table td {
padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
font-weight: bold;
color: #4a536e;
padding-right: 15px;
}
.content > div p {
padding: 5px;
margin: 0 0 10px 0;
}Como agora temos uma página inicial em seu arquivo authenticate.php, substitua a seguinte linha:
echo 'Welcome ' . $_SESSION['name'] . '!';
Com esta linha:
header('Location: home.php'); Cada login sucessivo agora o redirecionará para esta página inicial.
O script de logout
A exibição da página inicial acima tem um link de logout que precisamos implementar. Um script de logout para seu arquivo logout.php é tão simples quanto o seguinte trecho de código.
<?php
session_start();
session_destroy();
// Redirects the user to the index.html login page:
header('Location: index.html');
?>
Como as sessões determinam o status de login, o script acima destrói todas as sessões existentes e revoga o status de login desse usuário. Finalmente, este script PHP leva o usuário de volta à página de login.
Observação final
Com este tutorial, agora você tem uma base sólida na criação de scripts PHP confiáveis e seguros. Agora você pode criar um sistema que seja confiável para seus usuários ou clientes direcionados. Você lidou com a vulnerabilidade de injeção de SQL e validação e autenticação de dados de formulário. O que resta para você é um pouco de exposição sobre o segmento de código coberto, e você estará a caminho de se tornar um desenvolvedor PHP sênior:codificação feliz e crescimento feliz em sua jornada PHP e MySQL.
