Bagaimana saya bisa mengarahkan ulang pengguna setelah memasukkan kata sandi yang salah?

16

Saya menggunakan wp_login_form()untuk menampilkan formulir login di jendela dialog jQuery.

Jika pengguna memasukkan kata sandi yang salah, pengguna akan dibawa ke backend. Saya tidak menginginkan itu. Apakah ada cara untuk memberi tahu pengguna bahwa ia memasukkan kata sandi yang salah dan masih tetap berada di halaman yang sama?

Sebelum wp_login_form()datang saya menggunakan plugin. Saya agak berharap saya bisa menghindari menggunakan plugin untuk ini.

Kode saya:

wp_login_form( array(
  'label_remember' => __( 'Remember me' ),
  'label_log_in' => __( 'Login' )
) );
Steven
sumber

Jawaban:

5

wp_login_form()membuat formulir dengan atribut tindakan site_url/wp-login.php, yang berarti bahwa ketika Anda mengklik tombol kirim formulir diposting site_url/wp-login.phpyang mengabaikan redirect_to pada kesalahan (seperti kata sandi yang salah) sehingga dalam kasus Anda kembali menggunakan plugin atau membuat ulang seluruh proses login dan dengan cara itu Anda akan memiliki kontrol pada kesalahan, lihat Periksa untuk nama pengguna yang benar pada formulir masuk kustom yang merupakan pertanyaan yang sangat mirip.

Bainternet
sumber
26

Saya datang ke sini dari google. Tetapi jawabannya tidak memuaskan saya. Saya mencari beberapa saat dan menemukan solusi yang lebih baik.

Tambahkan ini ke functions.php Anda :

add_action( 'wp_login_failed', 'my_front_end_login_fail' );  // hook failed login

function my_front_end_login_fail( $username ) {
   $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
   // if there's a valid referrer, and it's not the default log-in screen
   if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
      wp_redirect( $referrer . '?login=failed' );  // let's append some information (login=failed) to the URL for the theme to use
      exit;
   }
}
Alexey
sumber
Terima kasih Alexey, saya akan menguji ini (karena saya masih menggunakan plugin)
Steven
7
Solusi Alexey bekerja ketika kredensial yang salah dimasukkan, tetapi sayangnya gagal ketika pengguna lupa memasukkan nama pengguna atau kata sandi. Rupanya Wordpress bahkan tidak mencoba untuk login pengguna dalam hal ini, jadi tindakan wp_login_failed tidak dilakukan.
Szczepan Hołyszewski
Saya akan menggunakan wp_get_referer () di sini untuk menghemat waktu: codex.wordpress.org/Function_Reference/wp_get_referer
Jake
1
Selain itu, Anda pasti menggunakan add_query_arg di sini, sehingga wp_redirect seharusnya: "wp_redirect (add_query_arg ('login', 'gagal', $ referrer));"
Jake
18

Metode saat ini yang saya gunakan untuk menangani semua masalah yang diuraikan di sini berfungsi dengan baik bahkan dengan nama pengguna / kata sandi kosong dan tidak bergantung pada javascript (meskipun js bisa bagus bersama dengan ini).

add_action( 'wp_login_failed', 'custom_login_failed' );
function custom_login_failed( $username )
{
    $referrer = wp_get_referer();

    if ( $referrer && ! strstr($referrer, 'wp-login') && ! strstr($referrer,'wp-admin') )
    {
        wp_redirect( add_query_arg('login', 'failed', $referrer) );
        exit;
    }
}

Kuncinya adalah filter ini untuk mengubah cara perlakuan nama pengguna / kata sandi kosong:

add_filter( 'authenticate', 'custom_authenticate_username_password', 30, 3);
function custom_authenticate_username_password( $user, $username, $password )
{
    if ( is_a($user, 'WP_User') ) { return $user; }

    if ( empty($username) || empty($password) )
    {
        $error = new WP_Error();
        $user  = new WP_Error('authentication_failed', __('<strong>ERROR</strong>: Invalid username or incorrect password.'));

        return $error;
    }
}

