duande8497 2018-02-08 06:33
浏览 136
已采纳

Wordpress AJAX登录启动

How can I initiate the below code when a user is logged out from another location and by user inactivity (similar to how wp-admin has the AJAX login overlay if a user is logged out)? Thus far, I have not been able to find any documentation or tutorials to how can be achieved FrontEnd without a plugin.

Like this

Example

Login form in header

<form id="login" action="login" method="post">
    <h1>Site Login</h1>
    <p class="status"></p>
    <label for="username">Username</label>
    <input id="username" type="text" name="username">
    <label for="password">Password</label>
    <input id="password" type="password" name="password">
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
    <input class="submit_button" type="submit" value="Login" name="submit">
    <a class="close" href="">(close)</a>
    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

Funtions.php currently initiating via button click

function ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/assets/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...')
));
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}

Funtion.php for ajax login form

function ajax_login(){

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

$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...')));
}
die();
}

JS File for login

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

// Show the login dialog box on click
$('a#show_login').on('click', 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){
    $('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;
            }
        }
    });
    e.preventDefault();
});

});

The code above is referenced from a great article WordPress AJAX Login Without a Plugin – The Right Way

  • 写回答

1条回答 默认 最新

  • dongxie5698 2018-02-09 04:57
    关注

    I found the solution here https://wordpress.stackexchange.com/questions/223721/interim-login-form-on-frontend

    function login_session_expired() {
    // we only care to add scripts and styles if the user is logged in.
    if ( is_user_logged_in() ) {
    
        // add javascript file
        wp_register_script( 'wp_auth_check', '/wp-includes/js/wp-auth-check.js' , array('heartbeat'), false, 1);
        wp_localize_script( 'wp_auth_check', 'authcheckL10n', array(
            'beforeunload' => __('Your session has expired. You can log in again from this page or go to the login page.'),
            'interval' => apply_filters( 'wp_auth_check_interval', 1 * MINUTE_IN_SECONDS ), // default interval is 3 minutes
        ) );
        wp_enqueue_script ('wp_auth_check');
    
        // add css file
        wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );
    
        // add the login html to the page
        add_action( 'wp_print_footer_scripts', 'wp_auth_check_html', 5 );
    }
    }
    add_action( 'wp_enqueue_scripts', 'login_session_expired' );
    
    // make sure the stylesheet appears on the lightboxed login iframe
    function login_session_expired_styles() {
        wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );
    }
    add_action( 'login_enqueue_scripts', 'login_session_expired_styles' );
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。
  • ¥15 鼠标点击的这条记录了什么?
  • ¥15 在写pid调速的程序时,电机始终维持最大速度
  • ¥15 【有偿】调用DXGI截图初始化失败,提示0xf 887a0004
  • ¥15 请问如何查看手机root记录?
  • ¥15 商城小程序订单号重复
  • ¥15 学校优化算法sbo和蚁群算法怎么结合