Gérer un pool de Numbers avec Node.js

Il se peut que vous ne soyez pas toujours à proximité de votre téléphone professionnel et, dans ce cas, les clients peuvent avoir du mal à vous contacter. Dans ce tutoriel, nous allons créer une application qui utilise l'API API de gestion des numéros de Vonage pour gérer plusieurs numéros de téléphone masqués. Chaque numéro redirigera les appels vers un autre numéro, par exemple un portable privé utilisable depuis la maison.

Nous veillerons également à ce que les utilisateurs de notre application ne puissent voir que les numéros achetés et gérés par celle-ci, plutôt que tous les numéros de votre compte API Vonage. Enfin, nous ferons en sorte que seuls les utilisateurs que vous connaissez aient accès à l'application et qu'elle ne soit pas accessible depuis le web public sans mot de passe.

Puis-je utiliser ce projet maintenant ?

Le code complet de ce projet se trouve dans Glitch. Vous pouvez visiter le projetet cliquer sur le lien Remixer pour éditer en haut à droite, et ajouter vos propres informations d'identification au fichier 🔑.env au fichier Vous pouvez ensuite utiliser le projet immédiatement en cliquant sur le bouton Afficher en haut de la page.

Vous pouvez également trouver le code complet sur GitHub.

Conditions préalables

• A Glitch Account

Remarque : Nexmo a récemment changé de nom pour devenir Vonage après avoir été racheté en 2016. Vous remarquerez que nous faisons des appels vers une URL Nexmo dans ce tutoriel, donc ne vous inquiétez pas.

Vonage API Account

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.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Création d'un projet de base

Il y a un modèle Glitch pour vous permettre d'être rapidement opérationnel. Cette application a :

• Installer et inclure nos dépendances, ce que vous pouvez faire dans un nouveau projet Express en ouvrant le terminal Glitch et en tapant pnpm install express body-parser cors nedb-promises axios qs express-basic-auth.

• Création d'une nouvelle nedb dans le dossier .data dans le dossier Glitch. Ce dossier est spécifique à votre version de l'application et ne peut pas être visualisé par d'autres personnes ou copié.

• a initialisé une application Express de base, et a servi le fichier views/index.html lorsque les utilisateurs naviguent vers l'URL de notre projet

• J'ai inclus les bibliothèques Vue.js et Axios dans le fichier index.html a créé une nouvelle application Vue.js et a ajouté quelques éléments de style de base dans le fichier public/style.css dans le fichier

Connectez-vous à votre compte Glitch, puis cliquez sur ce lien pour remixer (copier) notre modèle dans votre Account.

Que vous partiez de zéro ou que vous utilisiez notre modèle, vous devrez vous rendre sur votre tableau de bord API de Vonage, obtenir votre clé et votre secret API et les placer dans le fichier 🔑.env de votre projet. Ces valeurs ne sont pas visibles publiquement, mais vous pouvez y accéder dans votre application en utilisant la commande process.env.PROPERTY.

Créer un point final pour acheter des Numbers

Ce point d'accès nécessitera la fourniture d'un country car c'est ce que demande l'API de gestion des numéros.

Au-dessus de la dernière ligne de votre application, incluez le code suivant :

app.post('/numbers', async (req, res) => {
    try {
        const { NEXMO_API_KEY, NEXMO_API_SECRET } = process.env;
        const availableNumbers = await axios.get(`https://rest.nexmo.com/number/search?api_key=${NEXMO_API_KEY}&api_secret=${NEXMO_API_SECRET}&country=${req.body.country}&features=SMS,VOICE`);
        const msisdn = availableNumbers.data.numbers[0].msisdn;
        res.send(msisdn);
    } catch (err) {
        res.send(err);
    }
});

Lorsque vous envoyez une requête POST à /numbersl'application envoie une requête GET à l'API de gestion des numéros pour trouver un MSISDN (numéro de téléphone) disponible et renvoie le premier.

Ouvrez votre terminal et exécutez la commande suivante pour tester le nouveau point de terminaison de l'API : curl -H "Content-Type: application/json" -X POST -d '{"country": "GB"}' https://YOUR_GLITCH_PROJECT_NAME.glitch.me/numbersen veillant à remplacer le nom de votre projet Glitch. En cas de succès, la commande devrait renvoyer un numéro de téléphone disponible.

