ฉันจะเปลี่ยนเส้นทางผู้ใช้หลังจากป้อนรหัสผ่านไม่ถูกต้องได้อย่างไร


16

ฉันใช้wp_login_form()เพื่อแสดงแบบฟอร์มเข้าสู่ระบบในหน้าต่างโต้ตอบ jQuery

หากผู้ใช้ป้อนรหัสผ่านผิดผู้ใช้จะถูกนำไปที่ส่วนหลัง ฉันไม่ต้องการสิ่งนั้น มีวิธีแจ้งเตือนผู้ใช้ว่าเขาป้อนรหัสผ่านผิดและยังคงอยู่ในหน้าเดียวกันหรือไม่

ก่อนหน้าwp_login_form()นี้ฉันใช้ปลั๊กอิน ฉันหวังว่าฉันจะหลีกเลี่ยงการใช้ปลั๊กอินสำหรับสิ่งนี้

รหัสของฉัน:

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

คำตอบ:


5

wp_login_form()สร้างฟอร์มที่มีแอ็ตทริบิวต์ action site_url/wp-login.phpซึ่งหมายความว่าเมื่อคุณคลิกปุ่มส่งแบบฟอร์มจะถูกโพสต์site_url/wp-login.phpซึ่งละเว้นการเปลี่ยนเส้นทางไปยังข้อผิดพลาด (เช่นรหัสผ่านผิด) ดังนั้นในกรณีของคุณอาจกลับไปใช้ปลั๊กอินหรือสร้างกระบวนการล็อกอิน และวิธีนี้คุณจะสามารถควบคุมข้อผิดพลาดตรวจสอบชื่อผู้ใช้ที่ถูกต้องในแบบฟอร์มการเข้าสู่ระบบที่กำหนดเองซึ่งเป็นคำถามที่คล้ายกันมาก


26

ฉันมาที่นี่จาก google แต่คำตอบก็ไม่ทำให้ฉันพอใจ ฉันกำลังมองหาอยู่ครู่หนึ่งและพบทางออกที่ดีกว่า

เพิ่มไปยังฟังก์ชั่นของคุณPHP :

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 ผมจะทดสอบนี้ (ที่ฉันยังคงใช้ปลั๊กอิน)
สตีเว่น

7
โซลูชันของ Alexey ทำงานเมื่อป้อนข้อมูลประจำตัวที่ไม่ถูกต้อง แต่น่าเสียดายที่ล้มเหลวเมื่อผู้ใช้ลืมป้อนชื่อผู้ใช้หรือรหัสผ่าน เห็นได้ชัดว่า Wordpress ไม่ได้พยายามเข้าสู่ระบบผู้ใช้ในกรณีนี้ดังนั้น wp_login_failed จึงไม่ได้ทำการกระทำ
Szczepan Hołyszewski

ฉันจะใช้ wp_get_referer () ที่นี่เพื่อประหยัดเวลา: codex.wordpress.org/Function_Reference/wp_get_referer
Jake

1
นอกจากนี้คุณต้องใช้ add_query_arg ที่นี่ดังนั้น wp_redirect ควรเป็น: "wp_redirect (add_query_arg ('เข้าสู่ระบบ', 'ล้มเหลว', $ referrer));"
Jake

18

วิธีการปัจจุบันที่ฉันใช้เพื่อจัดการกับปัญหาทั้งหมดที่ระบุไว้ในที่นี้ใช้ได้ดีแม้กับชื่อผู้ใช้ / รหัสผ่านที่ว่างเปล่าและไม่ต้องพึ่งพาจาวาสคริปต์ (แม้ว่า js จะดีพร้อมกับสิ่งนี้)

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

กุญแจสำคัญคือตัวกรองนี้เพื่อเปลี่ยนวิธีการใช้ชื่อผู้ใช้ / รหัสผ่านเปล่า:

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

