Facebook Accountkit Login using Mobile SMS - Javascript

Facebook's latest AccountKit is a notable feature. It allows you to integrate it on your website, so that you don't need to worry about login using mobile feature, they will handle the Authentication for you.

To put in simple words, Login using Mobile. Enter SMS code. User Verified.

Demo

How to integrate AccountKit in your website

Step 1: Get the App ID, and Token from the Facebook Developer portal.

( We are Going to discuss the integration for Web only [Not Android nor iOS] )

AccountKit App Secret and APP ID Created. Here is how to see them.

Step 2: You can follow the simple introductions at this page or download the sample code I developed to start with.

Basically three things needed.

First

<!-- HTTPS required. HTTP will give a 403 forbidden response -->
<script src="https://sdk.accountkit.com/en_US/sdk.js"></script>

Second

Enter country code (e.g. +1):
<input type="text" id="country_code" />
Enter phone number without spaces (e.g. 444555666):
<input type="text" id="phone_num"/>
<button onclick="phone_btn_onclick();">Login via SMS</button>
Enter email address
<input type="text" id="email"/>
<button onclick="email_btn_onclick();">Login via Email</button>

Third

<script>
  // initialize Account Kit with CSRF protection
  AccountKit_OnInteractive = function(){
    AccountKit.init(
      {
        appId:{{FACEBOOK_APP_ID}}, 
        state:"{{csrf}}", 
        version:"{{ACCOUNT_KIT_API_VERSION}}"
      }
    );
  };

  // login callback
  function loginCallback(response) {
    console.log(response);
    if (response.status === "PARTIALLY_AUTHENTICATED") {
      document.getElementById("code").value = response.code;
      document.getElementById("csrf_nonce").value = response.state;
      document.getElementById("my_form").submit();
    }
    else if (response.status === "NOT_AUTHENTICATED") {
      // handle authentication failure
    }
    else if (response.status === "BAD_PARAMS") {
      // handle bad parameters
    }
  }

  // phone form submission handler
  function phone_btn_onclick() {
    var country_code = document.getElementById("country_code").value;
    var ph_num = document.getElementById("phone_num").value;
    AccountKit.login('PHONE', 
      {countryCode: country_code, phoneNumber: ph_num}, // will use default values if this is not specified
      loginCallback);
  }


  // email form submission handler
  function email_btn_onclick() {
    var email_address = document.getElementById("email").value;

    AccountKit.login('EMAIL', {emailAddress: email_address}, loginCallback);
  }

</script>

In My Sample code / Above code you basically need to change

{{csrf}} - ANY Alphanumeric characters. eg: 322323nn2j32jn32jn3
{{ACCOUNT_KIT_API_VERSION}} : v1.0 

You can find the version of accountkit in the above screenshot with APP ID.

The Above Code has two functionalities.

• Login using SMS
• Login using Email 

You can remove the login using email button and the function email_btn_onclick()  if not needed. We are focusing on Login using SMS in this Article.

If You run the above code you might experience couple of issues.

1)  Status : BAD_PARAMS

Bad Params error with Account kit.

To see the more details about the error, enable the debug mode as shown in the picture below. debug:true

Debug Mode True for Account kit to see more error info

Now you should see the following if you reexecute the code after a refresh.

2)  Status : NOT_AUTHENTICATED

Not Authenticated Error when debug mode is turned on

If you still getting BAD_PARAMS error, you need to Upload the AccountKit code in your website and add the URL in to the box as shown below.

Add the Website URL where this AccountKit Code is used.

If you are getting this following error, it means the Facebook App configuration is wrong.

{
    error: {
        message: "Error verifying the token in the 'access_token'",
        type: "OAuthException",
        code: 190,
        fbtrace_id: "GNhScPPp22t"
    }
}

To Fix this:
Open your App in facebook developers console.


Enable the Above settings.

Please Note: There is different App Secret if you are using AccountKit. (Correct App Secret is shown below)






Whitelist the URLs from where you are accessing (as shown below)




Hope you received a Authorization Code as shown below



See the {code:.....}
Code is Authorization code, which you need to send to facebook along with APPID and APP Secret to get the AccessToken.

<?php
 $ch = curl_init();
  // Set url elements
  $fb_app_id = '1777284542513521';
  $ak_secret = '0d0be3327a004c29334488cc5c45ffe9';
  $token = 'AA|'.$fb_app_id.'|'.$ak_secret;
  $code = "AQBCk7Fr9RN0st1bvAQIdm8v4OH2phrjn__J2fF0QAtIMAB3stLioGh1XrEV3jqych842LlJkHzJkzTZ3zlLZYZaqJ3UX-piWJEqGeF_4JnhQwVVRp38zzeLRn0cLKgMy1WH6CO0KLnsUCWsHNL4SGEEfSRIoZ6QqoDXcYAVowWlfrKLPw-HMjJwi7d8BorNwpxwg9LVWWcmu5p69xGI3-MZhHEFnAsrT1wWCQw4T9YWhWdP3ubtpHsR0XpOChJfI3Xf_TRYVoLd3K_3JQ3knRiT";
  // Get access token
  $url = 'https://graph.accountkit.com/v1.0/access_token?grant_type=authorization_code&code='.$code.'&access_token='.$token;
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_URL,$url);
  $result=curl_exec($ch);
  curl_close($ch);
  $info = json_decode($result);

print_r($info);

?>

Now you should see the following Output



You successfully received the Access Token

Possible errors here 

stdClass Object
(
    [error] => stdClass Object
        (
            [message] => This authorization code has expired.
            [type] => OAuthException
            [code] => 100
            [fbtrace_id] => BDBlNw9ptK6
        )

)

This means the Authorization Code has expired, you need to regerate new Authorization Code with Above SMS verification process. (Enter Phone, Verify SMS and so..)

Now to retrieve the details of this user

<?php
$access_token = "EMAWdkiDW3MPrLKKAF5Lc0IeXP2qFp4OoZBEwAHgrOavmRl2XgiCMuYySr3cZD";
$app_secret      = "0d0bXXXXXXXXXXXXXc5c45ffe9";
// Get account information
$appsecret_proof = hash_hmac('sha256', $access_token, $app_secret);

$url = 'https://graph.accountkit.com/v1.0/me/?access_token=' . $access_token . 
'&appsecret_proof=' . $appsecret_proof;

echo $url; //View this URL you will get the Following data

?>

Hope, Now it is working.
If you are still facing any issues, comment here, I will help you.