2

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!

2 respuestas 2

0

Hola sweetalert2 es para JS tu lo estas poniendo en php prueba a ponerlo asi:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script>
       const Swal = require('sweetalert2')
       Swal.fire({ icon: "success", title: "Inicio de sesión exitoso", confirmButtonText: "Genial!" });
   </script>

ELSE

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script>
       const Swal = require('sweetalert2')
       Swal.fire({
           icon: 'error',
           title: 'Oops...',
           text: 'La contraseña es incorrecta'
       });
   </script>
0

Sucede que estás intentando importar la biblioteca SweetAlert2 en tu archivo PHP, lo cual no es posible, ya que SweetAlert2 es una biblioteca de JavaScript y no de PHP.

En el archivo HTML donde llames a validatecredentials.php debe estar importada la librería:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Y con esto ya reconocerá el Swall. Entonces, en tu condición if y else debería quedar así:

if (password_verify($contra, $hashedPassword)) {
   // ...
   <script>
       Swal.fire({ icon: "success", title: "Inicio de sesión exitoso", confirmButtonText: "Genial!" });
   </script>
   <?php
   return;
} else {
   // ...
   <script>
       Swal.fire({
           icon: 'error',
           title: 'Oops...',
           text: 'La contraseña es incorrecta'
       });
   </script>
   <?php
   return;
}

Y no necesitarías usar:

// const Swal = require('sweetalert2');
10
  • Así lo he hecho, pero no ha funcionado. Lo puedes comprobar en el siguiente enlace. Puedes usar cualquier mail y cualquier contra.
    – user320600
    Commented el 16 feb. 2023 a las 21:23
  • Me aparece el siguiente error: Uncaught ReferenceError: Swal is not defined at validatecredentials.php:3:8
    – user320600
    Commented el 16 feb. 2023 a las 21:24
  • Los importo en el HTML, al comienzo en el head con la linea <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    – user320600
    Commented el 16 feb. 2023 a las 21:29
  • Así mismo he intentado con AJAX, pero sigo sin hacerlo funcionar lamentablemente.
    – user320600
    Commented el 16 feb. 2023 a las 21:29
  • Intenta ponerlo al final... los scripts siempre van al final, justo antes del cierre del body... y borra const Swal = require('sweetalert2'); Commented el 16 feb. 2023 a las 21:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.