I actually try to make an custom authentication using AJAX and Symfony but I have a problem that I can’t even identify. It seems that the AJAX part doesn’t find the route because my browser console can’t “recognize” my route script. I tried to identify AJAX data compared to input fields data and the problem is that AJAX returns undefined values. I’ll put the different parts of my code below :
Twig modal with AJAX script :
<div class="modal fade" tabindex="-1" role="dialog" id="loginModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Connexion</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" align="center"> <form action="#" method="POST"> <label for="pseudoMail">Pseudo ou e-mail : </label> <input type="text" id="pseudoMail" placeholder="Pseudo ou e-mail" name="pseudoMail" required><br> <label for="mdp">Mot de passe : </label> <input type="password" id="mdp" placeholder="Mot de passe" name="mdp" required><br> <input type="submit" class="btn btn-primary" id="login" value="Se connecter" /> </form> </div> </div> </div> </div> <script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script> <script> $(document).ready(function () { $("#login").click(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ type: 'POST', url: '{{ path('checkLogin') }}', data: { pseudo: $("input#pseudoMail").val(),//TODO Remplir l'Ajax de façon à ce que les données soient reconnues motdepasse: $("input#mdp").val() }, dataType: 'json', success: function(data) { if(data.pseudo !== "" && data.motdepasse !== "")//TODO Modifier la condition et jouer les sons correspondants (dossier sfx) { setTimeout(alert("Vous êtes connecté !"), 5000); var sound = document.createElement('audio'); sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_1-up.wav'); sound.play(); } else { alert("Les identifiants ne correspondent pas. Veuillez réessayer."); var sound = document.createElement('audio'); sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_fireworks.wav'); sound.play(); } }, error: function(data) { console.log("Pseudo : " + data.pseudo); console.log("Mot de passe : " + data.motdepasse); console.log("Pseudo sans data : " + $('input#pseudoMail').val()); console.log("Mot de passe sans data : " + $('input#mdp').val()); console.log(data); alert("Erreur détectée ! " + data); } }); }); }); </script>
The PHP script :
/** * @Route("/checkLogin", name="checkLogin") */ public function checkLogin(Request $request, SessionInterface $session)//TODO vérifier les connexions pour mesures de sécurité ? { $pseudoMail = $request->request->get('pseudoMail'); $motdepasse = $request->request->get('mdp'); $repo = $this->getDoctrine()->getRepository(Utilisateur::class); $pseudoDB = $repo->findOneBy(["pseudo" => $pseudoMail]); $mailDB = $repo->findOneBy(["email" => $pseudoMail]); $motdepasseDB = $repo->findOneBy(["motDePasse" => $motdepasse]); if (($pseudoDB && $motdepasseDB) || ($mailDB && $motdepasseDB)) { $session->set('login', true); /*return $this->render('boutique/index.html.twig', [ 'controller_name' => 'BoutiqueController', ]);*/ var_dump($pseudoMail . "-" . $motdepasse); return new JsonResponse(array('pseudo' => $pseudoMail, 'motDePasse' => $motdepasse)); } else { $session->set('login', false); //$this->addFlash('flash', "Login incorrect. Veuillez réessayer."); /*return $this->render('accueil/index.html.twig', [ 'controller_name' => 'AccueilController', ]);*/ return new Response("Problème !"); } }
Advertisement
Answer
As charlietfl said, you get different keys between your AJAX code and your PHP code. They should equal.
data: { pseudo: $("input#pseudoMail").val(), motdepasse: $("input#mdp").val() },
In your AJAX request, keys are pseudo
and motdepasse
. So, in your PHP code, you should use those keys like that:
$pseudoMail = $request->request->get('pseudo'); $motdepasse = $request->request->get('motdepasse');