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 ?

Permettre aux utilisateurs de se connecter via un code à usage unique (OTP) par numéro de téléphone est une pratique courante. Cela élimine le besoin de se souvenir de mots de passe complexes tout en sécurisant leurs comptes.

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

• Sécurité améliorée : Contrairement aux mots de passe statiques, les OTP expirent après une seule utilisation, ce qui rend les connexions beaucoup 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 mot de passe : Si vous gérez un site communautaire, vos utilisateurs n'auront plus à réinitialiser les mots de passe oubliés, ce qui vous fera gagner du temps et réduira les tickets de support.
• Expérience utilisateur améliorée : Une connexion fluide maintient les utilisateurs satisfaits et plus susceptibles de revenir 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.

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.

Je recommande ce réglage 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 que la connexion par numéro de téléphone sera 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 uniques aux téléphones des utilisateurs pour une connexion sécurisée.

Il est conseillé de consulter leur page de tarification pour les derniers détails. Cependant, vous pouvez également choisir des options telles que 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 avez fait cela, de nouveaux paramètres deviendront visibles à l'écran. À partir de là, trouvez 'Téléphone' dans la liste des fournisseurs de connexion, cliquez dessus, puis 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 devez cliquer sur le bouton 'Ajouter un domaine'.

Cela ouvrira une boîte de dialogue où vous devrez ajouter le nom de domaine de votre site web.

Il s'agit d'une mesure de sécurité importante qui garantit que seul votre site web est autorisé à se connecter à ce projet Firebase, empêchant ainsi une utilisation non autorisée par d'autres.

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 le ferez, Firebase générera un code de configuration spécial pour son SDK.

'SDK' signifie Software Development Kit (kit de développement logiciel), et ce code contient tous les paramètres nécessaires pour connecter votre site WordPress à votre projet Firebase.

À 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 avez configuré cela, je vous recommande d'envoyer un e-mail à vos utilisateurs existants, les encourageant à ajouter leurs numéros 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, ce qui 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é à l'aide du plugin Nextend Social Login. C'est un outil populaire qui permet aux utilisateurs de s'inscrire et de se connecter à votre site en utilisant leurs comptes de médias sociaux existants comme Google, Facebook et Twitter.

Il 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.

Foire aux questions sur l'ajout de la connexion par numéro de téléphone via OTP dans WordPress

La mise en place d'un nouveau système de connexion peut soulever quelques questions. Voici les réponses à certaines des plus courantes que l'on me pose concernant l'ajout de la connexion par numéro de téléphone à WordPress.

Que se passe-t-il si mon site dépasse les limites gratuites de Firebase ?

Si le trafic de votre site Web augmente et que vous dépassez le niveau d'utilisation gratuit d'un service comme Firebase, vous passerez alors à leur plan payant.

Il est conseillé de surveiller votre utilisation dans le tableau de bord de votre compte Firebase.

Mes utilisateurs existants peuvent-ils toujours se connecter avec leur ancien e-mail et mot de passe ?

Oui. Comme indiqué dans le tutoriel, le plugin Connexion par numéro de téléphone vous permet de conserver la connexion par e-mail activée. Ceci est fortement recommandé pour éviter de confondre vos utilisateurs existants.

Ils peuvent continuer à se connecter avec leurs anciens identifiants et choisir d'ajouter leur numéro de téléphone à leur profil à tout moment.

Est-il possible de personnaliser la conception du formulaire de connexion par téléphone ?

La version gratuite du plugin offre un style de base conçu pour s'intégrer à la plupart des thèmes WordPress.

La version pro du plugin inclut également plus d'options de style intégrées.

Cette méthode de connexion par téléphone fonctionnera-t-elle avec WooCommerce ou mon plugin d'adhésion ?

Oui, le plugin Connexion par numéro de téléphone est conçu pour s'intégrer aux hooks de connexion et d'enregistrement standard de WordPress.

Cela signifie qu'il devrait fonctionner automatiquement avec des plugins populaires comme WooCommerce, MemberPress, et d'autres qui utilisent le système d'utilisateurs par défaut de WordPress pour leurs pages de connexion et d'enregistrement.

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.