Anda dapat mengambil langkah ini lebih jauh dan sepenuhnya mengganti wp-login.php dengan mengarahkan pengguna ke halaman login kustom Anda dan menggunakan halaman itu untuk redirect login_failed juga. Kode lengkap:

/**
 * Custom Login Page Actions
 */
// Change the login url sitewide to the custom login page
add_filter( 'login_url', 'custom_login_url', 10, 2 );
// Redirects wp-login to custom login with some custom error query vars when needed
add_action( 'login_head', 'custom_redirect_login', 10, 2 );
// Updates login failed to send user back to the custom form with a query var
add_action( 'wp_login_failed', 'custom_login_failed', 10, 2 );
// Updates authentication to return an error when one field or both are blank
add_filter( 'authenticate', 'custom_authenticate_username_password', 30, 3);
// Automatically adds the login form to "login" page
add_filter( 'the_content', 'custom_login_form_to_login_page' );

/**
 * Custom Login Page Functions
 */
function custom_login_url( $login_url='', $redirect='' )
{
    $page = get_page_by_path('login');
    if ( $page )
    {
        $login_url = get_permalink($page->ID);

        if (! empty($redirect) )
            $login_url = add_query_arg('redirect_to', urlencode($redirect), $login_url);
    }
    return $login_url;
}
function custom_redirect_login( $redirect_to='', $request='' )
{
    if ( 'wp-login.php' == $GLOBALS['pagenow'] )
    {
        $redirect_url = custom_login_url();

        if (! empty($_GET['action']) )
        {
            if ( 'lostpassword' == $_GET['action'] )
            {
                return;
            }
            elseif ( 'register' == $_GET['action'] )
            {
                $register_page = get_page_by_path('register');
                $redirect_url = get_permalink($register_page->ID);
            }
        }
        elseif (! empty($_GET['loggedout'])  )
        {
            $redirect_url = add_query_arg('action', 'loggedout', custom_login_url());
        }

        wp_redirect( $redirect_url );
        exit;
    }
}
function custom_login_failed( $username )
{
    $referrer = wp_get_referer();

    if ( $referrer && ! strstr($referrer, 'wp-login') && ! strstr($referrer, 'wp-admin') )
    {
        if ( empty($_GET['loggedout']) )
        wp_redirect( add_query_arg('action', 'failed', custom_login_url()) );
        else
        wp_redirect( add_query_arg('action', 'loggedout', custom_login_url()) );
        exit;
    }
}
function custom_authenticate_username_password( $user, $username, $password )
{
    if ( is_a($user, 'WP_User') ) { return $user; }

    if ( empty($username) || empty($password) )
    {
        $error = new WP_Error();
        $user  = new WP_Error('authentication_failed', __('<strong>ERROR</strong>: Invalid username or incorrect password.'));

        return $error;
    }
}
function custom_login_form_to_login_page( $content )
{
    if ( is_page('login') && in_the_loop() )
    {
        $output = $message = "";
        if (! empty($_GET['action']) )
        {
            if ( 'failed' == $_GET['action'] )
                $message = "There was a problem with your username or password.";
            elseif ( 'loggedout' == $_GET['action'] )
                $message = "You are now logged out.";
            elseif ( 'recovered' == $_GET['action'] )
                $message = "Check your e-mail for the confirmation link.";
        }

        if ( $message ) $output .= '<div class="message"><p>'. $message .'</p></div>';
        $output .= wp_login_form('echo=0&redirect='. site_url());
        $output .= '<a href="'. wp_lostpassword_url( add_query_arg('action', 'recovered', get_permalink()) ) .'" title="Recover Lost Password">Lost Password?</a>';

        $content .= $output;
    }
    return $content;
}

Kustomisasi dan tambahkan ini untuk menambahkan logo Anda ke halaman login-wp untuk pemulihan kata sandi:

