Connectez-vous avec un numéro de téléphone dans WordPress

Dernière mise à jour Oct 18, 2021

Vous avez peut-être placé un formulaire de connexion frontal sur votre site Web WordPress. Et vous voulez permettre aux utilisateurs de se connecter avec leur numéro de téléphone ou en utilisant leur nom d’utilisateur/adresse e-mail. Fondamentalement, vous autorisez les utilisateurs à saisir n’importe quelle entrée parmi Nom d’utilisateur/Email/Téléphone et un mot de passe.

Veuillez noter que ce tutoriel n’a pas l’intention de montrer la connexion avec OTP. Au lieu de cela, je vais ajouter une autre option de numéro de téléphone ainsi que le nom d’utilisateur et l’e-mail. Ainsi, vos utilisateurs peuvent choisir n’importe quelle option qui leur convient. Vous avez probablement vu cette option sur Amazon. Amazon nous permet de nous connecter avec un e-mail ou un numéro de téléphone portable.

Je vais créer un formulaire de connexion simple. Sur le formulaire soumis, nous écrirons un code qui vérifie les informations d’identification en arrière-plan pour les 3 options (nom d’utilisateur/courriel/téléphone) et un mot de passe.

Afin d’ajouter un numéro de téléphone sur un formulaire de connexion, vous devez insérer un numéro de téléphone d’un utilisateur dans la table ‘wp_usermeta’. Vous pouvez le faire au moment de l’enregistrement de l’utilisateur. Le code ci-dessous peut être utilisé pour ajouter un numéro de téléphone d’un utilisateur.

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

Une fois que vous avez meta_key ‘user_phone’ avec sa valeur dans la base de données, vous pouvez ajouter une connexion avec l’option de numéro de téléphone dans un formulaire de connexion. Mettons le formulaire de connexion suivant sur votre page de connexion.

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

Dans le code ci-dessus, nous vérifions les erreurs et les imprimons. Nous écrirons du code pour gérer les erreurs dans les prochaines étapes. De plus, nous avons ajouté un nonce dans le formulaire qui est la méthode recommandée pour traiter les formulaires dans WordPress.

Connectez-vous avec un numéro de téléphone dans WordPress

Lorsqu’un utilisateur remplit ses informations d’identification et clique sur un bouton d’envoi, nous prenons les informations d’identification et les vérifions par rapport à la base de données. Si les informations d’identification sont correctes, nous connecterons l’utilisateur et le redirigerons vers la page d’accueil. En cas d’informations d’identification erronées, les erreurs sont enregistrées avec la WP_Errorclasse.

Écrivez donc le code ci-dessous dans le functions.phpfichier qui traite le formulaire de connexion.

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

Ici, nous avons d’abord vérifié le nonce pour protéger notre formulaire contre certains types d’abus, de code malveillant et d’attaques CSRF. Ensuite, en fonction de is_email()ou de la is_numeric()méthode, il vérifie l’e-mail et le numéro de téléphone valides. Si la valeur saisie n’est pas un e-mail ou un téléphone, nous choisissons le nom d’utilisateur. Si les informations d’identification sont satisfaites, les utilisateurs se connectent au système et redirigent vers la page d’accueil. Dans votre cas, vous pouvez rediriger les utilisateurs vers une autre page selon votre flux.

J’espère que vous comprenez comment intégrer la connexion avec un numéro de téléphone dans WordPress. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net