Comment ajouter une connexion par numéro de téléphone via OTP dans WordPress

Vous souvenez-vous quand l'e-mail et le mot de passe étaient le seul moyen de se connecter aux sites Web ? Les temps ont changé, et maintenant de nombreux utilisateurs s'attendent à la commodité de se connecter avec leur numéro de téléphone.

Après avoir aidé différentes personnes à configurer des systèmes de connexion basés sur le téléphone sur leurs sites WordPress, j'ai appris quelles méthodes fonctionnent le mieux – et lesquelles éviter. J'ai testé tout, des plugins premium aux solutions personnalisées pour trouver les options les plus fiables.

Dans ce guide, je vais vous expliquer comment ajouter la connexion par numéro de téléphone avec vérification OTP à votre site WordPress. Que vous gériez un site de petite entreprise ou une grande plateforme d'adhésion, vous trouverez une solution qui répond à vos besoins.

Pourquoi laisser les utilisateurs WordPress se connecter avec leur numéro de téléphone ?

Les mots de passe peuvent être un casse-tête, surtout lorsque vous gérez un site communautaire, comme un site d'adhésion, un blog multi-auteurs, un site de commerce électronique, etc.

Le problème est que les gens oublient souvent leurs mots de passe, en réutilisent des faibles ou les écrivent là où d'autres peuvent les voir. Ce n'est pas sûr, et beaucoup de gens m'ont dit qu'ils souhaitaient qu'il y ait un moyen plus simple de se connecter aux sites Web WordPress.

Offrir une connexion par numéro de téléphone avec un code d'accès unique (OTP) simplifie les choses. Cela élimine le besoin de se souvenir des mots de passe tout en gardant les comptes d'utilisateurs sécurisés.

Voici pourquoi vous devriez envisager d'ajouter la connexion par téléphone à votre site WordPress :

• 🔒 Meilleure sécurité : Les mots de passe peuvent être piratés ou volés. Les OTP changent à chaque fois, rendant les connexions plus sûres.
• ⚡ Connexions plus rapides : Pas besoin de taper de longs mots de passe. Un code rapide envoyé sur un téléphone permet aux utilisateurs de se connecter instantanément.
• ⏳ Moins de réinitialisations de mots de passe : Si vous gérez un site communautaire, vos utilisateurs n'ont plus à réinitialiser leurs mots de passe oubliés, ce qui vous fait gagner du temps et réduit les tickets de support.
• 😊 Expérience utilisateur améliorée : Une connexion fluide maintient la satisfaction des utilisateurs et augmente la probabilité qu'ils reviennent sur votre site.
• 📱 Idéal pour les utilisateurs mobiles : De plus en plus de personnes naviguent sur leur téléphone. Leur permettre de se connecter avec un code rend le processus transparent.

Maintenant, examinons comment autoriser facilement la connexion par numéro de téléphone via OTP dans WordPress.

Comment ajouter une connexion par numéro de téléphone via OTP dans WordPress

Vous pouvez facilement ajouter une connexion par numéro de téléphone à WordPress en utilisant le plugin gratuit Login with Phone Number.

Cependant, comme WordPress n'envoie pas de SMS par défaut, vous aurez également besoin d'un service tiers comme Firebase ou Twilio pour gérer la livraison des OTP. Je vais vous montrer comment configurer tout cela.

Tout d'abord, vous devez installer et activer le plugin gratuit Login With Phone Number. Pour plus de détails, consultez ce tutoriel sur comment installer un plugin WordPress.

Après l'activation du plugin, visitez la page Paramètres de connexion » Général depuis le tableau de bord WordPress et cochez l'option « Activer la connexion par numéro de téléphone ».

Après cela, vous pouvez ajouter des codes pays pour toutes les régions où vos utilisateurs se connectent. Par défaut, le plugin inclut les codes pays des numéros de téléphone de tous les pays.

Je recommande de laisser ce paramètre tel quel. Il garantit que votre site reste accessible à un public mondial.

Ensuite, vous devez cocher l'option « Activer la connexion par e-mail » si vous souhaitez autoriser la connexion par e-mail pour vos utilisateurs.

Nous recommandons ce paramètre si vous avez des utilisateurs existants qui sont habitués à se connecter avec leur e-mail. Ce faisant, vous vous assurerez qu'ils ne seront pas frustrés une fois la connexion par numéro de téléphone activée, car ils pourront toujours se connecter en utilisant leur e-mail.

Vous pouvez ensuite cocher l'option « Forcer la récupération de l'e-mail après le numéro de téléphone ». Ce paramètre garantit que les nouveaux utilisateurs doivent fournir leur adresse e-mail avant de pouvoir terminer leur inscription. C'est particulièrement utile si vous avez déjà une liste d'e-mails et que vous souhaitez collecter les e-mails des nouveaux utilisateurs.

Vous pouvez également activer l'inscription des utilisateurs avec un numéro de téléphone. Une fois cela fait, tapez la longueur du code d'activation qui sera donné aux utilisateurs.

Après cela, vous devez faire défiler vers le bas et trouver l'option « Activer le minuteur ». Cliquez dessus pour l'activer, puis définissez la limite de temps pour que les utilisateurs saisissent l'OTP.

Par exemple, si vous le réglez sur 60 secondes, les utilisateurs auront une minute pour saisir leur code avant qu'il n'expire. Ensuite, cliquez sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.

Passez maintenant à l'onglet « Passerelle » en haut. Ici, vous devez sélectionner un fournisseur de services SMS pour votre connexion OTP par numéro de téléphone.

Je vais choisir Firebase pour ce tutoriel. C'est un service Google qui vous permet d'envoyer des codes d'accès à usage unique aux téléphones des utilisateurs pour une connexion sécurisée. Cependant, vous pouvez également choisir des options comme Twilio, WhatsApp, Alibaba SMS, et plus encore.

