无需重新加载页面即可登录WordPress AJAX

时间:2014-03-03 作者:Fabio

我目前正在开发一个WordPress主题,我希望用户能够在注册或登录网站之前上传图像。

最初的问题是,您无法使用wp.media 如果您不是注册用户,请使用JavaScript类。

我创建的解决方案实际上非常简单:

当用户到达注册页面时,JavaScript代码会检查用户是否登录,如果不是,我们会使用随机电子邮件和密码创建一个临时用户,并使用这个新创建的临时用户登录访问者,所有操作都在后台进行。之后,想法是一旦用户注册了自己的数据,这个临时用户将使用正确的访问者数据进行更新。

现在是棘手的部分。我希望WordPress在不重新加载页面的情况下将此用户标识为已登录,为了实现这一点,我在操作中添加了一个函数set_logged_in_cookie, 这样我就可以得到$_COOKIE WordPress将要设置给这个新登录用户的数据,并通过ajax调用检索它,然后我用JavaScript在本地用户计算机中设置这个cookie数据。

现在,我可以为cookie获取正确的数据(PHP工作正常),并且可以毫无问题地进行设置(JavaScript看起来也工作正常)。如果我把$_COOKIE 全局在重新加载页面后,我得到的数据与JavaScript代码ajax调用中得到的数据相同,但在设置cookie后,在JavaScript代码中,没有重新加载,并且当我尝试使用wp.media 什么都不起作用,重新加载页面后,效果很好。

有什么建议吗?下面是我的当前代码(我只留下了相关代码):

 // set action to get the cookie data
 $this->setAction(\'set_logged_in_cookie\', \'setCookieContents\');
 public function setCookieContents($logged_in_cookie, $expire, $expiration, $user_id)
 {
     $this->_cookieContents = array(
         \'logged_in_cookie\'  =>  $logged_in_cookie,
         \'expire\'            =>  $expire,
         \'expiration\'        =>  $expiration,
         \'user_id\'           =>  $user_id
     );
 }
。。。

 public function handleAjax( $action )
 {

   header(\'Content-type: application/json\');

   $action     =   PlulzTools::getValue(\'todo\');

   $response = array(
       \'status\'    =>  \'ok\',
       \'data\'      =>  array()
   );

   switch($action)
   {
          case \'ajaxlogin\' :
                 $response[\'data\'][\'cookie\'] = array(
                       \'key\'   =>  LOGGED_IN_COOKIE,
                       \'data\'  =>  $this->_cookieContents[\'logged_in_cookie\']
                 );

                 echo json_encode($response);
          break;
       }
现在,在前端JavaScript代码中,获取数据并设置cookie(或者至少尝试):

jQuery.ajax({
     url : Frontend.ajaxurl,
     type: \'POST\',
     data: EnviarLogin,
     timeout: 12000
}).done(function(newresponse){

     if(newresponse.status == \'ok\')
     {
          // atualizando status de login
          logged = true;

          jQuery.cookie(newresponse.data.cookie.key, newresponse.data.cookie.data);

     }
}).error(function (xhr, ajaxOptions, thrownError){

     console.log(xhr);
     console.log(\'Erro! Status:\' + xhr.status + \'; Erro thrown: \' + thrownError, + \' Description: \' + xhr.statusText);

     return false;

});

2 个回复
SO网友:kaiser

您的问题可能始于您的回调:

public function handleAjax( $action )
要发送JSON错误或成功,只需调用

wp_send_json_success( array( /* Data */ ) );
wp_send_json_error( array( /* Data */ ) );
回答如下:

{
    success : true,
    data : [
        // Some data as key/value pairs
    ]
}
两个函数都在内部调用wp_send_json(). 这将设置适当的header:

@header( \'Content-Type: application/json; charset=\' . get_option( \'blog_charset\' ) );
并为您进行JSON编码:

echo json_encode( $response );
您对set Cookie筛选器的回调将无法工作,因为它将永远不会被调用。最好上升一级并使用wp_set_auth_cookie(). 您的用户注册应该已经允许,因为稍后的注册挂钩之一已经存在用户ID:user_registerwpmu_new_user 这两种情况都应该适用。

add_action( \'user_register\', wpse136539userRegistration\' );
function wpse136539userRegistration( $id )
{
    $user = get_user_by( \'id\', $id );

    # @TODO Custom Error handling needed here
    if ( is_wp_error( $user ) )
        return;

    wp_set_current_user( $id );
    // Log the user in - set Cookie and let the browser remember it
    wp_set_auth_cookie( $id, TRUE );

    // Redirect user to his admin profile page ... @TODO maybe somewhere else
    exit( wp_safe_redirect( user_admin_url() ) );
}

SO网友:James Cat

如果您试图使wordpress\\u logged\\u in\\u HASH cookie信息可供javascript使用,以便在客户端使用javascript进行设置(从而避免重新呈现页面),那么我认为您可以更成功地重新设计架构,以想出另一个解决方案。wordpress\\u logged\\u in cookie是一个仅httponly的cookie,这意味着您在客户端上无权访问它,并且不应该将其暴露于javascript中,因为这会使其易受XSS攻击。有关更多详细信息,请参见此处:http://blog.codinghorror.com/protecting-your-cookies-httponly/

结束