// calling it only on the login page
add_action( 'login_enqueue_scripts', 'custom_login_css', 10 );
function custom_login_css() { wp_enqueue_style( 'custom_login_css', get_template_directory_uri() .'/library/css/login.css', false ); }
// changing the logo link from wordpress.org to your site
add_filter( 'login_headerurl', 'custom_login_logo_url' );
function custom_login_logo_url() { return home_url(); }
// changing the alt text on the logo to show your site name
add_filter( 'login_headertitle', 'custom_login_title' );
function custom_login_title() { return get_option('blogname'); }

Login logo css:

.login h1 a {
    background: url(../images/login-logo.png) no-repeat top center;
    width: 274px;
    height: 63px;
    text-indent: -9999px;
    overflow: hidden;
    padding-bottom: 15px;
    display: block;
}

EDIT: Saya baru saja mengimplementasikan ini pada awal bentuk situs lain, dan menemukan "langkah lebih lanjut" di atas lebih lengkap, dan memperbaiki kesalahan sintaks kecil di "add_actions". Menambahkan beberapa komentar dan metode untuk secara otomatis menambahkan formulir login ke halaman login tanpa file templat terpisah. Metode formulir masuk harus berfungsi dalam kebanyakan kasus, karena itu terlampir pada "the_content", itu bisa menyebabkan dan mengeluarkan jika Anda memiliki lebih dari satu loop pada halaman login, cukup gunakan template halaman-login.php dalam kasus itu.

Jake
sumber
1
Terima kasih, saya akan melihat ini (dan melihat apakah saya dapat membuatnya bekerja bersama dengan login pihak ke-3 seperti Twitter dan FB)
Steven
1
Jake - ini adalah solusi lengkap yang bagus. Terima kasih telah berbagi. +1
henrywright
Ini pada dasarnya dibungkus dengan plugin yang disebut Sewn In Template Login, sebuah plugin kecil yang cukup lengkap. wordpress.org/plugins/sewn-in-template-log-in
Jake
Bagus, satu-satunya masalah adalah bahwa itu tidak benar-benar membuang kesalahan di front-end ....
Siyah
4

Sebuah solusi untuk poin Szczepan Hołyszewski tentang bidang kosong dalam solusi yang diterima, jQuery berikut akan mencegah masuk ke halaman wp-login standar: (tambahkan ke template halaman login atau footer.php)

jQuery("#loginform-custom").submit(function(){
     var isFormValid = true;
       jQuery("input").each(function()
       {
       if (jQuery.trim($(this).val()).length == 0){
       jQuery(this).addClass("submit_error");
       isFormValid = false;
       }     
     else {
     jQuery(this).removeClass("submit_error");
     }
     });
     return isFormValid;
});
willytk
sumber
0

Satu tambahan untuk jawaban Alexey. Anda dapat menambahkan fungsi jquery untuk memeriksa bahwa salah satu bidang tidak kosong. Dengan cara itu formulir tidak akan dikirimkan kecuali ada sesuatu untuk diperiksa, mencegah WordPress mengalihkan ke /wp-login.php.

  <script>
        $("#wp-submit").click(function() {
          var user = $("input#user_login").val();
            if (user == "") {
            $("input#user_login").focus();
            return false;
          }
         });
  </script>   

Masih tidak yakin bagaimana cara memperbaiki aspek kata sandi yang terlupakan

pengguna28022
sumber
3
Perlu diketahui bahwa WordPress memuat jQuery dalam mode "No Conflict". The $alias tidak bekerja.
s_ha_dum
Anda juga harus mempertimbangkan bahwa pengguna menekan [masuk] dan tidak mengklik tombol masuk. Anda juga perlu memeriksa kata sandi kosong.
Steven
-1
jQuery("#loginform-custom").submit(function(){
     var isFormValid = true;
       jQuery("input").each(function()
       {
       if (jQuery.trim($(this).val()).length == 0){
       jQuery(this).addClass("submit_error");
       isFormValid = false;
       }     
     else {
     jQuery(this).removeClass("submit_error");
     }
     });
     return isFormValid;
});
Farhan
sumber
Harap edit jawaban Anda , dan tambahkan penjelasan: mengapa itu bisa menyelesaikan masalah?
fuxia