2 façons simples d'activer la connexion par numéro de téléphone dans WooCommerce

La connexion par numéro de téléphone est une fonctionnalité pratique conçue pour améliorer l'expérience utilisateur et faciliter le processus de connexion et d'enregistrement. Par conséquent, de nombreux utilisateurs de WooCommerce souhaitent implémenter cette fonctionnalité dans leurs boutiques en ligne.

Si vous faites partie de ces personnes, vous avez atterri sur la bonne page Web. Cet article vous apprendra comment permettre aux utilisateurs de se connecter et de s'inscrire avec leur numéro de téléphone WooCommerce de deux manières.

Pourquoi devriez-vous activer la connexion par numéro de téléphone WooCommerce dans votre boutique ?

L'enregistrement et la connexion par téléphone sont devenus extrêmement utiles pour les magasins WooCommerce qui dépendent fortement des numéros de téléphone des clients. Par exemple, livraison de nourriture, taxis, etc.

En plus de ces niches spécifiques, voici quelques avantages qui profitent à toute entreprise.

• Les acheteurs peuvent se connecter et s'inscrire directement avec leur numéro de téléphone sur votre boutique WooCommerce.
• Il évite les spams d'enregistrement des clients sur votre boutique en ligne.
• Les acheteurs peuvent également se connecter sans se souvenir de leur nom d'utilisateur et de leur mot de passe.
• Vous pouvez vérifier les numéros de téléphone des clients par SMS OTP.
• Tous les clients vérifiés sont authentiques et empêchent donc les fausses commandes.
• Vos clients peuvent être informés rapidement via des appareils mobiles, même s'ils n'ont pas accès à Internet.
• Vous pouvez rapidement joindre vos clients avec des promotions et des offres via leurs numéros de téléphone.

Grâce à ces avantages, vous pouvez facilement améliorer votre stratégie commerciale et, éventuellement, la croissance de votre consommation. Vous avez tout ce qu'il faut pour communiquer avec vos clients de la manière la plus simple et la plus concrète.

#1 : Activez la connexion par numéro de téléphone sur votre boutique WooCommerce avec un plugin

Il existe plusieurs plugins qui peuvent vous aider avec cela. Par exemple:

• Inscription et connexion avec un numéro de téléphone mobile
• Chiffres : Numéro de téléphone mobile WordPress Formulaire d'inscription et de connexion OTP
• Se connecter avec un numéro de mobile pour WooCommerce

Mais dans ce tutoriel, nous utiliserons le plugin "Connexion avec numéro de téléphone" car c'est le plugin gratuit le plus populaire.

Installez le plugin Activer le " Connexion avec numéro de téléphone " sur votre boutique WooCommerce

La première chose que vous devez faire est d'installer et d'activer le plugin " Connexion avec numéro de téléphone " sur votre boutique WooCommerce . Vous trouverez ci-dessous les instructions.

1. Tout d'abord, depuis le tableau de bord WordPress, accédez à la page Plugins > Ajouter un nouveau .

2. Entrez "Connexion avec numéro de téléphone" dans le champ de recherche dans le coin supérieur droit.
3. Le plugin doit apparaître en premier dans la liste. Cliquez sur le bouton Installer maintenant qui s'affiche à côté de son titre.
4. Après cela, le plugin sera téléchargé. Une fois cela fait, vous verrez le bouton Installer maintenant se transformer en bouton Activer . Cliquez dessus.

Créer une nouvelle page de connexion/inscription

L'étape suivante consiste à insérer le shortcode du plugin dans une nouvelle page de connexion/inscription.

1. Accédez à Page > Ajouter nouveau à partir du tableau de bord WordPress.

2. Choisissez un titre pour la nouvelle page, par exemple, « Page de connexion/inscription ».

3. Mettez le shortcode [idehweb_lwp] à l'intérieur.
4. Publiez la page.

Obtenez 10 000 SMS OTP gratuits par mois avec Firebase

Lorsqu'un nouvel utilisateur enregistre un compte sur votre boutique WooCommerce, un code de vérification sera envoyé à son numéro de mobile. Par conséquent, vous devrez fournir une passerelle SMS pour que le plugin fonctionne correctement.

Vous pouvez utiliser Firebase de Google. Il fournit gratuitement 10 000 SMS OTP par mois. Voici comment:

1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
2. Cliquez sur le bouton Créer un projet .

3. Maintenant, vous devrez entrer un nom pour le nouveau projet, accepter les termes et conditions de Firebase et cliquer sur le bouton Créer un projet .
4. Une fois le projet créé avec succès, dans la barre latérale gauche, accédez à la page Build > Authentication .

5. Cliquez sur le bouton Commencer .
6. Choisissez Téléphone comme fournisseur.

7. Activez la bascule dans le coin supérieur droit pour activer cette option. Cliquez ensuite sur le bouton Enregistrer .

8. Faites défiler jusqu'à la section Domaines autorisés . Cliquez sur le bouton Ajouter un domaine et entrez le nom de domaine de votre boutique WooCommerce. Cliquez ensuite sur le bouton Ajouter .

9. Maintenant, allez dans l'onglet Modèles .

10. Cliquez sur l'icône en forme de crayon à côté du texte de langue du modèle . Ensuite, choisissez la langue que vous préférez utiliser pour la vérification par SMS.

