javascript - WordPress 中的 ajax 登录/注销脚本卡住了

Question

我的 ajax 驱动页面的登录/注销脚本遇到一些问题。

首先是场景: 该网站应该是完全ajax 的。在 ajax 请求中，仅应更改内容和菜单。这对于普通页面和帖子来说效果很好，但是登录/注销给我带来了 wp_create_nonce 和 check_ajax_referer 的一些安全问题。

相关代码如下:

函数.php

/* Login */
function ajax_login_init() {

    wp_register_script('ajax-login-script', get_stylesheet_directory_uri() . '/js/ajax.login.script.js', array('jquery') ); 
    wp_enqueue_script('ajax-login-script');

    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Sending user info, please wait...')
    ));

    // Enable the user with no privileges to run ajax_login() in AJAX
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}

function ajax_login(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
    }

    wp_die();
}

/** Logout */
function ajax_logout_init() {   

    wp_register_script('ajax-logout-script', get_stylesheet_directory_uri() . '/js/ajax.logout.script.js', array('jquery') );   
    wp_enqueue_script('ajax-logout-script');

    global $current_user;

    wp_localize_script( 'ajax-logout-script', 'ajax_logout_object', array( 
        'LoggedIn' => is_user_logged_in(),
        'username' => $current_user->display_name,
        'logoutURL' => wp_logout_url(),
        'ajax_url' => admin_url('admin-ajax.php'),
        'logout_nonce' => wp_create_nonce('ajax-logout-nonce')
    ));

    add_action( 'wp_ajax_ajaxlogout', 'ajax_logout' );  
}

function ajax_logout(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-logout-nonce', 'security' );
    //check_ajax_referer( 'ajax-logout-nonce', 'ajaxsecurity' );
    wp_clear_auth_cookie();
    wp_logout();
    ob_clean(); // probably overkill for this, but good habit
    wp_die();
}

add_action('init', 'ajax_login_init');
add_action('init', 'ajax_logout_init');

ajax.login.script.js

jQuery(document).ready(function($) {

    // Show the login dialog box on click
    $('body').on('click', '.modal-login a', function(e) {
        $('body').prepend('<div class="login_overlay"></div>');
        $('form#login').fadeIn(500);
        $('div.login_overlay, form#login a.close').on('click', function(){
            $('div.login_overlay').remove();
            $('form#login').hide();
        });
        e.preventDefault();
    });

    // Perform AJAX login on form submit
    $('form#login').on('submit', function(e){
        //console.log(ajax_login_object);
        $('form#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login #username').val(), 
                'password': $('form#login #password').val(), 
                'security': $('form#login #security').val() },
            success: function(data){
                $('form#login p.status').text(data.message);
                if (data.loggedin == true){
                    //document.location.href = ajax_login_object.redirecturl;
                    $('div.login_overlay').remove();
                    $('form#login').hide();
                    $( ".logo a" ).trigger( "click" );
                }
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
        e.preventDefault();
    });

});

ajax.logout.script.js

jQuery(document).ready(function($) {

    // Perform AJAX logout on Click
    $('body').on('click','.modal-logout a', function(e) {
        //console.log(ajax_logout_object);
        $.ajax({
            type: 'POST',
            url: ajax_logout_object.ajax_url,
            data: {
                'action': 'ajaxlogout',
                'ajaxsecurity': ajax_logout_object.logout_nonce,
            },
            success: function(data){
                console.log(data);
                $( ".logo a" ).trigger( "click" );
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
        e.preventDefault();
    });

});

如果我不使用该功能，登录/注销过程工作得很好

check_ajax_referer( 'ajax-login-nonce', 'security' );

如果我启用此代码，check_ajax_referer 始终返回 -1，但 ajax 查询将会成功。经过研究，似乎无法验证随机数。

因此，如果我刷新页面，我可以毫无问题地登录，但之后无法直接注销。我需要再次刷新页面(我不希望因为连续的背景音乐而导致)。注销并再次直接登录也有同样的问题。

这是我的问题:

1. 我需要 check_ajax_referer 吗？
2. 为什么我可以使用激活的check_ajax_referer登录，但登录后不能直接注销(无需刷新页面)
3. 与 2 相同，但方向不同

提前致谢 问候，类迪克特

Answer 1

我觉得这段代码是为我的博客使用的 Fellow Tuts所以让我协助您解决这个问题。

由于您尚未发布表单标记，因此我不确定您的随机数 action 和 name 参数是否匹配。在表单中创建隐藏随机数字段的代码应该如下所示:

<?php wp_nonce_field('ajax-login-nonce', 'security'); ?>

检查该字段并更新我的信息。