Pakiet użytkowników Symfony 2 FOS Bootstrap modalny AJAX Zaloguj się

Question

Czy ktoś już zbudował formularz logowania wewnątrz modemu Bootstrap z pakietem użytkowników Symfony 2 i FOS?

Oto co mam teraz:

src/Webibli/UserBundle/Resources/config/service.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(); 
    } 
} 

A oto widok Gałązka wczytuję do mojego Bootstrap modalnym:

{% 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">&times;</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="adresse@email.com"> 
      </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 %} 

Formularz logowania działa perfekcyjnie bez AJAX. Po prostu próbuję uzyskać błąd w mojej formie w modalu, jeśli występuje problem, lub przekierować użytkownika, jeśli logowanie się powiedzie.

Czy ktoś może wyjaśnić, jak to osiągnąć?

Answer 1

znalazłem rozwiązanie. Oto co dodałem do mojego javascript,

<script> 
    $(document).ready(function(){ 
     $('#_submit').click(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type  : $('form').attr('method'), 
       url   : '{{ path("fos_user_security_check") }}', 
       data  : $('form').serialize(), 
       dataType : "json", 
       success  : function(data, status, object) { 
        if(data.error) $('.error').html(data.message); 
       }, 
       error: function(data, status, object){ 
        console.log(data.message); 
       } 
      }); 
     }); 
    }); 
</script> 

I tu jest moja metoda onAuthenticationFailure od mojego przewodnika,

public function onAuthenticationFailure(Request $request, AuthenticationException $exception) { 
    $result = array(
     'success' => false, 
     'function' => 'onAuthenticationFailure', 
     'error' => true, 
     'message' => $this->translator->trans($exception->getMessage(), array(), 'FOSUserBundle') 
    ); 
    $response = new Response(json_encode($result)); 
    $response->headers->set('Content-Type', 'application/json'); 

    return $response; 
} 

myślę, że był to URL z mojej metody Ajax, że się myliłem. Dziękuję za porady.

Answer 2

Domyślam się, czego szukasz: Symfony2 ajax login.

Twój javascript wyglądałby tak. tak:

$('#_submit').click(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type  : $('form').attr('method'), 
      url   : $('form').attr('action'), 
      data  : $('form').serialize(), 
      success  : function(data, status, object) { 
       if (data.sucess == false) { 
        $('.modal-body').prepend('<div />').html(data.message); 
       } else { 
        window.location.href = data.targetUrl; 
       } 
      } 
    }); 

Można również zmodyfikować isXmlHttpRequest-część swojego onAuthenticationSuccess-metoda:

[...] 
if ($request->isXmlHttpRequest()) { 
      $targetUrl = $request->getSession()->get('_security.target_path'); 
      $result = array('success' => true, 'targetUrl' => targetUrl); 
      $response = new Response(json_encode($result)); 
      $response->headers->set('Content-Type', 'application/json'); 
      return $response; 
     } 
[...]