Facebook Account Kit & Single-SignOn (SSO)

Published On: 22 November 2016.By .
  • Digital Engineering

Passwordless login provides a hassle-free signup and login experience for the user. The user does not have to remember passwords, rather they are provided a one-time password or link delivered via SMS or email, which verifies the user. Companies like Medium, Slack, and Twitter have already adopted this system.

Single Sign On (SSO) enables user to log in to n number of services using a single account. A blend of Passwordless login and SSO can greatly amplify the security and adoptability of such system.

Introduction to Facebook Account Kit

Facebook has rolled out Facebook Account Kit to provide passwordless authentication. Users authenticating through it is not necessarily a registered Facebook user.

Currently users can log in simply by providing their email address or phone number. Facebook Account Kit send an one-time passcode or link to the respective mobile number or email address and verifies using them. It also offers certain customisations like colors of links, headings, buttons in the dialog box.

Integrating Facebook Account Kit for Passwordless Login

Today we will learn how to integrate Facebook Account Kit into our applications. Facebook has released SDKs for Android, iOS and Javascript. We will use Javascript SDK in our application where PHP will server as backend.

STEP 1: Get Started

To get started, you should to have a Facebook Developer Account and a Facebook App. You can use an existing app or create a new one and enable Account Kit for the App. To enable Account Kit, navigate to the Account Kit tab in the Facebook app and do as directed. To process the requests, the backend needs your App ID which can be located on the dashboard of your Facebook app and your Account Kit App Secret which is found in the Account Kit tab.

Having the credentials in order, let’s see the implementation at the backend.

Steps to follow:

  1. Create the UI which includes two buttons – Login By SMS, Login by Email
  2. Import the Account Kit Javascript SDK by adding this line in the <head> tag:
    <script src=”https://sdk.accountkit.com/en_US/sdk.js”></script>
  3. Initialize Account Kit and setup JS handlers for login callback.
screenshot-from-2016-11-17-17-46-13

screenshot-from-2016-11-18-10-21-07

screenshot-from-2016-11-18-10-20-29

screenshot-from-2016-11-18-10-20-41

screenshot-from-2016-11-22-18-15-11

screenshot-from-2016-11-22-18-17-34

Note: You can also create for to read country code, mobile number or email and pass it to Account Kit.

As you can see, after getting response from Account Kit loginCallback function gathers the data, assign it to the form and submits the form. The data from the form is collected in the file response.php, where Graph API is used to fetch the logged in user details and add it to our database, if required.

Note: When you choose email option, make sure that you do not close the dialog box, Account Kit will automatically close it once the link is clicked. An important point to be mentioned here is that even if one clicks the link on different device it will still work.

Account Kit Login

Login to Account Kit to view the list of websites logged in using that account.

Thanks for reading.

Related content

That’s all for this blog

Go to Top