11. Cliquez sur l'icône d'engrenage à côté du texte Vue d'ensemble du projet et choisissez Paramètres du projet .

12. Faites défiler jusqu'aux sections Vos applications . Cliquez ensuite sur l'icône Web.

13. Entrez un surnom pour votre nouvelle application. Cliquez ensuite sur le bouton Enregistrer l'application .

14. Sélectionnez l'option Utiliser une balise <script> et copiez les scripts fournis.

15. Maintenant, rendez-vous sur le tableau de bord WordPress de votre boutique WooCommerce. Ensuite, visitez la page "paramètres de connexion".

16. Collez les scripts dans la zone de texte de configuration de Firebase .
17. De retour à la fenêtre Firebase, copiez la clé API fournie dans les scripts.

18. De retour à la fenêtre WordPress, collez la clé API dans la zone de texte API Firebase .

19. Enfin, faites défiler vers le bas de la page et cliquez sur le bouton Enregistrer les modifications .

C'est également ici que vous pouvez configurer l'application. Vous devriez vérifier les paramètres pour voir s'il y a autre chose que vous devez ajuster.

#2 : Activez la connexion par numéro de téléphone sur votre boutique WooCommerce par programmation

Dans ce didacticiel, nous ajouterons une autre option de numéro de téléphone sur le formulaire de connexion de votre boutique WooCommerce. Veuillez noter que cela n'envoie pas de SMS OTP pour vérifier les utilisateurs comme dans le tutoriel précédent.

Les utilisateurs peuvent choisir ce qui leur convient le mieux. Vous avez peut-être vu cela sur le formulaire de connexion Amazon. Il permet aux utilisateurs de se connecter avec un e-mail ou un numéro de téléphone.

Vous devrez ajouter du code PHP personnalisé au fichier "functions.php" du thème actuellement actif. Si vous ne savez pas comment procéder, suivez les instructions ci-dessous :

1. Accédez à la page Apparence > Éditeur de fichier de thème à partir du tableau de bord WordPress.

2. Choisissez le thème que vous utilisez dans le coin supérieur droit.
3. Accédez au fichier "functions.php" dans la barre latérale droite.

Ajouter une entrée de numéro de téléphone

Pour activer la connexion par numéro de téléphone WooCommerce sur votre site de commerce électronique WordPress, vous devez stocker les numéros de téléphone des utilisateurs dans la table « wp_usermeta ».

Cela peut être fait au moment de l'enregistrement de l'utilisateur. Vous pouvez utiliser le code ci-dessous pour atteindre cet objectif.

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

Une fois que vous avez une meta_key "user_phone" avec sa valeur, vous pouvez vérifier les informations d'identification de l'utilisateur avec un numéro de téléphone.

Créer un formulaire de connexion

Maintenant, créons un formulaire de connexion simple où les utilisateurs peuvent entrer leurs informations de connexion. Il comportera les éléments suivants :

• Un champ de texte pour entrer un nom d'utilisateur/e-mail/téléphone
• Un champ de texte pour entrer un mot de passe
• Un nonce pour éviter les attaques CSRF (c'est un champ caché)
• Un bouton de soumission

 <?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="btn_login" value="Submit" /> </form>

Dans les scripts ci-dessus, nous avons ajouté du code HTML et également appelé la méthode "log_the_user_in()". Celui-ci est chargé de vérifier les informations d'identification de l'utilisateur.

Si des erreurs se produisent côté serveur, nous en informerons l'utilisateur via la méthode "get_error_message()".

Dans l'étape suivante, nous devrons définir la méthode "log_the_user_in()" et renvoyer l'erreur.

Connectez-vous avec des numéros de téléphone dans WooCommerce

Lorsqu'un utilisateur remplit les informations d'identification et clique sur le bouton Soumettre, nous obtiendrons les informations d'identification et les vérifierons par rapport à la base de données.

Si tout correspond, nous les connecterons et les redirigerons vers la page d'accueil. Pour les fausses connexions, les erreurs seront enregistrées à l'aide de la classe "WP_Error". En fonction de vos besoins, vous pouvez le remplacer par n'importe quelle autre page en modifiant le code.

Nous allons définir la méthode "log_the_user_in()" sur le hook "init". Ce hook se déclenche une fois que WordPress a terminé le chargement, mais avant l'envoi de tout en-tête. C'est idéal pour traiter un formulaire en utilisant la méthode POST.

Ci-dessous le code :

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } 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 password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

Ici, nous avons d'abord vérifié le nonce pour protéger le formulaire de certains types d'utilisation abusive, de code malveillant et d'attaques CSRF.

Ensuite, selon la méthode « is_email() » ou « is_numeric() », WordPress vérifiera un e-mail ou un numéro de téléphone valide. Si la valeur saisie n'est pas un e-mail ou un numéro de téléphone, nous vérifierons un nom d'utilisateur.

Derniers mots

Il s'agit d'ajouter la connexion au numéro de téléphone dans votre boutique WooCommerce. J'espère que cela vous a aidé dans votre projet.

Si vous avez trouvé cet article utile, n'hésitez pas à partager vos réflexions et suggestions dans la section des commentaires ci-dessous.