Utiliser les API de Vonage avec MongoDB Atlas - Partie 2

Dans cette série :

• Partie 1 - Qu'est-ce que MongoDB Atlas ?

• Partie 2 - Utilisation de Vonage Verify avec les ouvertures de session

• Partie 3 - Utilisation de Vonage pour les interactions avec les clients

• Partie 4 - Utilisation d'Atlas pour l'authentification des utilisateurs

• Partie 5 - Utiliser In-App Messaging de Vonage pour les notifications

Nous poursuivons notre plongée dans MongoDB Atlas et son utilisation avec diverses API de Vonage. Dans la première partie, nous avons examiné ce qu'est exactement MongoDB Atlas et certains des services qu'il offre. Dans la partie 2, nous allons nous plonger dans l'application d'exemple pour voir comment nous pouvons utiliser MongoDB pour soutenir notre processus d'enregistrement ainsi que pour câbler Vonage Verify pour une sécurité supplémentaire de l'utilisateur.

Qu'est-ce que Verify ?

Verify de Vonage est une authentification à deux facteurs que Vonage fournit sous forme d'API. Il vous permet de faire un simple appel API pour envoyer un code à un utilisateur, puis de vérifier sa validité à l'aide d'un autre appel API. Cela offre une sécurité supplémentaire en garantissant que non seulement l'utilisateur connaît son mot de passe, mais qu'il dispose également d'un appareil physique qu'il nous a indiqué pour recevoir le code. Étant donné que la plupart des gens possèdent un appareil mobile, on peut supposer qu'ils pourront recevoir le code sur cet appareil.

Vonage Verify génère le code et contacte le client en votre nom. Nous essaierons également de contacter le client plusieurs fois, de différentes manières. Par exemple, si vous n'essayez pas de valider le code d'un client dans un certain délai, nous essaierons d'appeler le client avec un message automatisé pour lui fournir le code. S'il ne le saisit toujours pas ou ne répond pas au téléphone, nous essaierons à nouveau d'envoyer un SMS. Vous pouvez contrôler la manière dont nous essayons de contacter le client par le biais de ce que l'on appelle les flux de travail.

Notre ancien produit Verify prend en charge les SMS et la Voice pour contacter le client. Verify prend en charge les SMS, Voice, WhatsApp, Email et les canaux d'authentification basés sur l'appareil avec des flux de travail entièrement personnalisables. Les deux produits vous évitent d'avoir à envoyer manuellement des notifications à vos clients et à suivre leurs réponses. Vous n'avez pas non plus à vous soucier d'envoyer des messages de plainte ou d'être pris dans les filtres anti-spam des compagnies de téléphone.

Il vous suffit de nous envoyer une demande d'API, nous vous envoyons le code et vous le vérifiez.

Création d'une base de données

Pour que notre démo fonctionne, il faut que les utilisateurs puissent commander de la nourriture ! L'ajout d'informations dans une base de données MongoDB est un peu différent de l'ajout de données dans un système de gestion de base de données relationnelle traditionnel comme Postgres ou MySQL. MongoDB est un système basé sur les documents, donc au lieu de créer une base de données avec des tables, nous allons créer une base de données avec des Collections. Ces collections stockeront des documents, qui sont des documents spéciaux de type JSON que nous pouvons rechercher et utiliser.

Créons notre première base de données. Depuis votre tableau de bord MongoDB Atlas, cliquez sur le bouton Parcourir les collections pour votre cluster.

MongoDB Dashboard

Vous obtiendrez ainsi une vue de toutes les informations contenues dans votre cluster. Pour l'instant, il n'y a pas de base de données ni d'informations. Ajoutons quelques produits alimentaires que les utilisateurs pourront acheter. Cliquez sur l'onglet Mes propres données (Mes propres données).

Adding Data

Il vous demandera alors le nom de la base de données et le nom de la collection. Pour notre démo, nous voulons "restaurant_pos_demo" pour le nom de la base de données. Nom de la base de données et "inventory" pour le nom de la collection. La démo est déjà configurée pour rechercher cette base de données et cette collection, assurez-vous donc d'utiliser ces noms plutôt que quelque chose de personnalisé. Une fois ces informations saisies, cliquez sur le bouton Créer sur le bouton Créer.

