Introduction

Hey guys! finding a solution for OTP verification? In this tutorial, I am covering user verification by phone number or Email by sending OTP to the mobile and verification link to Email ID.

Today there are a number of methods to achieve this which includes firebase authentication, Facebook’s Account Kit verification. Also, Google introduced its SMS retriever API (SMS gateway required).

In this tutorial, you can learn how to implement phone number & E-Mail verification | OTP Verification using Facebook account kit stepwise.

Facebook account kit

Recently, Facebook rolled out developer Account kit to make login and user verification easier for users. The user can verify himself by OTP or Email sent to user Email Address. Also, if the user is logged in to Facebook on the same device, it verifies automatically without sending the SMS. If not, the user will receive an SMS containing the OTP and will need to enter it to verify himself/herself.

The user interface for the login is provided in the SDK itself, all you need is to launch the sign in activity and it will return the result to you. Below is the flow diagram to understand how things work in account kit verification.

Setting up the project

Prerequisites

Android Studio installed on a device.

Basic knowledge of Java and Android.

A smartphone since OTP cannot be sent to an emulator.

Step 1: Set up a new Android project

Start Android Studio and Click on “new project”.

Give your application a name, mine is “Account kit login”.

click next and choose Target android device.

next, choose an empty activity to keep things simple.

next, name your Activity and click finish to build the project.

This is how it will look after finishing the above steps:

Step 2: Set up Facebook account kit

Go to developers.facebook.com and sign in with your credentials.

Select an app or create a new app

Create a new App ID, enter a display name and contact Email, click on create App ID then enter the captcha and click submit.

On the app dashboard, you will see your app. Next is to set up the Account kit.

Select Android as the platform for the app.

Choose your app settings

Click on your app, in the left navigation drawer click on Settings-> Basic

Click on add platform and choose Android, this screen will open

Go to Android studio and copy the package name of the app from main activity and paste in Class Name. Then, remove .myapplication and paste in Google Play Package Name. i.e; com.example.lwphp1 in my case.

You can get the Key Hashes either from console command or Android code function. I prefer the function in java code as the console command varies for different OS. Below function will generate the Key Hashes and show it in the log.

Step 4: Edit AndroidManifest.xml

This application needs internet for verification process so we have to, first of all, give permission to our app to use the Internet. Add the following line to your AndroidManifest.xml inside manifest tag.

<uses-permissionandroid:name=“android.permission.INTERNET”/>

Add the following to the application tag of AndroidManifest.xml to specify the meta-data of your app.

Step 5: Import Account kit SDK

Now, we have to import the account kit SDK to our project. Open the app level build.gradle(Module: app) file and add the implementation dependency with the latest version, Since the time of writing this blog, below is the latest version of account kit.

After adding this, click on sync now and let the gradle build complete. Android studio will automatically import the SDK into your project.

Design layout of the app

So until step 5, we have done the initial set up of the app. The next step is to design the appearance of your app. For this open the activity_main.xml and add two buttons. One for OTP verification and another one for Email verification.

Step 4: Handle Activity’s Result

override onActivityResult method where we check for the result code and proceed as per the requirement if login fails you can notify the user with Toast message and if login is successful then you can start a new activity.

Now we have the phone number and Email ID of the user which you can set in the text views.

tvPhoneNumber.setText(phoneNumberString);
tvEmail.setText(email);

Customizing the appearance of Account Kit user interface

The user interface of the login screens for Email and Phone as above are provided by the SDK of facebook. Facebook Account kit offers customization in the UI of these screens.
Basically, you can customize the login screen by three skins:

Classic

Translucent

Contemporary

For each skin, you can optionally add a background image, choose background tint opacity and adjudge the color of disclaimer text whether the text appears in black disclosure on a white background or vice versa. The next all screens in the login flow pursue the same skin and options that are declared once.

Adding skin to your app

You can customize the skin of login flow by creating an object of UIManager to hold settings and setting this UIManager object to the object of AccountKitConfigurationBuilder.

put an image file in the drawable folder of your app and provide the give its name instead of a flower.

Customizing the color of Email

Account kit also offers customization of the color of Emails that sent to the user for verification so that you can match the color scheme of the Emails with the color accent of your app.

To attain this you need to go to the Account kit section of your app dashboard and there you can select the Background color, Button color and Link color of the Email.

Summing-up

In this tutorial, you learned about the facebook account kit integration in your app to verify the user of your app via phone OTP and Email. The next tutorial will be for integrating Firebase OTP verification.

If you liked this post, I’d be very grateful if you’d help it spread, sharing it on Twitter, Facebook or LinkedIn. Please feel free to share your views in the comment box. Thank you!

POPULAR CATEGORIES

Loginworks blogs and Insights provide cutting-edge perspectives on Big Data and analytics. Our ability to focus on business problems enables us to provide insights that are highly relevant to each industry.