Kevin Lewis

London Developer Advocate

Former Developer Advocate for Vonage, where his role was to support the local tech community in London. He’s an experienced events organiser, boardgamer and dad to a cute little dog called Moo. He’...

[Read more]
< Tutorial />

Manage a Pool of Phone Numbers With Node.js

Last updated on May 05, 2021

You may not always be near your office phone, and when this is the case, customers may struggle to get in touch with you. In this tutorial, we'll be building an application that uses the Number Management API for Vonage APIs to manage multiple masked phone numbers. Each number will redirect calls to another number, such as a private mobile that can be used from home.

We'll also make sure that users of our application can only see numbers bought and managed by it, rather than every number in your Vonage API account. Finally, we'll do some work to make sure that only users you know are given access and that it isn't accessible from the public web without a password.

The final application screenshot, showing a pool of phone numbers and management options including update and delete
The final application screenshot, showing a pool of phone numbers and management options including update and delete

Can I Use This Project Now?

The completed code for this project is in Glitch. You can visit the project, click the Remix to Edit button in the top-right, and add your own credentials to the 🔑.env file. You can then use the project right away by clicking the Show button at the top of the page.

You can also find the completed code on GitHub.

Prerequisites

Note: Nexmo recently rebranded to Vonage after being acquired in 2016. You'll notice that we make calls to a Nexmo URL in this tutorial so don't be alarmed by this.

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.

Screenshot of new Meetings API session in progress
Start developing in minutes with free credits on us. No credit card required!

## Creating a Base Project There is a boilerplate [Glitch](https://glitch.com/) project to get you up and running quickly. This application has: * Installed and included our dependencies, which you could do in a new Express project by opening the Glitch terminal and typing `pnpm install express body-parser cors nedb-promises axios qs express-basic-auth`. * Created a new [nedb](https://github.com/louischatriot/nedb) database in the `.data` folder in Glitch. This folder is specific to your version of the application and can't be viewed by others or copied. * Initialized a basic Express application, and served the `views/index.html` file when people navigate to our project URL * Included Vue.js and Axios libraries in the `index.html` file, created a new Vue.js application, and added some basic styling in the `public/style.css` file. Log in to your Glitch account, and then [click on this link to remix](https://glitch.com/edit/#!/remix/vonage-number-manager-starter) (copy) our boilerplate into your account. Whether you start from scratch or use our boilerplate, you'll need to go to your Vonage API Dashboard, get your API key and secret and put them in your project's `🔑.env` file. These values are not publicly visible but can be accessed in your application using `process.env.PROPERTY`. ## Build an Endpoint to Buy Numbers This endpoint will require a `country` to be provided, as that is what the Number Management API requires. Above the final line of your application, include the following code: ```js 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); } }); ``` When you send a POST request to `/numbers`, the application will make a GET request to the Number Management API to find an available MSISDN (phone number) and returns the first one. Open your terminal and run the following command to test the new API endpoint: `curl -H "Content-Type: application/json" -X POST -d '{"country": "GB"}' https://YOUR_GLITCH_PROJECT_NAME.glitch.me/numbers`, being sure to substitute your Glitch project name. If successful, it should return an available phone number. Replace `res.send(msisdn)` with the following: ```js 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'); ``` This takes the first MSISDN from the results, purchases it from available account credit, and stores a new database record for the MSISDN. The `qs` package formats the data as an `x-www-form-encoded` string, which is what the Number Management API requires. **Checkpoint! Repeat the API call to your application from the terminal. You should get a success message, and a new number should be accessible in your Vonage API account.** *Note - there are multiple reasons why the Vonage API call might fail in your application that have nothing to do with your code. [Check if you can use the Number Management API](https://help.nexmo.com/hc/en-us/articles/204015043-Which-countries-does-Nexmo-have-numbers-in-) to get a number in your country. If it still doesn't work, you [may require an address](https://help.nexmo.com/hc/en-us/articles/115009205227-Why-do-some-virtual-numbers-require-an-address-) and means you must get the number via the Vonage API Dashboard* ## Build a Frontend to Buy Numbers Your POST request endpoint might be working fine, but it's time to create a more friendly frontend to use it. Open `views/index.html` and add the following to your HTML: ```html

Number Manager

Buy New Number

``` Update the contents of your `