คุณสามารถใช้ขั้นตอนนี้ต่อไปและแทนที่ wp-login.php ได้อย่างสมบูรณ์โดยการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเข้าสู่ระบบที่กำหนดเองของคุณและใช้หน้านั้นสำหรับการเปลี่ยนเส้นทาง login_failed ด้วย รหัสเต็ม:

/**
 * 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;
}

ปรับแต่งและเพิ่มสิ่งเหล่านี้เพื่อเพิ่มโลโก้ของคุณไปที่หน้า wp-login สำหรับการกู้คืนรหัสผ่าน:

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

โลโก้เข้าสู่ระบบ 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;
}

แก้ไข: ฉันเพิ่งนำสิ่งนี้ไปใช้ในการลบแบบฟอร์มเว็บไซต์อื่นและพบว่า "ขั้นตอนต่อไป" สมบูรณ์ยิ่งขึ้นและแก้ไขข้อผิดพลาดทางไวยากรณ์ขนาดเล็กใน "add_actions" เพิ่มความคิดเห็นและวิธีการในการเพิ่มแบบฟอร์มเข้าสู่ระบบโดยอัตโนมัติไปยังหน้าเข้าสู่ระบบโดยไม่ต้องแยกไฟล์แม่แบบ วิธีการเข้าสู่ระบบแบบฟอร์มควรทำงานในกรณีส่วนใหญ่เนื่องจากมันแนบมากับ "the_content" มันอาจทำให้เกิดปัญหาและถ้าคุณมีมากกว่าหนึ่งวงบนหน้าเข้าสู่ระบบเพียงแค่ใช้เทมเพลต page-login.php ในกรณีนั้น


1
ขอบคุณฉันจะใช้เวลาดูที่นี้ (และดูว่าฉันสามารถทำให้การทำงานร่วมกับบุคคลที่ 3 เข้าสู่ระบบเช่น Twitter และ FB)
สตีเว่น

1
Jake - นี่เป็นโซลูชั่นที่สมบูรณ์แบบ ขอบคุณสำหรับการแบ่งปัน. +1
henrywright

โดยทั่วไปแล้วจะถูกรวมไว้ในปลั๊กอินที่ชื่อว่า Sewn In Template Login ซึ่งเป็นปลั๊กอินขนาดเล็กที่สมบูรณ์ wordpress.org/plugins/sewn-in-template-log-in
Jake

Nice, ปัญหาเดียวคือมันไม่ได้โยนข้อผิดพลาดใน front-end จริง ๆ ....
Siyah

4

วิธีแก้ปัญหาสำหรับ Szczepan Hołyszewskiเกี่ยวกับฟิลด์ว่างในโซลูชันที่ยอมรับ jQuery ต่อไปนี้จะป้องกันการไปที่หน้า wp-login มาตรฐาน: (เพิ่มเทมเพลตหน้าล็อกอินหรือ 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;
});

0

อีกหนึ่งคำตอบของ Alexey คุณสามารถเพิ่มฟังก์ชั่น jquery เพื่อตรวจสอบว่าหนึ่งในฟิลด์นั้นไม่ว่างเปล่า ด้วยวิธีนี้แบบฟอร์มจะไม่ส่งจนกว่าจะมีสิ่งที่ต้องตรวจสอบป้องกันไม่ให้ WordPress เปลี่ยนเส้นทางไปยัง /wp-login.php

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

ยังไม่แน่ใจว่าจะแก้ไขส่วนที่ลืมรหัสผ่านได้อย่างไร


3
โปรดทราบว่า WordPress โหลด jQuery ในโหมด "ไม่มีความขัดแย้ง" $นามแฝงไม่ทำงาน
s_ha_dum

คุณต้องพิจารณาว่าผู้ใช้ยอดฮิตนั้น [ป้อน] และไม่คลิกปุ่มล็อกอิน นอกจากนี้คุณต้องตรวจสอบรหัสผ่านว่างเปล่าด้วย
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;
});

โปรดแก้ไขคำตอบของคุณและเพิ่มคำอธิบาย: เหตุใดจึงแก้ไขปัญหาได้
fuxia
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.