Gardez à l'esprit que certaines des options ne seront disponibles que dans le plan Pro.

Une fois que vous avez choisi Firebase, vous devrez ajouter sa clé API et sa configuration.

Pour cela, vous devez visiter la Console Firebase et sélectionner l'option « Créer un projet Firebase ».

Cela vous mènera à un nouvel écran, où vous devrez ajouter un nom de projet. Vous pouvez l'appeler comme vous le souhaitez pour vous souvenir de son utilité.

Ensuite, cliquez sur le bouton « Continuer ».

Firebase vous demandera alors l'autorisation d'activer Google Analytics pour le projet.

Une fois que vous aurez autorisé cela, vous devrez sélectionner « Compte par défaut pour Firebase » dans le menu déroulant et cliquer sur le bouton « Créer un projet ».

Vous serez maintenant dirigé vers la page Vue d'ensemble du projet. Ici, naviguez vers l'onglet Build » Authentication dans la colonne de gauche.

Cliquez sur le bouton « Commencer ».

Une fois que vous aurez fait cela, de nouveaux paramètres deviendront visibles à l'écran. À partir de là, choisissez « Téléphone » comme fournisseur natif et activez le commutateur « Activer ».

Cela permettra aux utilisateurs de se connecter avec un numéro de téléphone mobile en utilisant la vérification par téléphone du SDK Firebase. Ensuite, cliquez sur le bouton « Enregistrer ».

Maintenant, passez à l'onglet « Paramètres » et sélectionnez l'option « Domaines autorisés » dans la colonne de gauche.

Ici, vous devrez cliquer sur le bouton « Ajouter un domaine ». Cela ouvrira une invite où vous devrez ajouter le nom de domaine de votre site web.

Après cela, cliquez simplement sur l'icône des paramètres à côté de Vue d'ensemble du projet en haut et sélectionnez l'onglet « Paramètres du projet ».

Ensuite, faites défiler jusqu'à la section « Vos applications » et sélectionnez l'icône web.

Vous devrez maintenant ajouter un nom pour votre application et cliquer sur le bouton « Enregistrer l'application ».

Lorsque vous ferez cela, Firebase générera un SDK pour vous. Cela signifie Software Development Kit (Kit de développement logiciel), mais cela fonctionne comme une application.

À partir de là, cliquez simplement sur le bouton « Continuer vers la console ».

Une fois de retour sur la page Vue d'ensemble du projet, copiez simplement la « Clé API Web » et stockez-la dans un endroit sûr.

Faites maintenant défiler vers le bas jusqu'à la section « Vos applications » où les détails de votre nouvelle application s'afficheront à l'écran.

Ici, choisissez le bouton radio « Config » pour afficher votre SDK Firebase sous forme de configuration. Copiez-le simplement et conservez-le en lieu sûr.

Après cela, vous devez retourner à votre tableau de bord WordPress et ajouter la clé API et la configuration Firebase dans leurs champs respectifs dans les paramètres du plugin Login with Phone Number.

Ensuite, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Une fois cela fait, ouvrez la page WordPress où vous souhaitez ajouter le formulaire de connexion et cliquez sur le bouton « Ajouter un bloc ».

Dans le menu des blocs, vous devez choisir le bloc « Shortcode » et y ajouter le shortcode suivant :

[idehweb_lwp]

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.

Désormais, lorsque de nouveaux utilisateurs visiteront votre site web, ils pourront s'inscrire et se connecter en utilisant leur numéro de téléphone, tandis que les utilisateurs existants pourront toujours se connecter avec leur adresse e-mail.

Une fois que vous aurez configuré cela, nous vous recommandons d'envoyer un e-mail à vos utilisateurs existants, les encourageant à ajouter leur numéro de téléphone dès que possible.

Ils peuvent le faire en visitant leur page de profil dans le tableau de bord WordPress, en faisant défiler jusqu'à la section « Informations personnelles », en ajoutant leur numéro de téléphone et en cliquant sur Mettre à jour l'utilisateur.

Cela garantit que même les utilisateurs existants qui se sont déjà inscrits pourront se connecter avec leur numéro de téléphone plus tard.

Bonus : Ajoutez la connexion en un clic avec Google dans WordPress

Bien que la connexion avec un numéro de téléphone et un OTP soit une option sécurisée, certains utilisateurs préfèrent un moyen encore plus rapide d'accéder à leurs comptes.

L'ajout de la connexion Google en un clic permet aux utilisateurs de se connecter instantanément sans avoir à taper de numéro de téléphone ni à attendre un OTP. Contourner le formulaire de connexion WordPress de cette manière peut améliorer l'expérience utilisateur, réduire les frictions de connexion et augmenter les inscriptions.

C'est particulièrement utile pour les sites avec des visiteurs fréquents, tels que les plateformes d'adhésion, les boutiques en ligne ou les communautés.

Vous pouvez facilement ajouter cette fonctionnalité en utilisant le plugin Nextend Social Login. Il permet aux utilisateurs de se connecter avec leur compte Google et prend même en charge les connexions Facebook et Twitter.

Nextend vous permet également de lier des profils sociaux à des comptes existants, afin que les utilisateurs de retour ne créent pas de doublons.

Pour commencer, consultez notre tutoriel sur comment ajouter la connexion en un clic avec Google dans WordPress.

J'espère que cet article vous a aidé à apprendre comment ajouter la connexion par numéro de téléphone via OTP dans WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment supprimer l'option de réinitialisation/changement de mot de passe de WordPress et notre tutoriel sur la création d'une fenêtre contextuelle de connexion WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.