Comment ajouter la connexion avec le numéro de téléphone via OTP dans WordPress

Vous souvenez-vous de l’époque où l’e-mail et le mot de passe étaient les seuls moyens de se connecter à un site ? Les temps ont changé et aujourd’hui, de nombreux utilisateurs/utilisatrices s’attendent à pouvoir se connecter avec leur numéro de téléphone.

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

Dans ce guide, je partagerai avec vous 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 adaptée à vos besoins.

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

Les mots de passe peuvent être une source de tracas, en particulier lorsque vous gérez un site communautaire, tel qu’un site d’adhésion, un blog à auteurs/autrices multiples, un site de commerce électronique, etc.

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

Proposer une connexion par numéro de téléphone avec un code de passe à usage unique (OTP) facilite les choses. Elle retire la nécessité de se souvenir des mots de passe tout en sécurisant les comptes des utilisateurs/utilisatrices.

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

• 🔒 Une meilleure sécurité : Les mots de passe peuvent être piratés ou volés. Les OTP changent à chaque fois, ce qui rend les connexions plus sûres.
• ⚡ Connexion plus rapide : Aucun besoin de taper de longs mots de passe. Un code rapide envoyé sur un téléphone permet aux utilisateurs/utilisatrices de se connecter instantanément.
• ⏳ Moins de réinitialisations de mots de passe : Si vous gérez un site communautaire, vos utilisateurs/utilisatrices n’ont plus à réinitialiser les mots de passe oubliés, ce qui vous permet d’enregistrer des billets de support et de gagner du temps.
• 😊 A mélioration de l’expérience des utilisateurs/utilisatrices : Une connexion fluide rend les gens heureux et plus enclins à revenir sur votre site.
• 📱 Idéal pour les utilisateurs/utilisatrices 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.

Voyons maintenant comment permettre facilement la connexion avec le numéro de téléphone via OTP dans WordPress.

Comment ajouter la connexion avec le 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 l’extension gratuite 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 distribution de l’OTP. Je vais vous afficher comment définir tout cela.

Tout d’abord, vous devez installer et activer l’extension gratuite Login With Phone Number. Pour plus de détails, consultez ce tutoriel sur l ‘installation d’une extension WordPress.

Une fois le plugin activé, rendez-vous sur la page Réglages de connexion ” Général du tableau de bord WordPress et cochez l’option ” Activer la connexion par numéro de téléphone “.

Ensuite, vous pouvez ajouter des codes pays pour toutes les régions où vos utilisateurs/utilisatrices se connectent. Par défaut, l’extension inclut les codes pays des numéros de téléphone pour tous les pays.

Je recommande de laisser ce réglage 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 permettre à vos utilisateurs/utilisatrices de se connecter par e-mail.

Nous vous recommandons de définir ce réglage si vous avez des utilisateurs/utilisatrices qui ont l’habitude de se connecter à l’aide de leur e-mail. Ainsi, ils ne seront pas frustrés lorsque la connexion par numéro de téléphone sera activée, car ils pourront toujours se connecter à l’aide de leur e-mail.

Vous pouvez ensuite cocher l’option “Forcer l’obtention d’un e-mail après le numéro de téléphone”. Ce réglage permet de s’assurer que les nouveaux utilisateurs sont nécessaires pour fournir leur adresse e-mail avant de terminer l’inscription. Cette option est particulièrement utile si vous disposez déjà d’une liste d’e-mails et que vous souhaitez recueillir les e-mails des utilisateurs/utilisatrices nouveaux.

Vous pouvez également activer l’Inscription des utilisateurs/utilisatrices à l’aide d’un numéro de téléphone. Une fois cela fait, tapez la longueur du code d’activation qui sera donné aux utilisateurs/utilisatrices.

Ensuite, vous devez défiler vers le bas et trouver l’option ” Enable Timer ” (activer la minuterie). Cliquez pour l’activer, puis définissez la limite de temps pour que les utilisateurs/utilisatrices saisissent l’OTP.

Par exemple, si vous définissez une durée de 60 secondes, les utilisateurs/utilisatrices auront une minute pour saisir leur code avant qu’il n’expire. Cliquez ensuite sur le bouton “Enregistrer les modifications” pour enregistrer vos réglages.

Allez-y et passez à l’onglet “Gateway” en haut de la page. Ici, vous devez sélectionner un fournisseur de services SMS pour la connexion OTP de votre numéro de téléphone.

Je vais choisir Firebase pour ce tutoriel. C’est un service de Google qui vous permet d’envoyer des codes de passe à usage unique aux téléphones des utilisateurs/utilisatrices pour une connexion sécurisée. Cependant, vous pouvez également choisir des options telles que Twilio, WhatsApp, Alibaba SMS, et bien d’autres encore.

N’oubliez pas que certaines options sont uniquement disponibles dans l’offre Pro.

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

Pour cela, vous devez vous rendre dans la console Firebase et sélectionner l’option “Créer un projet Firebase”.

Un nouvel écran s’affiche, dans lequel vous devez ajouter un nom de projet. Vous pouvez l’appeler par n’importe quel nom qui vous aide à vous souvenir de l’usage que vous en faites.