Create new Collection

Nous pouvons maintenant saisir quelques données. Cliquez sur l'icône Insérer un document (Insérer un document). L'éditeur de documents s'affiche. Bien qu'il propose une série de menus déroulants pour la saisie d'informations, nous pouvons également coller des documents. Cliquez sur le bouton {} en haut pour passer en mode saisie de texte et coller le petit bloc de JSON pour le document Hamburger. Cliquez sur Inséreret l'élément d'inventaire sera sauvegardé. Répétez l'opération, mais la deuxième fois, collez le document Soda.

// Document 1
{
  "name": "Hamburger",
  "price": 995
}

// Document 2
{
  "name": "Soda",
  "price": 199
}

Document Editor

Une fois que vous avez saisi les deux documents, vous pouvez les voir dans la vue de la base de données. Cet éditeur est un excellent moyen de jouer avec les documents et les données pendant que vous construisez votre base de données, et peut vous faire gagner beaucoup de temps pendant la phase de développement pour déboguer les données. Dans un environnement de production plus vaste, vous pouvez exécuter des requêtes pour filtrer les données, mais pour l'instant, il s'agit d'un bon moyen rapide de saisir nos données.

Documents

Mise en place de la démo

Maintenant que nous avons quelques données, nous pouvons câbler notre démo. Clonez la démo à partir de https://github.com/Vonage-Community/sample-mongodb-vonage-integration-restaurant-demo. Il y a deux dossiers, le dossier "webapp" avec le code source et le dossier "app-service" avec la configuration de MongoDB que nous utiliserons plus tard. Pour l'instant, allez dans le dossier "webapp" et ouvrez-le dans votre éditeur préféré.

Nous devons ajouter quelques détails de configuration pour que l'application sache comment parler à votre cluster MongoDB. Faites une copie du fichier .env.dist dans le référentiel, et nommez-le .env. Ce fichier contiendra toutes les informations propres à votre installation.

Ouvrez .env et apportez les modifications suivantes :

1. Remplacez "ENABLE_VERIFY" par "1" pour que nous puissions voir l'API Verify de Vonage en action.

2. Définissez "VONAGE_API_KEY" à la clé API de Vonage disponible sur votre tableau de bord client de Vonage.

3. Réglez "VONAGE_API_SECRET" au secret API de Vonage disponible sur votre tableau de bord client Vonage.

4. Remplacez la "JWT_SIGNING_KEY" par une valeur aléatoire. La chaîne n'a pas vraiment d'importance, mais nous l'utiliserons plus tard pour valider les appels à l'API.

Nous devons également définir la valeur de "MONGODB_DSN" en fonction de la chaîne de connexion de votre cluster. Pour trouver cette valeur, allez sur votre tableau de bord MongoDB Atlas, et cliquez sur le bouton Connecter pour votre cluster. Dans la fenêtre contextuelle, cliquez sur Connecter votre application. Vous accédez alors à un écran contenant votre chaîne de connexion. Copiez cette valeur et collez-la dans la valeur de "MONGODB_DSN" dans .env. Veillez à remplacer la partie <password> par le mot de passe de votre cluster.

Connecting to the application

Nous devrions pouvoir lancer la démo maintenant !

Exécution de la démo

La démo elle-même est construite à l'aide de Vite, Vue.js et Typescript. Pour exécuter la démo, nous devons exécuter à la fois l'application client frontale et une application serveur back-end. Ouvrez deux terminaux en ligne de commande.

Dans le premier terminal, dans le dossier webapp/ lancez npm ci pour installer toutes les dépendances, puis lancez npm run dev. Si tout se passe correctement, vous devriez obtenir un écran disant "Vite <version>", puis un lien vers Localpointant probablement vers http://localhost:5173. Votre lien peut être légèrement différent si vous avez d'autres choses qui écoutent sur le port 5173.

Dans le deuxième terminal, naviguez vers webapp/server. Comme dans l'autre fenêtre, exécutez npm ci pour installer toutes les dépendances, puis lancez npm run dev. Cet écran devrait afficher nodemon démarrer et finalement dire "Serveur démarré". Si vous voyez une erreur concernant l'impossibilité de se connecter, vérifiez la chaîne de connexion de votre cluster MongoDB.

