Implementing Account Kit In Laravel

One of the fantastic tools announced by Facebook at the 2016 F8 Developer Conference is AccountKit. An ideal alternative to social login. The 21st Century is made of innovations having the word ‘less’ as the suffix to fantastic ways of doing things: from Cardless Withdrawal to Wireless Communication among others, and now to Passwordless Login. It’s simple, just log in to an application with your phone number or email without any password. And it works on Web, Android and iOS appIications. I will illustrate how to make use of Accountkit in a Laravel application.

The steps we need to follow are itemised as followed:

1. Create a Developer Account on Facebook.
2. Get Facebook App ID and configure the settings for your App.
3. Setup your Laravel application
4. Implement AccountKit.

Create a Developer Account on Facebook

To create a developer account on Facebook, navigate to https://developers.facebook.com/docs/apps/register and click on a button that looks like this:

Select ‘yes’ to accept Facebook’s Policies and click on the ‘register’. Yeah it’s that simple. So we move on to the next step.

Get Facebook App ID and configure the settings for your App

Follow the rest of the steps on https://developers.facebook.com/docs/apps/register to get an App ID. I will add more on the config for Account kit. Navigate to the dashboard of the App you have created. Click on the Add Product button to add Account Kit to your App.

Note: The App secret you see on the dashboard is not the same as that of the Account Kit.

Click on ‘Get Started’.

Select ‘Yes’ and click on ‘Get Started’

Copy the details marked for use in your Application and make the setting like above. Click on ‘Save Changes’

Add Server URL and other details as you desire.

You can also customise the interface of the phone dialog and the email to your taste. Then click on Save. With that we are done with the Accountkit setup. So let’s move to Laravel.

Setup your Laravel application

Here, I will make some assumptions and I hope that I am correct. I assume you are using Homestead vagrant box, as working with Laravel on Homestead is seamless. You can decide to set up Homestead or just install a Laravel Application and use php artisan serve command to start up the Local Development Server. I also assume that you are using Laravel 5.3 because that is the latest version as at now. But this is easily applicable in all Laravel 5 versions. With this, We have a Laravel application, up and running.

Implement AccountKit

• Open composer.json file and add Guzzle HTTP to make Http requests like so:

• Run composer update
• Add the APP_ID and APP_SECRET values from Facebook like so:

• Add a custom file to the config directory e.g accountkit.php like so:

• Create sample input fields like below in resources/views/ directory:

A sample login form

• Add AccountkSDit SDK in your html like so:

AccountKit JS SDK

• Create a custom JS file in the public/js directory and initialize account kit like this:

Initialise AccountKit and create login functions and a callback

• Remember to add your appId to the custom js file.
• Create a simple page to show the data returned:

• Config our routes in the routes/web.php file:

• Create a controller file by running php artisan make:controller MainController on the terminal in the root of your application:

With all we have done so far, we have created a working Laravel application that implements AccountKit. A demo of the steps taken is live on https://lagosworkshop.herokuapp.com/ and the code can be checked on https://github.com/andela-sakande/accountKit/. The slides I used in presenting this can be found on https://speakerdeck.com/sirolad/facebooks-account-kit-on-laravel

I hope I did not bore you. For corrections, clarifications or suggestions , you can reach me on surajudeen.akande@andela.com.