워드프레스 기본 로그인 폼에 인증 필드 추가

워드프레스 기본 로그인 폼은 아이디와 암호 입력 필드만 제공합니다. 때로 저장소 플러그인을 설치하여 추가 인증을 위한 필드를 추가하는데, 간단한 코드로 플러그인 사용하지 않고 필드를 추가하여 로그인을 제어할 수 있습니다.

아이디 암호 입력 필드의 워드프레스 기본 로그인 폼

이 포스트에서는 사이트에 접근한 방문자의 아이피를 확인하고, 아이피 중에 2번 째 값을 입력하는 필드를 만들어 입력 값을 비교하여 로그인을 제어하는 간단한 예를 구성합니다.

로그인 폼에 필드 추가

먼저, 기본 로그인 폼에 필드 추가는 login_form 훅을 사용하면 쉽게 추가할 수 있는데, 다음 코드처럼 특정 데이터 입력을 위한 필드를 추가합니다.

add_action( 'login_form', 'add_auth_login' );
function add_auth_login() {
?>
    <p>
        <label for="add_auth_code">인증코드 (2번째 구분된 숫자를 입력)<br>
        <input type="text" tabindex="20" size="20" value="" class="input" id="add_auth_code" name="add_auth_code" placeholder="<?php echo preg_replace( '/[^0-9a-fA-F:., ]/', '', $_SERVER['REMOTE_ADDR'] ); ?>" required>
    </p>
<?php
    $_temp_value = explode( '.', $_SERVER['REMOTE_ADDR'] );
    echo '<pre>' . print_r ( $_temp_value, true ) . '</pre>';
}

필드 추가할 때 CSS 클래스는 존재하는 아이디 입력 필드 소스를 참고하여 사용하면 로그인 폼 스타일이 그대로 적용되어 번거로운 추가 작업을 생략할 수 있습니다. 위의 코드에서 class="input" 속성을 확인하세요. 또, 방문자의 아이피를 필드의 placeholder 값에 출력하여 방문자가 아이피를 쉽게 파악할 수 있도록 설정합니다.

입력 필드를 type="number" 형식으로 사용할 수 있지만, 기본 로그인 폼에 스타일이 정의되어 있지 않아 조금 어색하므로 사용하지 않았습니다. 데이터 검증은 코드로 처리하면 됩니다.

코드 9, 10번 줄은 아이피를 구분한 것으로 예제 구성 편리를 위한 것으로 나중에 삭제합니다. 코드를 추가하여 로그인 폼을 확인하면 다음 그림처럼 나옵니다.

기본 로그인 폼에 추가한 인증 필드

다음으로, 방문자가 입력한 값(배열 데이터의 2번째, “23”)을 검증합니다.

로그인 폼에서 입력한 데이터 검증

방문자가 입력한 아이디와 암호 등을 검증하는 authenticate  훅을 사용하여 추가한 필드의 값을 검증할 수 있는데, 포스트에서는 방문자가 로그인하기 전 검증 가능한 wp_authenticate_user 훅을 사용합니다. 다음처럼 2개의 파라미터를 사용합니다.

add_filter( 'wp_authenticate_user', 'add_check_auth_code', 10, 2 );
function add_check_auth_code( $user, $password ) {
    // 검증
    return $user;
}
훅을 사용하여 특정 값을 검증한다는 것은 그 훅이 사용되는 단계에서 사용자의 특정 과정(코드 정의, 위의 코드에서 “검증”)을 추가하여 원하는 결과를 얻는다는 뜻이며, 어떤 훅이 사용자가 추가한 과정을 위한 훅이라는 것은 아닙니다. “훅”의 뜻을 한 번 더 생각하여 이해를 더하는 것이 좋습니다.

포스트에서 방문자가 입력한 값을 검증하기 위한 예제 코드를 모두 나열하면 다음과 같습니다.

