Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Hide User Phone Numbers With Voximplant

DZone's Guide to

How to Hide User Phone Numbers With Voximplant

Wheely's Vladimir Milkov shares how they implemented phone number masking to protect your users.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

At Wheely, we use a number of technology tricks behind the scenes to deliver positive taxi experiences to users. One of these is known as “phone number masking.” If you call a driver (or the driver calls you), your actual phone number will not be displayed. Instead, you will see our call center’s number. This trick prevents you from accidentally calling the driver later on, or vice versa.

Since this is a feature that many developers might also benefit from, I wanted to share how we did it.

First, some quick background. In telephony, a call contains two data streams. The first “signaling” stream has information about the call in plain text, such as your phone number, the target phone number, the preferred audio codec, and so on. When you call from your mobile phone, the telecom operator forms this text description, and it’s then passed between connection points and telecom operators until the target phone can be reached. After that, the second stream with actual voice or video data is transmitted between phones and you can hear (and see, if it’s a video call) the other person.

Our trick works because the phone call is not required to go directly from caller to callee. If you rent a phone number, you can decide how to handle incoming calls. You can direct both signaling and data streams into your server (that runs Asterisk software, for example), set up some interactive voice response, initiate outgoing calls, and then interconnect the calls. Outgoing calls can specify any phone number in its signaling stream because it’s just a text string. And nowadays you don’t even need to do all it yourself or learn how telephony works. There are lots of PaaS options, like Voximplant, Twilio, Agora.io, Apidaze, Telestax, that offer programmer-friendly interfaces for calls.

At Wheely, we use Voximplant because it’s pretty tailored towards web developers and allows direct call control via JavaScript. It’s like cloud node.js, but for telephony. Any web developer with basic JavaScript skills can start using it in half an hour, and no telephony-specific knowledge is required.

The Voximplant architecture is based on “scenarios.” That is, JavaScript code created by a client for a given situation and executed automatically upon receiving an incoming call or the application request. To create a scenario, you need to be registered at the Voximplant control panel. During the registration, you will need to define a unique username, which will be referred to as the account name in this tutorial. After registering or logging in, open the control panel, select Scenarios on the top menu, and click Create scenario:

Image title

This will open the New scenario editor window, where you can enter the scenario name and the source code. If needed, you can rename the scenario or change the source code later, or upload them automatically via the HTTP API. At this step, name your scenario ‘masking,’ and enter the following source code:

Image title

Later, we will have this code executed automatically when an incoming call is received. For now, though, let’s see what this code actually does. The Voximplant cloud platform is fully asynchronous. There are no waiting or blocking operations; you just subscribe to events, schedule actions, and your code is called when an event happens. The code starts with the addEventListener method of a global VoxEngine object. The method allows for subscribing to global events, and here we subscribe to CallAlerting so that the handler function will be called in the cloud right after an incoming voice or video call arrives.

After the call arrives, we will have full control over it via JavaScript. We can inspect the caller’s phone number, accept or reject the call, deliver an audio message to the caller, and so on. In this example, we are calling the startEarlyMedia method of the call object to inform the caller’s phone service provider that we want to send audio to the caller. Then we call the say method to synthesize voice from text.

To complete the setup process, we need a phone number to call. The Voximplant platform can use your existing phone numbers, or you can rent a number from them. In this example, we will rent a virtual phone number accessible as an extension. On the Voximplant control panel, select Phone Number on the top menu and then select Buy new phone number in the drop-down list.

Image title

The phone number interface will be displayed. Click the Real Number switch to change it to Test Number. Then click Buy to buy a virtual phone number.

Image title

After you’ve bought a real or virtual phone number, click the Phone Number top menu again and select My Phone Numbers in the drop-down list. There you can associate a phone number with the JavaScript scenario you created earlier so that if someone calls your phone number, your code will be executed and a voice greeting will be played.

To associate a phone number with a scenario, you need one more thing — an application. Voximplant applications allow you to group related scenarios in one place. To create an application, click Applications on the top menu and then click Create application.

Image title

This will open the New Application editor window, where you can enter the application name. At this step, name it ‘masking’ and confirm by clicking Create. The window will change into the application editor where you can associate your JavaScript scenario with the incoming call.

Image title

Click the Rules tab and select Add Rule. This will open the new rule editor window where you can enter the rule name and select JavaScript scenarios. For now, name the rule ‘incoming’ and click the ‘masking’ scenario so that it switches from ‘available’ to ‘assigned’. Click Add to confirm the rule creation.

Image title

Now you can connect your phone number with your JavaScript code! Go back to My Phone Number and select the application with the rule in the drop-down list next to your phone number. Select the corresponding check box to confirm the operation.

Image title

At this point, you have completed the setup process. Now you can call a virtual phone number using one of the access numbers displayed on the page, followed by an extension. When the connection is established, you will hear a synthesized voice that reads your text: the Voximplant cloud executes your JavaScript code and carries out your instructions.

Now we need to initiate an outgoing call. There are lots of ways that Voximplant can initiate calls; in this tutorial, we will use the VoxEngine.callPSTN method that allows us to call an arbitrary phone number:

Image title

Replace the two phone numbers in callPSTN with a phone number you want to call and phone number you want a callee to see. With an unverified account, you can only substitute phone numbers that you own: this is done for security reasons to prevent possible scam activity. In order to confirm phone number ownership, on the Voximplant control panel, select Settings on the top menu, select CallerIDs in the drop-down list and then select Add CallerID in the left menu. Enter your phone number and click Add to confirm.

After the phone number is added, click on “Send verification code.” Voximplant cloud will call the specified number and pronounce a verification code. Enter code into edit field and click the confirmation button to the right. After the phone number is confirmed, you can call a virtual phone number again. The specified phone will ring, and you will see that caller number displayed as a number you just confirmed.

The last thing I want to show here is how to send sound between incoming and outgoing calls. In telephony, an incoming call can remain in the unanswered state for some time (Voximplant limits this time to 40 seconds). This is called the “early media” state. While the call remains in this state, it is not billed, but audio can be sent in one direction — to the caller. Normally, this state is used to play a progress tone while the call is being forwarded to another person. (I’ll hope to cover the process of adding a progress tone in subsequent tutorials). In this step, we will answer the incoming call and make sure that both parties can hear each other. The call is answered via the answer method; audio is sent in both ways via the VoxEngine.sendMediaBetween method (there are also more fine-grained methods such as sendMedia):

Image title

Call the rented phone number and you will be able to hear the voice on the other end and answer back, with your original phone number completely hidden. This demonstrates only a small part of what modern cloud telephony can be used for. You can do lots of advanced phone magic and automation: confirm orders and delivery, allow users to call from web pages or mobile apps, record audio, automatically call out to thousands of clients, etc. Voice communications are a high-priority channel that is very important for businesses like our own, which are using all possible tools to offer a pleasing and effective user experience.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
app development ,telephony ,tutorial ,javascript ,user experience

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}