Symfony的2 FOS用户捆绑引导模式AJAX登录 [英] Symfony 2 FOS User Bundle Bootstrap modal AJAX Login

问题描述

有没有人已经建立了一个登录表单的引导模式与内部的Symfony 2和FOS用户捆绑？

Has anyone already built a login form inside a Bootstrap modal with Symfony 2 and FOS User Bundle ?

下面是我现在的：

的src / Webibli / UserBundle /资源/配置/ service.yml

authentication_handler:
    class:        Webibli\UserBundle\Handler\AuthenticationHandler
    arguments:    [@router, @security.context, @fos_user.user_manager, @service_container]

应用/配置/ security.yml

form_login:
    provider: fos_userbundle
    success_handler: authentication_handler
    failure_handler: authentication_handler

的src / Webibli / UserBundle /处理器/ 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();
    }
}

这里是嫩枝认为我加载到我的引导模式：

And here is the Twig view I am loading into my 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">&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="[e-mail]">
            </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 %}

登录表单是工作完全正常没有Ajax。我只是试图让错误在我的模式形式，如果有问题，或重定向用户是否登录成功。

The login form is working perfectly fine without AJAX. I am just trying to get error on my form in the modal if there is a problem, or redirect the user if the login is successful.

任何人都可以解释如何做到这一点？

Can anyone explain how to achieve that?

推荐答案

我已经找到了解决方案。这是我加入到我的javascript，

I have found the solution. Here is what I added to my 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>

和这里是我的 onAuthenticationFailure 从我的处理方法，

And here is my onAuthenticationFailure method from my handler,

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;
}

我觉得这是从我的Ajax方法是错误的URL。谢谢您的建议。

I think that it was the URL from my Ajax method that was wrong. Thank you for your advices.

这篇关于Symfony的2 FOS用户捆绑引导模式AJAX登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！