Iniciar sesión con número de teléfono en WordPress

Last updated Oct 17, 2021

Es posible que haya colocado un formulario de inicio de sesión de front-end en su sitio web de WordPress. Y desea permitir que los usuarios inicien sesión con su número de teléfono o usando el nombre de usuario / correo electrónico. Básicamente, está permitiendo que los usuarios ingresen cualquiera de las entradas de Nombre de usuario / Correo electrónico / Teléfono y una contraseña.

Tenga en cuenta que este tutorial no pretende mostrar el inicio de sesión con OTP. En su lugar, agregaré una opción más de número de teléfono junto con el nombre de usuario y el correo electrónico. Para que sus usuarios puedan elegir cualquier opción que les resulte conveniente. Probablemente vio esta opción en Amazon. Amazon nos permite iniciar sesión con un correo electrónico o un número de teléfono móvil.

Voy a crear un formulario de inicio de sesión simple. En el envío del formulario, escribiremos un código que verifica las credenciales en segundo plano para las 3 opciones (nombre de usuario / correo electrónico / teléfono) y una contraseña.

Para agregar un número de teléfono en un formulario de inicio de sesión, debe insertar el número de teléfono de un usuario en la tabla ‘wp_usermeta’. Puede hacerlo en el momento del registro de usuario. El siguiente código se puede utilizar para agregar un número de teléfono de un usuario.

<?php
$user_id = 1;
$phone_number = 9999999999;
add_user_meta( $user_id, 'user_phone', $phone_number);

Una vez que tenga meta_key ‘user_phone’ junto con su valor en la base de datos, podrá agregar el inicio de sesión con la opción de número de teléfono en un formulario de inicio de sesión. Pongamos el siguiente formulario de inicio de sesión en su página de inicio de sesión.

<?php
$return = log_the_user_in();
if( is_wp_error( $return)) {
    echo $return->get_error_message();
}
?>
<form method="post">
    <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p>
    <p><input type="password" name="user_password" placeholder="Password" required /></p>
    <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" />
    <input type="submit" name="login_the_user" value="Submit" />
</form>

En el código anterior, estamos verificando errores e imprimiéndolos. Escribiremos código para manejar errores en los próximos pasos. Además, agregamos un nonce en el formulario, que es la forma recomendada de procesar formularios en WordPress.

Iniciar sesión con número de teléfono en WordPress

Cuando un usuario completa las credenciales y presiona un botón de envío, tomaremos las credenciales y las verificaremos con la base de datos. Si las credenciales son correctas, iniciaremos la sesión del usuario y lo redirigiremos a la página de inicio. En caso de credenciales incorrectas, los errores se registran con la WP_Errorclase.

Por lo tanto, escriba el código a continuación en el functions.phparchivo que procesa el formulario de inicio de sesión.

<?php
add_action( 'init', 'log_the_user_in' );
function log_the_user_in() {
    if (isset( $_POST['login_the_user']) && wp_verify_nonce( $_REQUEST['login_nonce'], 'login_nonce')) {
 
        if (! empty( $_POST['user_login']) &&! empty( $_POST['user_password'])) {
 
            if (is_email( $_POST['user_login'])) {
                // check user by email
                $user = get_user_by( 'email', $_POST['user_login'] );
            } elseif (is_numeric( $_POST['user_login'])) {
                // check user by phone number
                global $wpdb;
                $tbl_usermeta = $wpdb->prefix.'usermeta';
                $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login']) );
 
                $user = get_user_by( 'ID', $user_id );
            } else {
                // check user by username
                $user = get_user_by( 'login', $_POST['user_login'] );
            }
 
            if (! $user) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            // check the user's login with their password.
            if (! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID)) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            wp_clear_auth_cookie();
            wp_set_current_user($user->ID);
            wp_set_auth_cookie($user->ID);
 
            wp_redirect(get_bloginfo('url'));
            exit;
        } else {
            return new WP_Error('empty', 'Both fields are required.');
        }
    }
}

Aquí, primero verificamos el nonce para proteger nuestro formulario de ciertos tipos de mal uso, código malicioso y ataques CSRF. A continuación, según el método is_email()o el is_numeric()correo electrónico, comprueba el correo electrónico y el número de teléfono válidos. Si el valor ingresado no es un correo electrónico o un teléfono, elegimos el nombre de usuario. Si se satisfacen las credenciales, los usuarios inician sesión en el sistema y redirigen a la página de inicio. En su caso, puede redirigir a los usuarios a otra página según su flujo.

Espero que comprenda cómo integrar el inicio de sesión con un número de teléfono en WordPress. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.

Iniciar sesión con número de teléfono en WordPress

Iniciar sesión con número de teléfono en WordPress

Artículos relacionados