Starting the demo

Ouvrez votre navigateur, et naviguez vers http://localhost:5173/website/login (remplacez le numéro de port par celui que Vite vous indique). Vous devriez être accueilli par l'écran de connexion suivant !

Login Page

Test de Verify

Nous n'avons actuellement aucun utilisateur, alors créons-en un. Cliquez sur le bouton Ou inscrivez-vous à flavor sur la page. Saisissez un nom d'utilisateur, un mot de passe et un numéro de téléphone portable. Votre numéro doit inclure le préfixe de l'indicatif du pays et ne pas comporter de tirets. Nous enverrons un code d'authentification à deux facteurs à ce numéro de téléphone mobile dans le cadre de la connexion de l'utilisateur. Veillez donc à utiliser un numéro de téléphone mobile réel, et non un numéro Google Voice. Si vous êtes aux États-Unis, un exemple ressemblera à "15556661234".

Une fois que vous avez saisi vos informations d'utilisateur, cliquez sur S'inscrire.

Vous devriez maintenant pouvoir vous connecter. Saisissez le nom d'utilisateur et le mot de passe avec lesquels vous venez de vous enregistrer. Si l'authentification a réussi, un petit formulaire s'affiche vous demandant de saisir votre code 2FA.

2FA Form

Après quelques secondes, vous devriez recevoir un SMS contenant un code à quatre chiffres. Saisissez ce code dans le formulaire et cliquez sur Soumettre. Si tout fonctionne, vous verrez apparaître un écran de commande avec notre hamburger et notre soda !

Comment cela fonctionne-t-il ?

Lorsque l'utilisateur se connecte, notre application Vue.js côté client envoie le nom d'utilisateur et le mot de passe à notre serveur dorsal, à savoir /api/website/authenticate. Cette route se connecte directement à notre cluster MongoDB et trouve l'utilisateur à partir d'une collection de users collection. Lorsque nous avons enregistré un nouvel utilisateur, MongoDB a automatiquement créé la collection pour nous et a stocké un document pour l'utilisateur. Nous récupérons ce document et comparons ensuite le mot de passe à la copie hachée stockée dans le document.

Le client MongoDB Node.js est un client fluide, ce qui signifie que nous pouvons enchaîner les appels de méthode pour générer une requête. La ligne :

const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ username });

indique au client MongoDB d'utiliser notre base de données "restaurant_pos_demo", de chercher dans la collection "users" et de trouver un document avec le "username" qui a été fourni dans la requête. Puisque nous avons stocké le mot de passe sous forme de hachage bcrypt, nous pouvons utiliser bcrypt.compare() pour vérifier le mot de passe fourni par l'utilisateur avec celui que nous avons stocké dans le document de l'utilisateur. S'ils correspondent, l'utilisateur a saisi le bon mot de passe !

// webapp/server/server.ts

app.all('/api/website/authenticate', async (req, res) => {
    const { username, password } = req.body
    const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ username });

    if (userRecord) {
        await bcrypt.compare(password, userRecord.password)
            .then(async (match) => {
                if (match) {
                    const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '15m'})
                    let verifyId = {request_id: 'abcd'};
                    if (process.env.ENABLE_VERIFY === "1") {
                        verifyId = await vonage.verify.start({number: userRecord.phone, brand: 'Vonage Restaurant'})
                        console.log(verifyId);
                    } else {
                        console.log('Verify Disabled');
                    }
                    
                    res.status(200).json({ token, verifyId: verifyId.request_id })
                } else {
                    res.status(401).send()
                }
            })
        return
    }

    res.status(401)
    res.send()
    return
})

Nous générons ensuite un JWT temporaire à renvoyer à l'application Vue.js. Notre application Vue.js utilisera ce JWT temporaire lorsque l'utilisateur saisira le code sur l'application côté client. Si Verify est activé dans la démo avec "ENABLE_VERIFY", nous utilisons l'application Vue.js de SDK Node.js de Vonage de Vonage pour appeler l'API Verify. Nous transmettons le numéro de téléphone de l'utilisateur et définissons la marque sur " Vonage Restaurant " Lorsque l'utilisateur recevra un message SMS ou un appel vocal, il sera identifié comme " Vonage Restaurant " au moment où il le recevra.

