Partager:
){kind=small}
Julia s'engage à aider ses collègues développeurs en créant des tutoriels, des guides et des ressources pratiques. Grâce à son expérience en matière de sensibilisation et d'éducation, elle vise à rendre la technologie plus accessible et à améliorer l'expérience globale des développeurs. Vous pouvez souvent la trouver lors d'événements communautaires locaux.
Verify les numéros de téléphone avec Node-RED
Temps de lecture : 15 minutes
Note : Certains des outils ou méthodes décrits dans cet article peuvent ne plus être pris en charge ou ne plus être d'actualité. Pour un contenu mis à jour ou une assistance, consultez nos derniers articles ou contactez-nous sur le site Communauté Vonage Slack
Dans les tutoriels précédents vous avez découvert les API SMS et Voice de Nexmo, vous vous êtes familiarisé avec l'envoi et la réception de messages et d'appels, et avec un peu de chance, vous avez également eu l'occasion d'expérimenter et de jouer avec la personnalisation de ces expériences dans Node-RED.
Dans ce tutoriel, nous allons examiner l'API Verify API et nous explorerons un moyen pratique de valider les numéros de téléphone de vos utilisateurs.
De nombreuses applications embarquent les utilisateurs avec à peine plus qu'un numéro de téléphone afin de simplifier au maximum le processus, et elles doivent utiliser cet identifiant pour l'authentification par la suite.
Voyons donc comment nous pouvons y parvenir, et nous assurer qu'il n'y a pas de comptes en double et que les utilisateurs sont effectivement joignables aux numéros de téléphone qu'ils ont fournis.
Avant de commencer, vous aurez besoin de quelques éléments :
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Afin d'interagir avec l'API Verify, vous devez prendre note de quelques éléments. Une fois que vous avez créé un compte Nexmo, allez dans le tableau de bord pour trouver votre clé API et votre secret. Vous utiliserez ces informations d'identification plus tard pour vous authentifier auprès de l'API.
Tout d'abord, vous devez installer le runtime et l'éditeur. Cela peut se faire soit sur votre machine locale, soit sur un Single Board Computer (par exemple Raspberry Pi), soit sur un certain nombre d'options hébergées dans le cloud.
Cet exemple utilise votre machine locale, donc une fois que vous avez installé Node-RED globalement, tapez la commande ci-dessous dans votre terminal pour commencer.
Vous pouvez ensuite accéder à l'éditeur Node-RED en pointant votre navigateur sur http://localhost:1880.
Une fois votre éditeur ouvert, vous devez installer les nœuds Nexmo. Vous pouvez le faire sous la palette Gérer la palette en recherchant le paquet node-red-contrib-nexmo et en cliquant sur installer.
install node red
Ensuite, répétez l'étape précédente pour le paquet node-red-dashboard également.
Après avoir redémarré Node-RED, vous devriez maintenant voir tous les nœuds Nexmo et Dashboard apparaître sur le côté gauche de votre écran, parmi les autres nœuds par défaut dans la palette de nœuds.
Pour ce tutoriel, vous aurez besoin d'une interface utilisateur simple pour collecter les données des utilisateurs. Il y a plusieurs façons de procéder, y compris en écrivant votre propre HTML et CSS, mais une alternative beaucoup plus rapide est d'utiliser les nœuds du tableau de bord Node-RED.
Un champ de texte recueillant le numéro de téléphone
Un champ de texte recueillant le code PIN
A Annuler la vérification bouton
A Bouton "Call Me qui permet à l'utilisateur de demander un appel téléphonique en plus d'un SMS, afin de recevoir le code PIN.
Accélérer le processus en Importer à partir du presse-papiers l'extrait ci-dessous, ou expérimentez vous-même les nœuds du tableau de bord.
[
{
"id": "463e8e92.d82a78",
"type": "tab",
"label": "Verify Demo",
"disabled": false,
"info": ""
},
{
"id": "fb7955ef.0e5fd8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Verify your phone number:",
"group": "91563061.fc448",
"order": 1,
"width": 0,
"height": 0,
"options": [
{
"label": "eg. 447401234567",
"value": "number",
"type": "text",
"required": true
}
],
"formValue": {
"number": ""
},
"payload": "",
"submit": "Send me a code",
"cancel": "delete",
"topic": "",
"x": 430,
"y": 140,
"wires": [
[]
]
},
{
"id": "b60bf0b2.9a839",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 2,
"width": "0",
"height": "0",
"passthru": false,
"label": "Call me",
"tooltip": "",
"color": "",
"bgcolor": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 520,
"y": 580,
"wires": [
[]
]
},
{
"id": "b182a10d.c8f08",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 3,
"width": 0,
"height": 0,
"passthru": false,
"label": "Cancel Verification",
"tooltip": "",
"color": "",
"bgcolor": "red",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 550,
"y": 760,
"wires": [
[]
]
},
{
"id": "a2251664.3ba2f",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Start Verification - Collect phone number to be verified",
"info": "",
"x": 520,
"y": 80,
"wires": []
},
{
"id": "7185f18d.87142",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Check if received code matches the generated one",
"info": "",
"x": 510,
"y": 280,
"wires": []
},
{
"id": "7f30e.60359cf28",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Next Verification - Escalate to TTS Call",
"info": "",
"x": 610,
"y": 520,
"wires": []
},
{
"id": "c46fa301.4eb0d8",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Cancel Verification",
"info": "",
"x": 550,
"y": 700,
"wires": []
},
{
"id": "ab7fb094.d7d1f8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Check code:",
"group": "91563061.fc448",
"order": 4,
"width": 0,
"height": 0,
"options": [
{
"label": "Enter the PIN code you received",
"value": "code",
"type": "text",
"required": true
}
],
"formValue": {
"code": ""
},
"payload": "",
"submit": "submit",
"cancel": "delete",
"topic": "",
"x": 390,
"y": 340,
"wires": [
[]
]
},
{
"id": "91563061.fc448",
"type": "ui_group",
"z": "",
"name": "Verify Demo Input Fields",
"tab": "fdce8e2a.f4364",
"disp": false,
"width": "8",
"collapse": false
},
{
"id": "fdce8e2a.f4364",
"type": "ui_tab",
"z": "",
"name": "Verify Demo",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]Lorsque vous êtes prêt, votre éditeur devrait ressembler à ceci :
verify UI template
Pour voir votre interface utilisateur, naviguez vers http://127.0.0.1:1880/ui.
verify UI
Une fois que nous avons collecté le numéro de téléphone d'un utilisateur, nous pouvons lancer le processus de vérification en envoyant une demande de vérification à l'API Verify.
Pour lancer une vérification, vous aurez besoin d'un nœud sendverify relié au formulaire capturant le numéro de téléphone de l'utilisateur. Par défaut, un texte court personnalisé et un code PIN seront envoyés par SMS au numéro de téléphone de l'utilisateur, suivis de deux appels téléphoniques avec synthèse vocale au cas où l'utilisateur ne soumettrait pas le code reçu.
Ouvrez les propriétés du sendverify en double-cliquant dessus. Vous y trouverez les trois champs obligatoires à remplir : Nexmo Credentials, To {} et Brand {}.
Notez la mention {} à côté des étiquettes, ce qui signifie que ces champs prendront en charge le format Mustache Templating et que vous pourrez passer des valeurs de manière dynamique.
Dans le menu déroulant Nexmo Credentials sélectionnez Ajouter un nouveau nexmobasic et cliquez sur le bouton "Modifier". Vous serez alors invité à fournir vos API Key et API Secret pour vous authentifier avec l'API Verify - ces deux éléments se trouvent dans votre Nexmo Dashboard.
Une fois que vous avez terminé, cliquez sur ajouter. Maintenant, à côté de l'étiquette Nexmo Credentials vous verrez un nœud nœud de configurationqui stockera vos informations d'identification à l'avenir.
Ensuite, vous devez entrer le numéro de téléphone de votre utilisateur dans le champ To {} le numéro de téléphone de l'utilisateur. Si vous avez importé l'extrait d'interface utilisateur ci-dessus, ce sera {{msg.payload.number}}puisque nous avons spécifié dans le premier nœud form que la valeur d'entrée doit être collectée dans la clé number de msg.payload. Vous pouvez changer cela en ouvrant les propriétés du nœud form et en choisissant un autre Name.
Enfin, vous pouvez personnaliser le corps du SMS de demande de vérification sous Brand {} pour aider les utilisateurs à identifier le nom de votre entreprise ou de votre application. Il prend une chaîne alphanumérique de 18 caractères qui sera ajoutée au code PIN généré par l'API Verify.
Par exemple : "Votre code PIN Acme Inc. est ..."
send verify configuration
Le nœud sendverify affiche la réponse de l'API reçue de Nexmo, contenant un request_id et un status . Pour en savoir plus sur les codes d'état, consultez la Référence de l'API Verify.
Le nœud request_id sera utilisé pour toutes les étapes suivantes, nous devons donc le rendre accessible à tous les autres nœuds du flux actuel. Pour ce faire, connectez un nœud change à sendverify, ouvrez ses propriétés de noeud et définissez flow.request_id à msg.payload.request_id.
verify set request ID
Pour mieux comprendre ce qui se passe, vous pouvez également connecter un nœud debug dans sendverify. De cette façon, vous pouvez suivre la réponse de l'API dans la barre latérale de débogage.
La demande a été acceptée par Nexmo, votre utilisateur a reçu un code de vérification et l'a déjà soumis via le formulaire correspondant. Un succès ? Presque.
Nous devons maintenant vérifier si le code soumis est bien celui généré et envoyé par l'API Verify.
Pour cette étape, nous aurons besoin du nœud checkverify qui prendra en entrée le ID de la demande et le code fournis par l'utilisateur, compare les deux, puis affiche la réponse de l'API dans le fichier msg.payload.
Après l'avoir glissé dans votre espace de travail, connectez-le au formulaire capturant le code PIN soumis par l'utilisateur, puis connectez un nœud debug après lui pour voir l'objet réponse dans la barre latérale de débogage.
Ouvrez les checkverify propriétés du nœud. Dans le menu déroulant Nexmo Credentials sélectionnez le nœud de configuration créé par sendverifyet remplissez le champ Request ID {} avec {{flow.request_id}} et transmettez le code soumis par votre utilisateur dans le champ Code {} le code soumis par votre utilisateur.
Si vous avez importé l'extrait d'interface utilisateur ci-dessus, ce sera {{msg.payload.code}}puisque nous avons spécifié dans le deuxième nœud form que la valeur d'entrée doit être collectée dans la clé code clé de msg.payload. Vous pouvez changer cela en ouvrant les propriétés du nœud form et en choisissant un autre Name.
check verify
Félicitations!🎉 Votre flux Verify est opérationnel. http://localhost:1880/ui et essayez-le !
Après avoir soumis le code PIN reçu, retournez dans votre éditeur Node-RED et regardez de plus près la barre latérale de débogage.
L'objet de réponse contiendra des détails sur votre demande, notamment statusqui indique si la demande a été acceptée ou non. Si le code PIN soumis par l'utilisateur correspond à celui généré par l'API Verify, status aura une valeur de "0".
Bien que le numéro de téléphone de l'utilisateur ait été validé avec succès, il n'y a aucun signe de cet événement en dehors de la barre latérale de débogage pour le moment.
Pour définir ce qui doit se passer après la fin du processus de vérification, nous pouvons utiliser la propriété status de msg.payload pour séparer les différents scénarios.
Vous pourriez vouloir accorder à cet utilisateur l'accès à une certaine page web ou application, enregistrer les détails de l'utilisateur vérifié avec succès dans une base de données, ou l'informer du résultat et l'inviter à réessayer en cas d'échec. Tout dépend de votre cas d'utilisation et de la raison pour laquelle vous essayez de vérifier vos utilisateurs.
Pour simplifier les choses, nous allons évaluer la propriété status puis, en fonction de sa valeur, indiquer à l'utilisateur si la vérification a réussi ou non. Si vous souhaitez être plus précis dans vos messages d'erreur, n'hésitez pas à ajouter d'autres routes pour d'autres codes d'état pour d'autres codes d'état.
Pour ce faire, nous aurons besoin de
a
switchpour vérifier la valeur demsg.payload.statusa
notificationun nœud de tableau de bord pour informer l'utilisateurdeux
changenœuds pour préparer le message que le nœudnotificationun en cas de succès et l'autre en cas d'échec.
Ajoutez ces nœuds à votre espace de travail et connectez-les comme indiqué dans l'image ci-dessous.
check verify switch
Examinons maintenant de plus près chacun de ces nœuds :
switch
Le nœud switch achemine les messages en fonction de la valeur de leur propriété ou de leur position dans la séquence. Dans ce cas, nous cherchons à créer deux routes basées sur la valeur de msg.payload.status.
Lorsqu'un message arrive, le nœud évalue chacune des règles définies dans ses propriétés et transmet le message aux sorties correspondantes de toutes les règles correspondantes.
Tout d'abord, double-cliquez sur le nœud switch pour accéder à ses propriétés. Dans le champ Property remplacez "payload" par "status", de sorte que ce soit msg.payload.status qui sera évalué.
Ensuite, nous devons définir des règles basées sur sa valeur. Cliquez sur le bouton ajouter pour ajouter une deuxième règle, car nous en aurons besoin de deux :
succès : dans la première règle, sélectionnez "==" dans la première liste déroulante et écrivez "0" dans le champ de texte à côté ;
échec : dans la deuxième règle, sélectionnez "!=" dans la première liste déroulante et écrivez "0" dans le champ de texte situé à côté. Cette règle couvre tous les cas où la vérification n'a pas abouti.
Notez que les règles ont un -> 1 et un -> 2 à côté d'elles. Cela indique que si la première affirmation est vraie, les nœuds connectés à la première sortie seront déclenchés. Dans tous les autres cas, les nœuds connectés à la deuxième sortie seront déclenchés.
notification
Le nœud notification Le nœud s'affiche msg.payload sous la forme d'une notification contextuelle ou d'un message OK/Annuler dans l'interface utilisateur. Vous pouvez choisir le type de notification dans la liste déroulante des propriétés du nœud. Layout dans les propriétés du nœud et, dans le cas d'une fenêtre contextuelle, vous pouvez également configurer sa position.
Définissez la durée dans le champ Timeout (S) en entrant le nombre de secondes pendant lesquelles vous souhaitez qu'elle reste visible dans l'interface utilisateur.
Si vous souhaitez définir un titre, vous pouvez le faire dans le champ Topic ou, si un msg.topic est disponible, il sera utilisé comme titre.
Il est possible de personnaliser davantage l'expérience en définissant une couleur de bordure, soit dans le champ Border ou en la passant dynamiquement dans le champ msg.highlight.
change
Dans les change nous utiliserons l'opération Set pour spécifier les valeurs de msg.payload et msg.highlight.
Ouvrons les propriétés du premier nœud change (assurez-vous qu'il est connecté à la première sortie du nœud switch notre scénario de réussite). Définissez msg.payload à un message de succès comme "Vérification réussie !", cliquez sur le bouton ajouter pour définir une deuxième règle, et définissez msg.highlight à "vert".
Répétez les mêmes étapes pour le deuxième change mais cette fois-ci, donnez la valeur msg.payload "La vérification a échoué !" comme valeur, et définissez la valeur de msg.highlight à "rouge". Assurez-vous également qu'il est connecté à la deuxième sortie du nœud switch nœud.
Frapper Déployer et faites un nouvel essai ! Une fois le processus de vérification terminé, vous verrez apparaître une fenêtre contextuelle avec le résultat !
Une fois la procédure de vérification lancée, Numbers tentera à trois reprises de transmettre le code PIN au numéro de téléphone indiqué : un SMS et deux appels téléphoniques de type "text-to-speech" (TTS).
Il arrive qu'un appel téléphonique soit la meilleure option, que ce soit pour des raisons d'accessibilité ou par pure préférence personnelle. Il est toujours agréable de donner à nos utilisateurs la possibilité de choisir une autre méthode de livraison, alors voyons comment mettre en place un bouton qui ferait passer le processus de vérification à un appel TTS instantanément.
Dans le modèle de flux fourni, recherchez la rubrique Appelez-moi et connectez-y un nœud nextverify à ce bouton. Ouvrez les nextverify propriétés du nœud, sélectionnez votre Nexmo Credentials dans le menu déroulant et remplissez le champ Request ID {} avec {{flow.request_id}}. Vous pouvez également envisager d'ajouter un nœud debug pour une meilleure compréhension de votre part, et un nœud change suivi d'un nœud notification pour que l'utilisateur sache ce qui se passe - comme vous l'avez fait à l'étape précédente, mais c'est tout à fait facultatif.
Dans un monde idéal, nous nous arrêterions ici, mais il se passe toujours quelque chose, n'est-ce pas ? Vous avez fait une erreur en remplissant un formulaire et vous avez cliqué sur "Envoyer" - il est trop tard pour changer d'avis et cliquer sur "Supprimer". Effacer la vérification a déjà commencé.
Vous pourriez penser qu'il suffit d'attendre et de réessayer une fois que l'opération a échoué. Oui, cela fonctionne aussi, mais ce n'est pas la meilleure façon de procéder. Outre l'expérience frustrante qu'elle procure à vos utilisateurs, pensez aux pauvres âmes qui ne se doutent de rien et qui reçoivent deux appels téléphoniques en plus du message de vérification initial - à 2 heures du matin. Oups.
Heureusement, il existe un moyen simple et rapide de mettre en place un système de vérification de l'annulation. Annuler la vérification .
Si vous avez importé l'extrait d'interface utilisateur fourni, tout ce que vous avez à faire est de connecter un nœud cancelverify au nœud Annuler la vérification ouvrir les propriétés du nœud cancelverify ouvrez les propriétés du nœud, sélectionnez votre Nexmo Credentials dans le menu déroulant et remplir le champ Request ID {} avec {{flow.request_id}}.
Vous pouvez également ajouter un nœud debug pour voir l'objet de la réponse dans la barre latérale de débogage, et un nœud change suivi d'un nœud notification pour indiquer à l'utilisateur qu'il a été annulé avec succès.
Maintenant, cliquez sur Déployer et testez-le ! Gardez à l'esprit que pour qu'une demande d'annulation soit valide, elle doit être initiée au moins 30 secondes après que le numéro de téléphone a été soumis. Il reste encore beaucoup de temps pour éviter que l'appel TTS ne soit lancé !
Et voilà ! Avec votre dispositif de sécurité en place, vous pouvez maintenant dormir sur vos deux oreilles - et il en va de même pour tous les étrangers sans méfiance que vous vérifierez. Bon travail !
Vous pouvez déjà suivre le déroulement du processus de vérification dans la barre latérale de débogage, puisque chaque objet de retour reçu de l'API Nexmo est enregistré par un nœud de débogage, ce qui permet d'obtenir des informations précieuses sur ce qui se passe.
Parfois, la zone de débogage est un peu encombrée, ce qui rend difficile l'identification de l'information recherchée. En outre, vous pourriez vouloir vérifier votre vérification entre deux événements, sans avoir à attendre que le prochain se produise pour qu'un autre objet de retour se présente. Il se peut que la vérification soit déjà terminée, mais vous ne savez pas exactement si elle a échoué ou si elle s'est terminée avec succès.
La bonne nouvelle, c'est qu'il existe un searchverify Nexmo qui prend en charge toutes ces préoccupations. Déclenché par, disons, un nœud inject il produira toutes les informations disponibles sur une demande de vérification passée ou en cours identifiée par un nœud request_id.
Ajoutez un searchverify à votre espace de travail, en le plaçant entre un nœud inject et un nœud debug et un nœud Dans les propriétés du searchverify propriétés du nœud, sélectionnez votre Nexmo Credentials dans le menu déroulant et remplissez le champ Request ID {} avec {{flow.request_id}} pour obtenir des détails sur la vérification en cours. Vous pouvez également coller un request_id dans ce champ, au cas où vous voudriez vérifier une vérification qui a eu lieu avant la vérification en cours.
Maintenant, lorsque vous regardez la barre latérale de débogage, après avoir fait tourner votre application, vous remarquerez que chaque fois que vous cliquez sur le bouton du nœud inject dans votre éditeur, il renvoie un objet contenant tous les détails disponibles sur la requête en question. Examinez de plus près les champs de réponse et consultez la page Référence API Nexmo pour en savoir plus sur chacun d'entre eux.
Nexmo Verify Référence API
Verify Documentation
Essayez un autre tutoriel :
Partager:
Julia s'engage à aider ses collègues développeurs en créant des tutoriels, des guides et des ressources pratiques. Grâce à son expérience en matière de sensibilisation et d'éducation, elle vise à rendre la technologie plus accessible et à améliorer l'expérience globale des développeurs. Vous pouvez souvent la trouver lors d'événements communautaires locaux.