SMS Verification Service On Your Website in 10 minutes For Free

I'll give a quick overview of phone verification/SMS verification service, the choices we have, before diving into the code. Feel free to skip straight to the code section, and read the rest later.

Why Phone Verification?

Phone verification in its simplest form is useful for 2 purposes:

• It reduces fake signups by mandating a phone number as part of user identity instead of just email, which can be easily replicated
• It ensures that the user who signs up can be communicated with in a timely manner through phone, be it by voice or SMS

These two features are critical in order to build businesses that are founded on a trustworthy user base, and timely communication, in particular e-commerce, online reservation, fintech (micro-financing, cryptocurrency), and sharing economy. To read more about the need for phone verification go here.

Phone Verification in a Nutshell

Phone verification, also known as voice/SMS verification, works by sending a one-time password (OTP) to a phone so that only the user with access to the phone has privy to the OTP and will be able to recite it back to the system that triggered the phone verification process. The end result is you know that the user is in possession of the phone.

Choosing a Voice/SMS Verification Service

Phone verification is done by sending the OTP over voice or SMS. Both has to be transmitted through phone infrastructure, thus they incur charges, but there are companies that waive these charges unless you need very specific features. Among them are Ringcaptcha, and Firebase. If you don't mind paying right off the bat, you can also check out Twilio, MessageBird, Cequens, Infobip, and Nexmo.

Between Ringcaptcha and Firebase, if you need high reliability, and do not want to be tied to a particular development framework, RingCaptcha is your choice. They have high redundancy of voice/SMS routes as they are an SMS marketplace, i.e., they are integrated with all the aforementioned providers, such as Twilio, MessageBird, Cequens, etc., and all the reliablity & security best practices for sending voice and SMS OTP are baked into their API endpoint so that you can keep your own code very simple. They also have a live chat to get support from engineers who work with voice/SMS OTP day in, day out.

Firebase is great if you want to use Firebase as your development framework, as it is well-integrated, but it is not available as an API thus if you are on another framework you are out of luck. You are also not likely to get much support as SMS OTP is not a core offering on Firebase.

Assuming you are sending a lot of OTPs, thus there are no free plans available, and you need high reliability, which you should as a dropped OTP creates distress for potential and existing customers, which result in loss of dollars, Ringcaptcha is also recommended. Ringcaptcha sends voice/SMS OTP through all its integrated providers thus constantly measures the reliablity of those providers routes for each country/carrier, and can send your OTP through the best routes. You are never locked-in to a single provider reliabiliry nor pricing.

If you would like a detailed lowdown of each provider,you can check out this comparison page.

In this tutorial, we will implement phone verification using Ringcaptcha's voice & SMS verification services since it is free for small business use, extremely simple, highly reliable, and has no lock-in to any single provider.

Outline

Here are the steps that you need to perform to get SMS verification on your website:

1. Signup for Ringcaptcha
2. Create Ringcaptcha app
3. Get Ringcaptcha app and API keys
4. Test Ringcaptcha app and API keys
5. Copy-and-paste code onto your website

Signup for Ringcaptcha

Head over to https://my.ringcaptcha.com/register to create a user account. No credit card is required.

Create Ringcaptcha App

Once logged in, click on the 'My Apps' on the left menu, and the click on 'Create New' button on the top right in the 'My Apps' page.

On the app configuration window:

• Under 'App Type' select 'Web'
• Under 'Domain' enter the domain where you will paste the Ringcaptcha Javascript widget code later
• Still under 'Domain', enter 'fiddle.jshell.net', which is the live coding site where you will test your API and App key. Delete this after testing.
• Hit 'Create App' at the bottom right of the window.

Get Ringcaptcha app and API keys

You will see your newly created app.

Get the API key on the top of the list of apps. The API key is the same for all apps.

Get the App Key, which is on the right of each app. You can create a different Ringcaptcha app to represent each website that needs SMS verification.

Test Ringcaptcha app and API keys

Head over the live code site where you can tweak, and test without any coding: (https://jsfiddle.net/ringcaptcha/e7uf8vdw/2/)

This consists of 4 sections:

• Top left: HTML
• Top right: CSS
• Bottom left: Javascript
• Bottom right: Outcome

On the 'Outcome', you should see the Ringcaptcha widget
You can modify any of the HTML, CSS, Javascript sections, and click 'Run' on the top left to make your modifications take effect.

Before you do anything, test your phone number on the widget to verify that it works.

Try changing look-and-feel by modifying the CSS section. Change background-color of the button to 'blue' and hit 'Run'

Similarly try changing the HTML data-locale to 'de' and hit 'Run' to see the widget language changed to German.

Finally, under the Javascript section, you can modify it to perform different things based on the widget life-cycle 'events' such as 'ready', 'verified', etc. For a complete list of widget life-cycle 'events', see this.

Now, replace the 'appKey' the Javascript section, with your own App Key, and test the widget to confirm that it is working.

Copy-and-paste code onto your website

All that is left to do is to copy the code snippets in the HTML, CSS, and Javascript on to your webpage and you will have implemented phone verification.

If this doesn't work for you, please leave a comment, or you can also head over to Ringcaptcha and ask them in the live chat at the bottom right.