L'API Vonage renvoie un " identifiant de demande " que nous renverrons également au front-end et que nous utiliserons pour vérifier le code de l'utilisateur. Nous renvoyons ensuite le jeton JWT temporaire et l'identifiant de la demande à l'application Vue.js.

Une fois que nous avons vérifié que l'utilisateur était bien celui qu'il prétendait être, nous avons modifié le formulaire Vue.js pour demander le code 2FA. Lorsque l'utilisateur saisit le code, l'application Vue.js envoie une requête à /api/website/authenticate/verify avec le jeton, l'ID de la demande de Verify et le code saisi par l'utilisateur.

Le JWT contient l'ID du document de l'utilisateur, nous décodons donc le jeton et recherchons l'utilisateur dans MongoDB. Si nous le trouvons, nous appelons l'API Verify, mais cette fois nous utilisons la méthode check() et envoyons l'identifiant et le code de la demande. L'API renvoie un succès si le code correspond. S'il correspond, nous générons un vrai JWT avec une expiration plus longue et le renvoyons à l'application Vue.js.

// webapp/server/server.ts

app.all('/api/website/authenticate/verify', async (req, res) => {
    const { token, verifyId, tfaPin } = req.body
    const decodedToken = jwt.decode(token)
    const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ _id: new ObjectId(decodedToken.user_id) });

    if (userRecord) {
        if (process.env.ENABLE_VERIFY === "1") {
            await vonage.verify.check(verifyId, tfaPin)
                .then(resp => {
                    console.log(resp)
                    const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '2h'})
                    res.status(200).json({ token })
                })
                .catch(err => {
                    console.error("there was an error", err);
                })
            return
        } else {
            const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '2h'})
            res.status(200).json({ token })
        }
    }

    res.status(500)
    res.send()
    return
})

L'application Vue.js sait que nous sommes entièrement authentifiés une fois qu'elle reçoit en retour le JWT approprié. Elle stocke ce jeton dans un magasin global appelé " authenticationStore ", et le reste de l'application utilisera ce JWT pour authentifier l'utilisateur pour tout autre appel d'API.

// src/views/Website/Login.vue

const verify = async() => {
    fetch(import.meta.env.VITE_API_URL + '/api/website/authenticate/verify', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            token: tempJWT.value,
            verifyId,
            tfaPin: tfaPin.value
        })
    })
        .then(resp => resp.json())
        .then(async (json) => {
            console.log(json)
            authStore.setToken(json.token)
            router.push({ name: 'website.order' });
            
            return
        })
        .catch(err => console.log(err)); 
}

Conclusion

Si vous avez déjà une étape d'authentification dans votre application, l'ajout de Vonage Verify ne représente que quelques lignes de code supplémentaires. Pour notre application Verify.js, cela signifiait un appel supplémentaire à notre backend et un nouveau formulaire, et côté serveur, nous avions juste besoin de faire l'appel API pour envoyer le code et ensuite une nouvelle route pour vérifier le code. Puisque Vonage se charge de tout le gros du travail de génération, d'envoi et de vérification du code, l'impact sur notre base de code est minime. La flexibilité du stockage basé sur les documents de MongoDB signifie que nous n'avons pas eu besoin d'exécuter des migrations de base de données et que nous avons pu rapidement écrire le code pour insérer un nouvel utilisateur et effectuer les recherches.

Maintenant que nos utilisateurs peuvent se connecter, ils devraient commander de la nourriture !

Dans la section suivante, nous verrons comment utiliser MongoDB pour stocker la commande et l'API SMS de Vonage pour envoyer une confirmation de commande. Nous allons également jeter un coup d'œil à l'utilisation de l'API Meetings de Vonage pour ajouter rapidement la vidéoconférence à notre application pour les résolutions de service à la clientèle.

• Partie 1 - Qu'est-ce que MongoDB Atlas ?

• Partie 2 - Utilisation de Vonage Verify avec les ouvertures de session

• Partie 3 - Utilisation de Vonage pour les interactions avec les clients

• Partie 4 - Utilisation d'Atlas pour l'authentification des utilisateurs

• Partie 5 - Utiliser In-App Messaging de Vonage pour les notifications