Remplacer res.send(msisdn) par le texte suivant :

await axios({
    method: 'POST',
    url: `https://rest.nexmo.com/number/buy?api_key=${NEXMO_API_KEY}&api_secret=${NEXMO_API_SECRET}`,
    data: qs.stringify({ country: req.body.country, msisdn }),
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
});
await db.insert({ msisdn });
res.send('Number successfully bought');

Cette opération prend le premier MSISDN des résultats, l'achète sur le crédit de compte disponible et enregistre un nouvel enregistrement dans la base de données pour le MSISDN. Le paquet qs formate les données sous la forme d'une x-www-form-encoded ce qui correspond aux exigences de l'API de gestion des numéros.

Point de contrôle ! Répétez l'appel API à votre application à partir du terminal. Vous devriez obtenir un message de réussite et un nouveau numéro devrait être accessible dans votre compte API Vonage.

Remarque - il existe de multiples raisons pour lesquelles l'appel à l'API de Vonage peut échouer dans votre application et qui n'ont rien à voir avec votre code. Vérifiez si vous pouvez utiliser l'API de gestion des numéros de gestion des numéros pour obtenir un numéro dans votre pays. Si cela ne fonctionne toujours pas, il se peut que vous ayez besoin d'une adresse peut avoir besoin d'une adresse ce qui signifie que vous devez obtenir le numéro via le tableau de bord de l'API Vonage

Construire un frontend pour acheter des Numbers

Votre point d'arrivée de requête POST fonctionne peut-être très bien, mais il est temps de créer un frontend plus convivial pour l'utiliser. Ouvrez views/index.html et ajoutez ce qui suit à votre HTML :

<div id="app">
    <h1>Number Manager</h1>
    <section>
        <h2>Buy New Number</h2>
        <input type="text" v-model="country" placeholder="Country Code" />
        <button @click="buyNumber">Buy new number</button>
    </section>
</div>

Mettez à jour le contenu de votre <script> en le remplaçant par ce qui suit :

const app = new Vue({
    el: '#app',
    data: {
        country: ''
    },
    methods: {
        async buyNumber() {
            try {
                if(this.country && confirm('Are you sure you would like to buy a number?')) {
                    await axios.post('/numbers', {
                        country: this.form.country
                    })
                    alert('Successfully bought new number');
                }
            } catch(err) {
                alert('Error buying new number', err);
            }
        }
    }
})

Ouvrez l'application en cliquant sur Afficher en haut de votre fenêtre Glitch. Tapez "GB" dans la case et cliquez sur "Acheter un nouveau numéro". confirm() invite l'utilisateur par le biais d'une fenêtre contextuelle et constitue une bonne pratique pour éviter les achats accidentels. Bien que cette application utilise Vue.js, vous pouvez construire n'importe quelle application capable d'effectuer des requêtes HTTP.

Construire un point de terminaison pour lister les Numbers

Créez un nouveau point de terminaison dans votre application Express avant la dernière ligne de code :

app.get("/numbers", async (req, res) => {
    try {
        res.send('ok');
    } catch (err) {
        res.send(err);
    }
});

En haut du bloc try récupérez toutes les entrées de la base de données locale et tous les numéros de l'API de gestion des numéros de Vonage pour les API de Vonage.

const { NEXMO_API_KEY, NEXMO_API_SECRET } = process.env;
const dbNumbers = await db.find();
const vonageNumbers = await axios.get(`https://rest.nexmo.com/account/numbers?api_key=${NEXMO_API_KEY}&api_secret=${NEXMO_API_SECRET}`);

Ensuite, créez un nouveau tableau qui filtre vonageNumbers pour ne retenir que ceux qui apparaissent également dans la base de données locale. Vous êtes ainsi assuré de ne renvoyer que les numéros de ce compte API Vonage qui sont gérés par cette application.

const numbersInBothResponses = vonageNumbers.data.numbers.filter(vonageNumber => {
    return dbNumbers.map(dbNumber => dbNumber.msisdn).includes(vonageNumber.msisdn)
});

Ensuite, créez un objet qui regroupe les deux sources de données pour chaque nombre :

const combinedResponses = numbersInBothResponses.map(vonageNumber => {
    return {
        ...vonageNumber,
        ...dbNumbers.find(dbNumber => dbNumber.msisdn == vonageNumber.msisdn)
    }
})

