WordPress AJAX 登录

Question

WordPress AJAX 登录

7

我是一位有用的助手，可以为您翻译文本。

我正在尝试构建一个自定义的WordPress Ajax登录表单，但我无法解决它。以下是我使用的代码：

HTML：

            <form class="well form-inline" id="login">
                <div class="rowmargin">
                    <h4>Login</h4>
                </div>
                <div class="rowmargin">
                    <input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
                    <input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
                </div>
                <a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
            </form>

JS:

    <script type="text/javascript">

        $(document).ready(function() {

            $("#loginButton").click(function() {    

                var username = $('#loginUsername').val();
                var password = $('#loginPassword').val();
                var rememberme = "forever";
                var redirect = '<?php bloginfo('url'); ?>';

                var data = {
                    user_login:     username,
                    user_password:  password,
                    remember:       rememberme,
                    redirect_to:    redirect
                }

                $.ajax({
                    url: '<?php bloginfo('url'); ?>/wp-login.php',
                    data: data,
                    type: 'GET',
                    dataType: 'jsonp',
                    success: function( result ) {
                        if (result.success==1) {
                            alert("Ok!");
                        } else {
                            alert("Not Ok!");
                        }
                    }
                }); 

            });

        });

        </script> <!-- Login Script --->

有人可以告诉我这里我做错了什么吗？

- Ganikkost

发生了什么或者出现了什么错误？ - Ryan B

没有返回任何消息。我正在使用控制台，也没有收到任何AJAX/JS错误。 - Andrei RRR

5个回答

5

您需要使用WordPress函数进行登录。

请参考以下链接：http://codex.wordpress.org/Function_Reference/wp_signon 然后，使用ajax访问此功能以进行登录。您可以在functions.php中编写一个登录函数。

点击下方链接了解如何在WordPress中使用ajax：http://wpmu.org/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/

- Amit Deo

wpmu链接似乎已经损坏，这里提供另一个示例链接以供参考：http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/ - Arif

2

<form class="well form-inline" id="login">
    <div id="message"></div>
    <div id="loading" style="display:none;"></div>
    <div class="rowmargin">
        <h4>Login</h4>
    </div>
    <div class="rowmargin">
        <input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
        <input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
    </div>
    <a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
</form>


jQuery(document).ready(function(){      
    jQuery('#loading').hide();
    jQuery("#loginButton").click(function() {   
        jQuery('#message').hide().html('');
        jQuery('#loading').hide();
        var input_data = jQuery('#login').serialize();
        var logUser = jQuery('#loginUsername').val();
        var logPass = jQuery('#loginPassword').val();

        if(logUser == '' && logPass != ''){ jQuery('#message').show().html('Your Username is empty!'); return false; }
        if(logPass == '' && logUser != ''){ jQuery('#message').show().html('Your Password is empty!'); return false; }
        if(logUser == '' && logPass == ''){ jQuery('#message').show().html('Your Username and Password is empty!'); return false; } 

        jQuery('#loading').show();
        jQuery.ajax({
            type: "POST",
            url: "<?php echo site_url('wp-login.php','login_post'); ?>",
            data: input_data,
            success: function(msg) {                                    
                // login success. redirect users to some page.
                jQuery(location).attr('href', '<?php echo home_url( '/thank-you/' ); ?>');

            },
            error: function(msg) {  
                // login error.                 
                jQuery('#message').show();
                jQuery('#message').html("<?php _e('Your login  is not correct. Please try again.'); ?>");
                jQuery('#loading').hide();
            }

        }); 
        return false;
    });
});

- Jakir Hossain

1

我认为这是最简单的方法。 - Sarower Jahan

1

add_action('wp_ajax_my_login_action','my_action');
add_action('wp_ajax_nopriv_my_login_action','my_action');
 function my_action(){
    $userdata = array(
        'user_login'    => $_POST['user_login'],
        'user_password' => $_POST['user_password']
    );

    $user = wp_signon($userdata);

    $response = array();
    if ( is_wp_error( $user)) {
        $response = array('status'=>'fail', 'msg' => $user->get_error_message() );
    }
    else{
        $response = array('status'=>'pass');
    }
    echo json_encode($response);
    die;
}
add_shortcode('login','loginfunction');
function loginfunction()
{
    if( is_user_logged_in() ){
        echo '<a href="'.wp_logout_url(home_url()).'">logout</a>';
    }
    ?>
    <center>Login Form:</center>
    <form action="" method="post" id="login">
            <div class="form-group">
                    <label for="username">Username:</label>
                    <input type="text" class="form-control form-control-sm" id="user_login" aria-describedby="emailHelp" name="user_login">
                </div>
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input type="password" class="form-control form-control-sm" id="user_password" aria-describedby="emailHelp" name="user_password">
                </div>  
                <input type="hidden" name="action" value="my_login_action">
                <button type="submit" class="btn btn-primary btn-block">log in</button>
                <div class="sign-up">
                    Don't have an account? <a href="http://localhost/Cat_practice/wdt-registration-form/">Create One</a>
                </div>
    </form> 
    





<script>
            var ajax_url= '<?php echo admin_url('admin-ajax.php');?>';
            jQuery(document).ready(function($){
                $("#login").submit(function(e){
                    e.preventDefault();
                    $.ajax({
                        type:"POST",
                        url: ajax_url,
                        data:{
                            action:'my_login_action',
                            user_login:$('input[name="user_login"]').val(),
                            user_password:$('input[name="user_password"]').val()
                        }
                    }).done(function(response){
                        let result = JSON.parse(response);
                        if(result.status=='pass')
                        {
                            window.location.href='http://localhost/check_wp/';
                        }
                        else{
                            // alert(result.msg);
                            alert('Sorry Password is worrng');
                        }
                    })
                });
            });
    </script>
<?php
}

- Shubham

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

1

WordPress中的所有AJAX请求都必须通过wp-admin/admin-ajax.php进行。 wp-login.php不会响应。 http://codex.wordpress.org/Class_Reference/WP_Ajax_Response

有一组可用的操作，但没有一个接近登录方法。如果您知道自己在做什么，可以注册自己的操作并自行处理登录过程。 http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

- Jan Beck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abdo-Host · Accepted Answer

WordPress: 简单的 Ajax 登录表单

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

--

<?php
//add this within functions.php
function ajax_login_init(){

    wp_register_script('ajax-login-script', get_template_directory_uri() . '/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' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}


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

    die();
}

在主题目录下创建一个名为 ajax-login-script.js 的文件，并将以下 JavaScript 代码粘贴到该文件中。

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

});