En este tutorial, vamos a crear un formulario de inicio de sesión de PHP. Este formulario consiste en una simple página de inicio de sesión en PHP con base de datos MySQL. Si está buscando un script para crear páginas de inicio de sesión y registro de PHP. Este tutorial es para ti. Puedes descargar todo el código siguiendo este tutorial.
Este script no se basa en ningún marco, todo está construido con código PHP estándar. El conocimiento requerido es PHP básico y MySQL. Y vamos a usar Tailwind CSS para que nuestro formulario se vea bonito.
Al final de este tutorial, creará un formulario de inicio de sesión PHP atractivo y completamente funcional como se muestra a continuación:
# Configuración de la base de datos
Las cuentas de usuario se almacenan en la base de datos MySQL. Y por motivos de seguridad, el campo de la contraseña se codifica antes de almacenarlo en la base de datos.
En primer lugar, creemos una tabla de base de datos para almacenar las cuentas de los usuarios.
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(30) NOT NULL,
password TEXT NOT NULL,
CONSTRAINT constraint_name UNIQUE (username)
)
Hemos agregado una restricción a la tabla para un nombre de usuario único, por lo que no habrá nombres de usuario duplicados.
# Manipulación de cuenta de usuario
Necesitamos una Userclase que sea capaz de crear una cuenta de usuario y verificar la contraseña de un usuario.
Vamos a crear un archivo User.phpcon el siguiente código:
<?php
class User
{
private $dbh;
private $usersTableName = 'users';
public function __construct($database, $host, $databaseUsername, $databaseUserPassword)
{
try {
$this->dbh =
new PDO(sprintf('mysql:host=%s;dbname=%s', $host, $database),
$databaseUsername,
$databaseUserPassword
);
} catch (PDOException $e) {
die($e->getMessage());
}
}
public function create($username, $password)
{
$password = $this->passwordHashed($password);
$statement = $this->dbh->prepare(
'INSERT INTO '.$this->usersTableName.' (username, password) VALUES (:username, :password)'
);
if (false === $statement) {
throw new Exception('Invalid prepare statement');
}
if (false === $statement->execute([
':username' => $username,
':password' => $password,
])) {
throw new Exception(implode(' ', $statement->errorInfo()));
}
}
public function exists($username, $password)
{
$statement = $this->dbh->prepare(
'SELECT * from '.$this->usersTableName.' where username = :username'
);
if (false === $statement) {
throw new Exception('Invalid prepare statement');
}
$result = $statement->execute([':username' => $username]);
if (false === $result) {
throw new Exception(implode(' ', $statement->errorInfo()));
}
$row = $statement->fetch(PDO::FETCH_ASSOC);
if (!is_array($row)) {
return false;
}
return password_verify($password, $row['password']);
}
}
Hay dos API públicas en el código anterior:
- El método
create: este método se utiliza para crear una cuenta. Se utilizapassword_hash()para cifrar la contraseña. Se utiliza la funciónpassword_hashjunto conpassword_verifyla que verás a continuación. - El método
exists: este método se utiliza para verificar si existe un registro de usuario en la base de datos. La lógica es encontrar el registro usando el campo de nombre de usuario, si se encuentra, lo usamospassword_verifypara verificar si la contraseña es correcta. Esta es la forma más reciente y segura en PHP actualmente para verificar contraseñas.
En PHP, solíamos usar MD5 y SHA para codificar una contraseña y comparar el hash almacenado directamente cuando necesitamos verificar la contraseña. Sin embargo, esta técnica ya no es segura. Los algoritmos MD5 y SHA son demasiado débiles para el poder computacional actual, si un atacante roba el hash, puede robar la contraseña.
# Insertar cuenta de usuario
Vamos a crear un script que nos facilitará la tarea de creación de la cuenta.
Esto es bastante fácil de hacer con la ayuda de la Userclase. Crear un archivo insert-user.php:
<?php
include 'User.php';
$user = new User('php_login_system', '127.0.0.1', 'root','root');
$user->create('admin','password');
Actualice la información de acceso a la base de datos en consecuencia y ejecute el comando desde la consola:
php insert-user.php
Debería haber creado una cuenta de usuario con el nombre de usuario adminy la contraseña password. Puede modificar este script para insertar cualquier cuenta con el nombre de usuario y la contraseña deseados.
# Autenticación
El flujo de autenticación ocurre cuando un usuario envía el formulario de inicio de sesión. El script primero verificará el nombre de usuario y la contraseña, si son correctos, asignará una sesión al usuario, luego el usuario puede usar esta sesión para navegar a la página de miembros.
Completemos la parte de creación de sesión.
Cree un archivo login.phpcon el siguiente contenido:
<?php
include 'User.php';
$user = new User('php_login_system', '127.0.0.1', 'root', 'root');
$username = $_POST['username'];
$password = $_POST['password'];
if ($user->exists($username, $password)) {
$_SESSION['login'] = true;
header("member.php'));
} else {
header("index.php?message=".urlencode('incorrect username or password'));
exit();
}
Esta página obtiene el nombre de usuario y la contraseña a través de la $_POSTvariable y verifica su existencia y lo asigna truea una variable de sesión $_SESSION['login']. Cuando esta variable es verdadera, significa que el usuario ha iniciado sesión y la página será redirigida a member.phpuna página de miembro falsa.
Si la credencial es incorrecta, se redirigirá a index.php, que es la página del formulario de inicio de sesión de PHP.
Nos quedan algunas páginas por completar. Vamonos.
# Página de formulario de inicio de sesión
Esta es la página del formulario de inicio de sesión real. Es bastante sencillo, creamos un formulario HTML que se publica en la login.phppágina.
Cree un archivo index.phpcon el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<form action="login.php" method="post">
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="relative bg-white pt-10 pb-8 px-10 shadow-xl mx-auto w-96 rounded-lg">
<div class="divide-y divide-gray-300/50 w-full">
<div class="space-y-6 py-8 text-base text-gray-600">
<?php if (isset($_GET['message'])): ?>
<p class="text-sm text-red-500"><?= $_GET['message']; ?></p>
<?php endif; ?>
<p class="text-xl font-medium leading-7">PHP Login System</p>
<div class="space-y-4 flex flex-col">
<input type="text"
name="username"
placeholder="Username"
class="border border-gray-300/50 p-1 rounded focus:outline-none"/>
<input type="password"
name="password"
placeholder="Password"
class="border border-gray-300/50 p-1 rounded focus:outline-none"/>
</div>
</div>
<div class="pt-8 text-base font-semibold leading-7">
<button type="submit" class="bg-sky-500 hover:bg-sky-600 px-4 py-1 text-white rounded">
Login
</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Como se mencionó anteriormente, esta es una página HTML muy simple. La única parte que nos gusta resaltar es el mensaje, mostraremos un mensaje de advertencia si $_GET['message']está configurado. Esto es útil para alertar a los usuarios sobre el estado de la aplicación.
# página de miembro
También crearemos una página de miembro falsa, no hay nada especial dentro. Si está creando sus páginas de miembros, puede imitar la lógica principal para crear la suya propia.
Crear un archivo member.php:
<?php
session_start();
if (!isset($_SESSION['login']) || !$_SESSION['login'] ) {
header("Location: index.php?message=".urlencode('please login first'));
exit();
}
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="relative bg-white pt-10 pb-8 px-10 shadow-xl mx-auto rounded-lg">
<div class="divide-y divide-gray-300/50 w-full">
<div class="space-y-6 py-8 text-base text-gray-600">
<p class="text-xl font-medium leading-7">Welcome to the PHP Login System member page</p>
</div>
<div class="pt-8 text-base font-semibold">
<a href="logout.php" class="bg-sky-500 hover:bg-sky-600 px-4 py-2 text-white rounded">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
Preste atención a la parte superior de la página. El código PHP tiene que permanecer en la parte superior para que funcione la comprobación de la sesión. La lógica es simple, verifica si $_SESSION['login']es cierto, de lo contrario, redirigirá a los usuarios a la página de inicio de sesión.
# Página de cierre de sesión
Hay un botón de cierre de sesión en el member.php, que redirige a logout.php. En esta página, configuramos el $_SESSION['login']ser falsey redirigimos la página a la página del formulario de inicio de sesión:
<?php
session_start();
$_SESSION['login'] = false;
header("Location: index.php");
# El final
Si sigue el tutorial paso a paso, obtendrá todo el código fuente en su lugar. Sin embargo, si se siente perezoso o necesita descargar el código fuente completo de nosotros. Puede hacerlo pagándonos una pequeña tarifa. Su apoyo nos permitirá producir tutoriales mejores y más detallados.
0 Comentarios