Cliquez ensuite sur le bouton “Continuer”.

Firebase va maintenant demander le droit d’activer Google Analytics pour le projet.

Une fois que vous avez permis cela, vous devez sélectionner “Compte par défaut pour Firebase” dans le menu déroulant et cliquer sur le bouton “Créer un projet”.

Vous accédez maintenant à la page “Project Overview” (Aperçu du projet). Ici, naviguez vers l’onglet Version ” Authentification dans la colonne de gauche.

Cliquez sur le bouton “Premiers pas”.

Une fois que vous avez fait cela, de nouveaux Réglages deviendront visibles à l’écran. Choisissez “Téléphone” comme fournisseur natif et activez le commutateur “Activer”.

Cela permettra aux utilisateurs/utilisatrices de se connecter avec un numéro de téléphone mobile en utilisant la vérification du téléphone Firebase SDK. Cliquez ensuite sur le bouton “Enregistrer”.

Passez maintenant à l’onglet “Réglages” et sélectionnez l’option “Domaines autorisés” dans la colonne de gauche.

Ici, vous devez cliquer sur le bouton “Ajouter un domaine”. Cela ouvrira un prompt où vous devez ajouter le nom de domaine de votre site.

Ensuite, il suffit de cliquer sur l’icône des paramètres à côté de l’aperçu du projet en haut et de sélectionner l’onglet “Réglages du projet”.

Défilez ensuite jusqu’à la section “Vos Icônes” et sélectionnez l’icône web.

Vous devez maintenant donner un nom à votre application et cliquer sur le bouton “S’inscrire”.

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

À partir de là, il suffit de cliquer sur le bouton “Continuer vers la console”.

Une fois que vous êtes de retour sur la page de présentation du projet, il vous suffit de copier la “Clé de l’API Web” et de la stocker dans un endroit sûr.

Défilez ensuite vers le bas jusqu’à la section “Vos applications”, où les détails de votre application la plus récente seront affichés à l’écran.

Choisissez le bouton radio ‘Config’ pour afficher votre Firebase SDK en tant que configuration. Il suffit de le copier et de le boutique dans un endroit sûr.

Après cela, vous devez retourner dans votre Tableau de bord WordPress et ajouter la clé de l’API Firebase et la config dans leurs champs respectifs dans les Réglages du plugin Login with Phone Number.

Cliquez ensuite sur le bouton “Enregistrer les modifications” pour enregistrer vos réglages.

Une fois que c’est fait, ouvrez la page WordPress où vous souhaitez ajouter le formulaire de connexion et cliquez sur le bouton ” Ajouter un bloc “.

Dans le menu du bloc, vous devez choisir le bloc “Shortcode” et y ajouter le code court abonné :

[idehweb_lwp]

Enfin, cliquez sur le bouton “Mettre à jour” ou “Publier” pour enregistrer vos Réglages.

Désormais, lorsque de nouveaux utilisateurs visiteront votre site, ils pourront s’inscrire et se connecter à l’aide de leur numéro de téléphone, tandis que les utilisateurs existants pourront toujours se connecter à l’aide de leur e-mail.

Une fois le réglage effectué, nous vous recommandons d’envoyer un e-mail à vos utilisateurs/utilisatrices existants pour les encourager à ajouter leur numéro de téléphone dès que possible.

Ils peuvent le faire en se rendant sur leur page de profil dans le tableau de bord WordPress, en défilant jusqu’à la section “Informations personnelles”, en ajoutant leur numéro de téléphone et en cliquant sur Mettre à jour l’utilisateur.

Ainsi, même les utilisateurs/utilisatrices déjà connectés peuvent se connecter ultérieurement avec leur numéro de téléphone.

Bonus : Ajouter une connexion en un clic avec Google dans WordPress

Si se connecter avec un numéro de téléphone et un OTP est une option sûre, certains utilisateurs/utilisatrices 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 un numéro de téléphone ou à attendre un OTP. En contournant ainsi le formulaire de connexion de WordPress, on peut améliorer l’expérience des utilisateurs/utilisatrices, réduire les frictions liées à la connexion et augmenter le nombre d’inscriptions.

Il est particulièrement utile pour les sites accueillant de nombreux internautes, tels que les plateformes d’adhésion, les boutiques en ligne ou les communautés.

Vous pouvez facilement ajouter cette fonctionnalité en utilisant l’extension Nextend Social Login. Il permet aux utilisateurs/utilisatrices de se connecter avec leur compte Google et supporte même les connexions Facebook et Twitter.

Nextend vous permet également de Linker les profils sociaux aux comptes existants, afin que les utilisateurs/utilisatrices qui reviennent ne créent pas de doublons.

Pour Premiers pas, il suffit de consulter notre tutoriel sur l ‘ajout de la connexion en un clic avec Google dans WordPress.

J’espère que cet article vous a aidé à apprendre comment ajouter la connexion avec le numéro de téléphone via OTP dans WordPress. Vous pouvez également consulter notre guide du débutant sur la façon de retirer l’option de réinitialisation/modification du mot de passe sur WordPress et notre tutoriel sur la création d’une fenêtre surgissante modale de connexion sur WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.