Tengo mi archivo PHP llamado validatecredentials.php. Básicamente es un inicio de sesión, lo que quiero hacer es que si el usuario inició sesión correctamente, se muestre un SweetAlert con un mensaje de éxito, y que si el usuario no lo ha hecho correctamente, se muestre un SweetAlert con un mensaje de fracaso. Pero no lo he podido hacer funcionar.
Este es mi código PHP:
<?php
header("Content-Type: text/html; charset=UTF-8");
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$contra = filter_input(INPUT_POST, 'contra', FILTER_SANITIZE_STRING);
// Importar SweetAlert2
const Swal = require('sweetalert2');
//Crear la conexion SQL
$conn = mysqli_connect($host, $dbUsername, $dbPassword, $dbname);
if (!$conn) {
die("Conexión fallida: " . mysqli_connect_error());
}
$sql = "SELECT password FROM webcustomers WHERE email = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $hashedPassword);
mysqli_stmt_fetch($stmt);
if (password_verify($contra, $hashedPassword)) {
// Si la contraseña ingresada es correcta, inicia sesión en la aplicación
$hashedCookieEmail = hash("sha256", $email);
$hashedCookiePass = hash("sha256", $hashedPassword);
setcookie("emailUsuario", $hashedCookieEmail, time() + (86400 * 30), "/");
setcookie("contraUsuario", $hashedCookiePass, time() + (86400 * 30), "/");
?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script>
Swal.fire({ icon: "success", title: "Inicio de sesión exitoso", confirmButtonText: "Genial!" });
</script>
<?php
return;
} else {
// Si la contraseña ingresada es incorrecta, muestra un mensaje de error
?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'La contraseña es incorrecta'
});
</script>
<?php
return;
}
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>
He intentado sacando esta línea y agregándola, pero no funciona:
const Swal = require('sweetalert2');
Y cuando lo he sacado me aparece el siguiente error en consola:
Uncaught ReferenceError: Swal is not defined
at validatecredentials.php:3:9
He intentado realizando una petición a AJAX, pero incluso de esta forma sigue sin funcionar. Mi código de Javascript es el siguiente:
// Captura el evento de envío del formulario de inicio de sesión
document.querySelector('loginForm').addEventListener('submit', function (event) {
// Previene que se envíe el formulario por defecto
event.preventDefault();
// Obtiene los valores de los campos de correo electrónico y contraseña
var email = document.querySelector('#email').value;
var contra = document.querySelector('#contra').value;
// Crea un objeto FormData para enviar los datos del formulario mediante AJAX
var formData = new FormData();
formData.append('email', email);
formData.append('contra', contra);
// Envía una petición AJAX al archivo PHP validatecredentials.php
var xhr = new XMLHttpRequest();
xhr.open('POST', 'validatecredentials.php');
xhr.send(formData);
xhr.onload = function () {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
// Si el inicio de sesión fue exitoso, muestra un mensaje de éxito con SweetAlert
Swal.fire({
icon: 'success',
title: 'Inicio de sesión exitoso',
text: 'Bienvenido a Strant Store'
});
// Redirige al usuario a la página tienda.php
window.location.href = 'https://strant.store/tienda.php';
} else {
// Si el inicio de sesión no fue exitoso, muestra un mensaje de error con SweetAlert
Swal.fire({
icon: 'error',
title: 'Oops...',
text: response.error
});
}
} else {
// Si hubo un error en la petición, muestra un mensaje de error con SweetAlert
Swal.fire({
icon: 'error',
title: 'Oops...',
text: response.error
});
}
}
});
Pero sigue sin funcionar el SweetAlert, inserta las cookies en el navegador, pero no muestra los SweetAlert. Cabe destacar que mi PHP lo he modificado con las siguientes líneas de código para poder manejar la petición de AJAX
$response = array('success' => true);
echo json_encode($response);
Muchas gracias!