Vishwesh Shetty

Facebook provides Account Kit which helps you to register users through phone number. SMS verification is handled by Facebook Account Kit, so you don’t have to handle and spend on SMS verification.

 

I have compiled a simple step by step guide to integrate Account Kit in your Android app.

1. Generate Key Hash

Before creating an app on Facebook we need to generate our key hash using keystore which your app is using. During development stage this would generally be debug.keystore.

 

Go to java bin directory and execute following command. In case if you haven’t downloaded open-ssl yet, download it from here.
Command:

 

keytool -exportcert -alias androiddebugkey -keystore {path-to-debug-keystore} | {path-to-openssl.exe} sha1 -binary | {path-to-openssl.exe} base64

 

Example:

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | "D:\Setup\SetupFiles\openssl-0.9.8k_X64\bin\openssl.exe" sha1 -binary | "D:\Setup\SetupFiles\openssl-0.9.8k_X64\bin\openssl.exe" base64

 

This will output a string, which is your key hash.

 

 

2. Create a Facebook App.

Go to – https://developers.facebook.com/quickstarts/?platform=android and enter name of your app

 

Add package and class name.

Add hash key generated in previous step and click next.

 

 

3.  Add Account Kit to your Facebook App 

 

Click on Skip Quickstart, which will take you to your Application’s settings page.

 

Copy app id from app settings page and save it in notepad (Keep it handy)

 

Click on Add Product and click on Get Started for Account Kit

 

 

 

Turn server side authentication OFF
(In this demo we are only working on client side i.e. Android side. Though for better security it is always better to handle this on server side, which we shall cover in next Tutorial)

 

Copy Account Kit Client Token to notepad (Keep it handy)

 

4. Android Integration

 

a. Gradle Dependencies

 

Add dependency in gradle for Account Kit

repositories {
  jcenter()
}

dependencies {
  compile 'com.facebook.android:account-kit-sdk:4.+'
}

 

b. Android Manifest 

 

Add the following to the AndroidManifest.xml

<meta-data android:name="com.facebook.accountkit.ApplicationName" android:value="@string/app_name" />
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id" />
<meta-data android:name="com.facebook.accountkit.ClientToken" android:value="@string/account_kit_client_token" />

<activity
 android:name="com.facebook.accountkit.ui.AccountKitActivity"
 android:theme="@style/AppLoginTheme"
 tools:replace="android:theme"/>

 

c.  Resource Files

 

Add following to strings.xml

<string name="facebook_app_id">309005412803023</string>
<string name="account_kit_client_token">31cf85881dfb73adf2e4b0ed275ccb9a</string>

Add following Style to styles.xml

<style name="AppLoginTheme" parent="Theme.AccountKit" >
    <item name="android:windowNoTitle">true</item>
</style>

 

 

d. Java Files

 

Initialize Facebook Account Kit in your Application class, don’t forget to add this class in “android:name” attribute in your application tag of manifest file.

public class AccountKitDemoApplication extends Application{
    @Override
    public void onCreate() {
        super.onCreate();
        //Initialize Facebook Account Kit
        AccountKit.initialize(getApplicationContext());
    }
}

 

Initialize Sms Flow.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initAccountKitSmsFlow();
}

/**
 * Initializes Facebook Account Kit Sms flow registration.
 */
public void initAccountKitSmsFlow() {
    final Intent intent = new Intent(this, AccountKitActivity.class);
    AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
            new AccountKitConfiguration.AccountKitConfigurationBuilder(
                    LoginType.PHONE,
                    AccountKitActivity.ResponseType.TOKEN); // or .ResponseType.TOKEN
    // ... perform additional configuration ...
    intent.putExtra(
            AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
            configurationBuilder.build());
    startActivityForResult(intent, APP_REQUEST_CODE);
}

 

Facebook will handle SMS verification from here on, and return you the result on onActivityResult(). If SMS verfication is done successfully AccountKit.getCurrentAccount() to get user’s verified phone number.

 

@Override
protected void onActivityResult(
        final int requestCode,
        final int resultCode,
        final Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == APP_REQUEST_CODE) { // confirm that this response matches your request
        AccountKitLoginResult loginResult = data.getParcelableExtra(AccountKitLoginResult.RESULT_KEY);
        String toastMessage= "";
        if (loginResult.getError() != null) {
            toastMessage = loginResult.getError().getErrorType().getMessage();
        } else if (loginResult.wasCancelled()) {
            toastMessage = "Login Cancelled";
        } else {
            if (loginResult.getAccessToken() != null) {
                toastMessage = "Success:" + loginResult.getAccessToken().getAccountId();
                getAccount();
            }
        }
        // Surface the result to your user in an appropriate way.
        Toast.makeText(
                this,
                toastMessage,
                Toast.LENGTH_LONG)
                .show();
    }
}

/**
 * Gets current account from Facebook Account Kit which include user's phone number.
 */
private void getAccount(){
    AccountKit.getCurrentAccount(new AccountKitCallback<Account>() {
        @Override
        public void onSuccess(final Account account) {
            // Get Account Kit ID
            String accountKitId = account.getId();

            // Get phone number
            PhoneNumber phoneNumber = account.getPhoneNumber();
            String phoneNumberString = phoneNumber.toString();
            
            // Surface the result to your user in an appropriate way.
            Toast.makeText(
                    MainActivity.this,
                    phoneNumberString,
                    Toast.LENGTH_LONG)
                    .show();
        }

        @Override
        public void onError(final AccountKitError error) {
            Log.e("AccountKit",error.toString());
            // Handle Error
        }
    });
}

76,410 total views, 40 views today