combinedResponses contient maintenant des données qu'il est bon d'envoyer à l'utilisateur. res.send('ok'); par res.send(combinedResponses);.

Construire un frontend pour lister les Numbers

Dans votre fichier index.html créez une nouvelle méthode pour obtenir les Numbers de notre point de terminaison Express :

async getNumbers() {
    const { data } = await axios.get('/numbers')
    this.numbers = data;
}

Mettre à jour l'objet data de la manière suivante :

data: {
    numbers: [],
    country: ''
}

Chargez ces données en ajoutant une fonction created() juste en dessous de votre objet data objet :

created() {
    this.getNumbers();
}

Ajoutez ce qui suit à votre code HTML pour afficher les nombres :

<section>
    <h2>Current Numbers</h2>
    <div class="number" v-for="number in numbers" :key="number.msisdn">
        <h3>{{number.msisdn}}</h3>
        <label for="name">Friendly Name</label>
        <input type="text" v-model="number.name" placeholder="New name">
        <label for="forward">Forwarding Number</label>
        <input type="text" v-model="number.voiceCallbackValue" placeholder="Update forwarding number">
    </div>
</section>

Point de contrôle ! Cliquer Montrer en haut de votre éditeur Glitch et ouvrez votre application frontale. Lorsqu'elle est chargée, vous devriez voir les numéros de téléphone que vous avez gérés.

Enfin, pour cette section, mettez à jour la méthode buyNumber() pour inclure this.getNumbers(); après le succès alert(). Lorsque vous achèterez un nouveau numéro, la liste sera désormais mise à jour sans qu'il soit nécessaire de rafraîchir la page.

Création d'un point d'accès et d'un frontend pour la mise à jour des Numbers

Cette application prend en charge deux types de mises à jour de numéros de téléphone. Lorsque vous mettez à jour le nom convivial d'un numéro, vous modifiez les entrées dans la base de données locale, et lorsque vous mettez à jour le numéro de transfert, vous mettez à jour le numéro via l'API de gestion des numéros. Notre point d'accès doit prendre en charge les deux types de mise à jour et utilisera les données transmises pour décider laquelle mettre à jour. Dans server.js ajoutez ce qui suit :

app.patch("/numbers/:msisdn", async (req, res) => {
    try {
        const { NEXMO_API_KEY, NEXMO_API_SECRET } = process.env;
        if(req.body.name) {
            await db.update({ msisdn: req.params.msisdn }, { $set: { name: req.body.name } })
        }
        if(req.body.forward) {
            await axios({
                method: "POST",
                url: `https://rest.nexmo.com/number/update?api_key=${NEXMO_API_KEY}&api_secret=${NEXMO_API_SECRET}`,
                data: qs.stringify({ 
                    country: req.body.country, 
                    msisdn: req.params.msisdn,
                    voiceCallbackType: 'tel',
                    voiceCallbackValue: req.body.forward
                }),
                headers: { "content-type": "application/x-www-form-urlencoded" }
            })
        }
        res.send('Successfully updated')
    } catch(err) {
        res.send(err)
    }
})

Ce point d'arrivée PATCH comprend le numéro de téléphone que vous mettez à jour. Si le corps contient une propriété name la base de données locale sera mise à jour, et s'il contient une propriété forwardles paramètres du numéro seront mis à jour via l'API de gestion des numéros.

Dans index.htmlcréez la méthode suivante :

async updateNumber(number) {
    try {
        const { msisdn, country, name, voiceCallbackValue } = number
        const payload = { country }
        if(name) payload.name = name
        if(voiceCallbackValue) payload.forward = voiceCallbackValue
        await axios.patch(`/numbers/${msisdn}`, payload)
        alert('Successfully updated number');
        this.getNumbers(); 
    } catch(err) {
        alert('Error updating number', err);
    }
}

Vous devez également appeler cette méthode à partir du modèle - ce qui se produira lorsqu'un utilisateur appuiera sur la touche Entrée alors qu'il est concentré sur l'une des entrées de texte. Mettez à jour les entrées comme suit :

<label for="name">Friendly Name</label>
<input type="text" v-model="number.name" @keyup.enter="updateNumber(number)" placeholder="New name">
<label for="forward">Forwarding Number</label>
<input type="text" v-model="number.voiceCallbackValue" @keyup.enter="updateNumber(number)" placeholder="Update forwarding number">

