
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.
Demo Downlaod Subscribe on Youtube
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.
INDEX.PHP
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.
CALLBACK.PHP
Replace the facebook app id and account kit app secret on line 3.
HOME.PHP
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.
Peace.
Hi,
Thank you for this tutorial!
My question is how we can get the verification code from server in PHP?
Thank you!
there is no function in php by which you can get the verification code, you HAVE to use some sort of api for sending the sms.
A system issue occurred. Please try again.
Error shows, A system issue occurred. Please try again.
I have to update that system, facebook has updated the API ,I will publish new and updated tutorial soon.
Now only I have install. So code is not working now right??
Right, you can see api docs of account kit, i will update tutorial soon.
when u upload the updated tutorial ??
Soon brother, just subscribe to my blog and get notified whenever i upload new tutorial.
hello sir,
my query i.e how to hidden mobile number in facebook account kit or skip fill mobile number step to redirect fill code option
You cannot, you can just use js version of account kit to just make popup based verification system.
You cannot skip that step in basic version.
i already used js version but i am unable to do.can u help me?
You cannot skip that step in any version!