Hey guys, I know it been a long time but today i am having an interesting topic to share with you guys.
i know that lot of you already know but some of you guys are curious that how the websites of app like Paytm, Amazon etc. verify their user’s phone numbers by sending an OTP (One Time Password) on the users phone which is obviously entered by user itself. So this system can be achieved by various methods like – you can integrate the sms api like Twillio, clockwork etc.
But most of them are paid and also some of them are free but their response time is slower than a speed of a snail.
So lets get started,
I think all of you know about Facebook as it is the biggest social networking platform and we all uses it. Some of you might know that facebook provides various Api’s which user can use for their own benifit like Oauth system by which your can easy the login and registration flow for users. I am having a proper tutorial on oauth which you can checkout here –
And many more but in all of them, there is one API called AccountKit API which allows user to integrate the sms and email login system but it can also be used as email and smsm verification but lets just put email aside as this is the sms based tutorial.
So facebook does all thing for us, from sending the sms and verifying it for us
Then What we have to do?
We just have to integrate that system in our system. its that easy. so first lets talk about the workflow of this system.
Workflow of Account Kit.
- We redirect our simple form with just input fields containing the facebook mandatory fields to facebook account kit website.
- then you have to enter your country code and phone no.
- and then you will receive a message with OTP in it from facebook, and you have to enter it on account kit website and then it verify the OTP. If it is correct it will redirect us back to website with a url containing some values.
- So we then from the url we get the authorization code and then we put that code in another url and get the access token and then verify the access token and then we get the actual result. and all these steps are done in the backend.
- for more information just see the demo above.
So lets get to the main point.
How to set up the project?
- Go to facebook developer page or click Here. and login.
- then just create an app by clicking myApp dropdown on the header’s right and then click on create app id.
- now there are many option, so just select account kit option and click on setup.
- then select for which platform you gonna use it, in my case it is web so just click on web and click on account kit link on the left sidebar
- Do not turn on the Require Server Validation? on and just skip that and click on get started.
- now there are many things just copy the facebook app id on the top and Account Kit App Secret and save it somewhere.
- scroll down and mention the redirect url.
- That’s it for the facebook part now lets get our hands dirty on codes.
change the app id by your facebook app id and redirect url to your redirect url same as you put into the account kit developer panel.
Replace the facebook app id and account kit app secret on line 3.
Here is the video demo –
And just upload the script on the server and enjoy.
You can change the script as per your need.
Thanks for reading.