Symfony 2 FOS User Bundle modal Bootstrap AJAX Login
Quelqu'un a déjà construit un formulaire de connexion à l'intérieur d'un modal Bootstrap avec Symfony 2 et de FOS User Bundle ?
Voici ce que j'ai maintenant :
src/Webibli/UserBundle/Resources/config/services.yml
authentication_handler:
class: Webibli\UserBundle\Handler\AuthenticationHandler
arguments: [@router, @security.context, @fos_user.user_manager, @service_container]
app/config/security.yml
form_login:
provider: fos_userbundle
success_handler: authentication_handler
failure_handler: authentication_handler
src/Webibli/UserBundle/Handler/AuthenticationHandler.php
<?php
namespace Webibli\UserBundle\Handler;
use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Routing\RouterInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\Routing\Router;
use Symfony\Component\Security\Core\SecurityContext;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
class AuthenticationHandler implements AuthenticationSuccessHandlerInterface, AuthenticationFailureHandlerInterface
{
protected $router;
protected $security;
protected $userManager;
protected $service_container;
public function __construct(RouterInterface $router, SecurityContext $security, $userManager, $service_container)
{
$this->router = $router;
$this->security = $security;
$this->userManager = $userManager;
$this->service_container = $service_container;
}
public function onAuthenticationSuccess(Request $request, TokenInterface $token) {
if ($request->isXmlHttpRequest()) {
$result = array('success' => true);
$response = new Response(json_encode($result));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
else {
//Create a flash message with the authentication error message
$request->getSession()->getFlashBag()->set('error', $exception->getMessage());
$url = $this->router->generate('fos_user_security_login');
return new RedirectResponse($url);
}
return new RedirectResponse($this->router->generate('anag_new'));
}
public function onAuthenticationFailure(Request $request, AuthenticationException $exception) {
if ($request->isXmlHttpRequest()) {
$result = array('success' => false, 'message' => $exception->getMessage());
$response = new Response(json_encode($result));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
return new Response();
}
}
Et voici le Rameau point de vue je suis le chargement dans mon Bootstrap modal:
{% extends 'UserBundle::layout.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block user_content %}
<script>
$('#_submit').click(function(e){
e.preventDefault();
$.ajax({
type : $('form').attr( 'method' ),
url : $('form').attr( 'action' ),
data : $('form').serialize(),
success : function(data, status, object) {
console.log( status );
console.log( object.responseText );
}
});
});
</script>
<div class="modal-dialog">
<div class="modal-content">
<form action="{{ path("fos_user_security_check") }}" method="post" role="form" data-async data-target="#rating-modal" class="text-left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{ 'layout.login'|trans }}</h4>
</div>
<div class="modal-body">
{% if error %}
<div>{{ error|trans }}</div>
{% endif %}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<div class="form-group container">
<label for="email">{{ 'security.login.username_email'|trans }}</label>
<input type="text" class="form-control" id="username" name="_username" value="{{ last_username }}" required="required" placeholder="[email protected]">
</div>
<div class="form-group container">
<label for="password">{{ 'security.login.password'|trans }}</label><br />
<input type="password" id="password" name="_password" required="required" class="form-control" placeholder="********">
</div>
<div class="form-group container">
<label for="remember_me">
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
{{ 'security.login.remember_me'|trans }}
</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" class="btn btn-primary">
</div>
</form>
</div>
</div>
{% endblock %}
Le formulaire de connexion fonctionne parfaitement bien sans AJAX. Je suis juste essayer d'obtenir d'erreur sur mon formulaire modal si il y a un problème, ou de rediriger l'utilisateur si la connexion est réussie.
Quelqu'un peut-il expliquer comment y parvenir?
À quel point est-ce que l'AJAX fonctionne pas, vous pouvez essayer de mettre en œuvre l'erreur de rappel pour voir quelle est la réaction que vous obtenez à partir du serveur, le cas échéant.
J'ai toujours un succès parce que la demande de travail, mais la connexion n'est pas réussi et je ne sais pas comment faire Symfony retour un message d'erreur en JSON au lieu d'un message flash. Pour le moment, la réponse de l'appel AJAX est toujours une pleine page HTML, ce qui est ennuyeux, parce que je ne veux que le contenu qui est censé aller dans le modal.
J'ai toujours un succès parce que la demande de travail, mais la connexion n'est pas réussi et je ne sais pas comment faire Symfony retour un message d'erreur en JSON au lieu d'un message flash. Pour le moment, la réponse de l'appel AJAX est toujours une pleine page HTML, ce qui est ennuyeux, parce que je ne veux que le contenu qui est censé aller dans le modal.
OriginalL'auteur f0x7ed | 2013-10-18
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la solution. Voici ce que j'ai ajouté à mon javascript,
Et voici mon
onAuthenticationFailure
méthode de mon gestionnaire,Je pense que c'est l'URL de mon Ajax méthode qui était faux. Merci pour vos conseils.
OriginalL'auteur f0x7ed
Je suppose que ce que vous cherchez est: est-ce Symfony2 ajax login.
votre javascript serait regarder qqch. comme ceci:
Vous devez également modifier le isXmlHttpRequest-une partie de votre onAuthenticationSuccess-Méthode:
fine 🙂 auriez-vous l'esprit de marquer ma réponse comme solution, de toute façon?
OriginalL'auteur Andy Rosslau