Free Phone SMS Verification on Your Website in 10 minutes

Khor — Thu, 11 Jul 2019 05:22:53 +0000

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:

Signup for Ringcaptcha
Create Ringcaptcha app
Get Ringcaptcha app and API keys
Test Ringcaptcha app and API keys
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.

Live Code Snippets To Instantly Test Any API Endpoints of Any OAuth/OAuth2 Providers

Khor — Fri, 19 Oct 2018 07:48:06 +0000

We have all been there where we pore over poorly documented OAuth API endpoints, some of which are already deprecated or even discontinued, before finding one that we believe can return some data that we want about a user, or can perform something on behalf of the user. Before we can test that endpoint, we spent more countless hours hacking together a social login button on our front-end code, which will communicate with the back-end, to complete the OAuth flow to acquire access token from the OAuth provider, e.g., Facebook, Twitter, Github, etc., and then finally, the moment of truth - calling the API endpoint with the access token.

And THEN - the endpoint does not do what we expected because its behavior has changed or the documentation is inaccurate.

No developer should EVER have to go through this! Thus we cobbled together a site with all the ready-made OAuth snippets to create a social login bootstrap button for every single popular provider, but that's not all, the site includes a snippet for calling every popular API endpoint of those providers.

Sounds unbelievable? Let's spin the wheel to pick a random action to perform on an OAuth provider.

Here we go.......... . . . . . .'Search for repository in Github'

You can head over here to test the Javascript snippet to 'search for repository in Github' instantly, and also tweak it to call other Github API endpoints.

If you want to jump the gun, and test other OAuth providers, head over here.

Here is a brief description of the working code.

Firstly, the code is short, i.e., < 15 lines, all front-end Javascript, with no backend. Secondly, it has few external requirements.

$('#github-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('txp2rKYpuKZXaaYC5kB-m13KnVE');

  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('github').then(provider => {

    // Got the OAuth provider object, which contains access token, etc.
    console.log('provider:', provider);

    provider.get('/search/repositories?q=oauth-io').then(data =>            {
      console.log('Repositories:', data);
    });
  });
})

Necessary requirements:

CSS for creating the social button
- bootstrap - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
- bootstrap-social - https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css
- font-awesome - https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
DOM manipulation
- jQUery - https://code.jquery.com/jquery-3.2.1.min.js
OAuth magic by OAuth.io
- OAuth.io Javascript library - https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

If you want to use the Javascript snippet on your own webpage, you can just copy-and-paste it but note that you need https://oauth.io to make it work. If you are interested in the entire setup, I can do a separate post.

DEV Community: Khor