add_filter( 'wp_authenticate_user', 'add_check_auth_code', 10, 2 );
function add_check_auth_code( $user, $password ) {
    $_temp_value = explode( '.', preg_replace( '/[^0-9a-fA-F:., ]/', '', $_SERVER['REMOTE_ADDR'] ) );
    $input_value = ( ! empty( $_POST['add_auth_code'] ) ) ? trim( wp_filter_nohtml_kses( $_POST['add_auth_code'] ) ) : '';
    $right_value = absint( $_temp_value[1] );

    if( !$input_value || $input_value != $right_value ) {
        remove_action( 'authenticate', 'wp_authenticate_username_password', 20 );
        $user = new WP_Error( 'denied',  __( "올바른 코드(숫자)를 입력하세요." ), absint( $input_value ) );
        echo '<pre>' . print_r ( $user, true ) . '</pre>';
    }
    return $user;
}

3번 줄은 아이피 구분, 4번 줄은 방문자가 입력한 값, 5번 줄은 3번 줄 값(아이피)의 2번째 값으로 숫자(양수) 데이터 형식의 absint 함수를 사용하였습니다.

워드프레스 8 - 무료 이미지 저장소

필드에 값이 없거나 입력한 값과 실제 아이피의 2번째 값이 다르면, 8번 줄에서 authenticate 훅이 호출하는 아이디와 암호 검증  wp_authenticate_username_password 함수를 제거하여 로그인 과정을 중지합니다.

이때 9번 줄에서 워드프레스 에러 클래스를 생성하여 출력하며, 10번 줄은 에러 데이터 등을 확인하기 위한 참고용으로 추가한 것입니다. 틀린 값을 입력하여 메시지와 에러 데이터를 확인한 후 삭제하면 됩니다.

로그인 폼 필드 추가와 검증의 이 포스트 전체 코드는 다음과 같습니다.

/**
 * 로그인 폼에 필드 추가
 */

add_action( 'login_form', 'add_auth_login' );
function add_auth_login() {
?>
    <p>
        <label for="add_auth_code">인증코드 (2번째 구분된 숫자를 입력)<br>
        <input type="text" tabindex="20" size="20" value="" class="input" id="add_auth_code" name="add_auth_code" placeholder="<?php echo preg_replace( '/[^0-9a-fA-F:., ]/', '', $_SERVER['REMOTE_ADDR'] ); ?>" required>
    </p>
<?php
    $_temp_value = explode( '.', $_SERVER['REMOTE_ADDR'] );
    //echo '<pre>' . print_r ( $_temp_value, true ) . '</pre>';
}

/**
 * 인증필드 검증
 */

add_filter( 'wp_authenticate_user', 'add_check_auth_code', 10, 2 );
function add_check_auth_code( $user, $password ) {
    $_temp_value = explode( '.', preg_replace( '/[^0-9a-fA-F:., ]/', '', $_SERVER['REMOTE_ADDR'] ) );
    $input_value = ( ! empty( $_POST['add_auth_code'] ) ) ? trim( wp_filter_nohtml_kses( $_POST['add_auth_code'] ) ) : '';
    $right_value = absint( $_temp_value[1] );

    if( !$input_value || $input_value != $right_value ) {
        remove_action( 'authenticate', 'wp_authenticate_username_password', 20 );
        $user = new WP_Error( 'denied',  __( "올바른 코드(숫자)를 입력하세요." ), absint( $input_value ) );
        //echo '<pre>' . print_r ( $user, true ) . '</pre>';
    }
    return $user;
}

포스트에서 따로 안내하지는 않는데, 사용하는 테마 functions.php 파일에 추가한 후 로그인 폼에서 시험해보세요. 포스트에서는 아이피 데이터를 예로 사용했지만, 생각하면 방문자 인증에 효과적인 기준 데이터가 많고, 로그인 폼 외 기본 가입 폼도 훅과 함께 쉽게 필드를 추가하고 제어할 수 있습니다.