Point de contrôle ! Mettez à jour le nom amical d'un numéro. Essayez ensuite de mettre à jour le numéro d'acheminement (rappelez-vous qu'il doit être dans un format valide)

Création d'un point d'accès et d'un frontend pour l'annulation des Numbers

Lorsqu'un numéro n'est plus nécessaire, vous pouvez choisir de l'annuler, ce qui le libère immédiatement de votre Account. Il s'agit de la dernière étape clé de la gestion de votre pool de numéros de téléphone virtuels. Dans server.js ajoutez ce qui suit au-dessus de la dernière ligne de code :

app.delete("/numbers/:msisdn", async (req, res) => {
    try {
        const { NEXMO_API_KEY, NEXMO_API_SECRET } = process.env;
        await axios({
            method: "POST",
            url: `https://rest.nexmo.com/number/cancel?api_key=${NEXMO_API_KEY}&api_secret=${NEXMO_API_SECRET}`,
            data: qs.stringify({ 
                country: req.body.country, 
                msisdn: req.params.msisdn
            }),
            headers: { "content-type": "application/x-www-form-urlencoded" }
        })
        res.send('Successfully cancelled')
    } catch(err) {
        res.send(err)
    }
})

En index.html ajouter une deleteNumber() méthode :

async deleteNumber(number) {
    try {
        if(confirm('Are you sure you would like to delete this number?')) {
            const { msisdn, country } = number
            await axios.delete(`/numbers/${msisdn}`, { data: { country } })
            alert('Successfully deleted number')
            this.getNumbers()
        }
    } catch(err) {
        alert('Error deleting number', err);
    }
}

Enfin, ajoutez un bouton dans le modèle, juste en dessous de l'entrée du numéro de transfert :

<button @click="deleteNumber(number)">Delete number</button>

Point de contrôle ! Supprimer un numéro.

Vous avez peut-être remarqué que vous ne supprimez pas le numéro de la base de données locale. Vous pouvez choisir d'implémenter cela, mais comme le point de terminaison GET numbers ne renvoie que les numéros qui existent à la fois dans votre compte API Vonage et dans la base de données locale, les numéros supprimés ne seront pas renvoyés.

Entretien ménager

Cette application est presque terminée, mais il reste encore quelques travaux d'entretien à effectuer.

N'autoriser que les appels d'API à partir de notre frontend

À l'heure actuelle, n'importe qui peut ouvrir son terminal et gérer vos numéros sans autorisation. Vers le haut de la page server.jsjuste en dessous des déclarations app.use() ajouter ce qui suit :

app.use(cors({ origin: `https://${process.env.PROJECT_NAME}.glitch.me` }));

process.env.PROJECT_NAME est une variable d'environnement fournie par Glitch et est égale au nom de ce projet. Ce paramètre n'autorise que les requêtes provenant de notre URL Glitch.

Ajout de l'authentification de base

Même si les gens ne peuvent pas accéder à votre API à partir de leurs propres Applications, ils peuvent toujours tomber sur votre site en direct. Heureusement, la mise en place de l'authentification HTTP de base ne comporte que deux étapes.

Tout d'abord, ajoutez une phrase d'authentification dans votre fichier 🔑.env dans votre fichier Ensuite, ajoutez la ligne suivante au bas des déclarations app.use() déclarations :

app.use(basicAuth({ users: { admin: process.env.ADMIN_PASSWORD }, challenge: true }));

Maintenant, lorsque vous chargez votre application, vous devez donner admin comme nom d'utilisateur et le mot de passe que vous avez fourni.

Quelle est la prochaine étape ?

Cette application simple répondra aux besoins de la plupart des équipes, mais il y a certainement quelques améliorations à apporter :

• Ne donner la possibilité d'acheter des Numbers qu'à certains utilisateurs

• Confirmation du coût de chaque numéro avant l'achat

• Ajouter des données à chaque numéro dans notre base de données locale

• Meilleure gestion des erreurs

N'oubliez pas que le code complet de ce projet se trouve également sur GitHub.

Vous pouvez en savoir plus sur l'API de gestion des numéros pour les API de Vonage en consultant notre documentationEt si vous avez besoin d'un soutien supplémentaire, n'hésitez pas à contacter notre équipe par l'intermédiaire de notre site Web Développeur Vonage sur Twitter ou sur le compte Communauté Vonage Slack.