DEV Community

Khor
Khor

Posted on

Free Phone SMS Verification on Your Website in 10 minutes

Phone SMS Verification Overview

Phone SMS verification is useful for 2 purposes:

  • It reduces fake signups by verifying a user phone number, instead of just email, which can be easily replicated, during signup
  • It ensures that the user who signs up can be communicated with in a timely manner by voice or SMS

These two features are critical for building 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.

How does Phone SMS Verification Work?

We send a one-time password (OTP) to a phone so that only the user with access to the phone can recall the OTP and input it on the website to prove that she owns the phone.

How to send SMS OTP for free?

SMS has to be transmitted through phone infrastructure, thus they incur charges, but some companies, Ringcaptcha, and Firebase, offers it for free with some minor restrictions. If you don't mind paying right off the bat, you can also check out Twilio, MessageBird, Cequens, Infobip, and Nexmo.

Among the free options, Firebase only works if you its SDK that is tightly integrated with the Firebase programming framework, while Ringcaptcha offers an API so it works with any programming language and framework that you are using.

Ringcaptcha is also unique because it is an SMS marketplace so they can send SMS through all other providers like Twilio, MessageBird, etc., making it more highly available and reliable, as it has a lot of routes to fallback on when sending SMS.

Ringcaptcha, it will be.

Outline of SMS Verification Implementation

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 phone SMS verification 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.

Top comments (5)

Collapse
 
kingsleyuzogor profile image
KingsleyUzogor

Please how long does it take?
i've tried it out. Then checked with my phone, i got the code but It has been showing " Texting with your pin code to **** ". Can you guide me on this?

Collapse
 
jijiiiano profile image
ra • Edited

Nice tutorial, you can use a service like smspool.net/ to get temporary sms verifications

Collapse
 
patabah profile image
PatAbah

Wow! Very helpful!

Collapse
 
patabah profile image
PatAbah

I replaced the alert() with another js function... An $.ajax call. Nothing seems to work. Widget only displays "Thanks! Your phone has been verified".

Any help?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.