Implementing Facebook Kit for Phone Verification

Before we begin i assume you have the necessary prerequisites that is a Facebook App ID and enabled Facebook Kit on your account dashboard. If not you can follow this guide to do this. Now that we have that out of the way we can proceed into implementing the sdk without any further ado.

Step 1

Have ready your Facebook App ID and Facebook kit ClientToken (Can be foubd on the account dashboard created for your app). This will be added to the manifest on later steps.

Step 2

Add the compile dependency with the latest version of the Account Kit SDK in the build.gradle file:

repositories {
  jcenter()
}

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

Step 3

Open and add the following to the application tag of your AndroidManifest.xml
<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" />

The AccountKit is added here to enable the facebookKit activity to launch. If u intent to customise the interface of the screens you have to add the below to the activity defined in the manifest: <activity android:name="com.facebook.accountkit.ui.AccountKitActivity" android:theme="@style/AppLoginTheme" tools:replace="android:theme" />

Step 4

Create method to initiate the Login process.

public static int APP_REQUEST_CODE = 99;

public void phoneLogin(final View view) {
  final Intent intent = new Intent(getActivity(), AccountKitActivity.class);
  AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
    new AccountKitConfiguration.AccountKitConfigurationBuilder(
      LoginType.PHONE,
      AccountKitActivity.ResponseType.CODE); // or .ResponseType.TOKEN
  // ... perform additional configuration here such as using a custom them ...
  intent.putExtra(
    AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
    configurationBuilder.build());
  startActivityForResult(intent, APP_REQUEST_CODE);
}

Step 5

Now override your onActivityResult to get your authorization code to be saved/move to next activity or send to your Api.

@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();
            showErrorActivity(loginResult.getError());
        } else if (loginResult.wasCancelled()) {
            toastMessage = "Login Cancelled";
        } else {
            if (loginResult.getAccessToken() != null) {
                toastMessage = "Success:" + loginResult.getAccessToken().getAccountId();
            } else {
                toastMessage = String.format(
                        "Success:%s...",
                        loginResult.getAuthorizationCode().substring(0,10));
            }

            // If you have an authorization code, retrieve it from
            // loginResult.getAuthorizationCode()
            // and pass it to your server and exchange it for an access token.

            // Success! Start your next activity or save your token...
        }

        // Surface the result to your user in an appropriate way.
        Toast.makeText(
                this,
                toastMessage,
                Toast.LENGTH_LONG)
                .show();
    }
}

Customizations

You can customize the apearance of the interface. Facebook Kit provides some default themes those of which can be further customized by creating custom themes. To add a custom them for example you can create a theme file in your resource folder and input the properties such as the example below. themes.xml

<resources>

    <style name="AppLoginTheme" parent="Theme.AccountKit"/>

    <style name="AppLoginTheme.Custom" parent="Theme.AccountKit">
        <item name="com_accountkit_primary_color">@color/white</item>
        <item name="com_accountkit_primary_text_color">@android:color/white</item>
        <item name="com_accountkit_secondary_text_color">@android:color/white</item>
        <item name="com_accountkit_background">@drawable/background_image</item>
        <item name="com_accountkit_background_color">#66000000</item>
        <item name="com_accountkit_input_accent_color">@android:color/white</item>
        <item name="com_accountkit_input_background_color">@color/transparent</item>
        <item name="com_accountkit_input_border_color">@android:color/white</item>
        <item name="com_accountkit_button_text_color">@color/blue</item>
    </style>
</resources>

Here the AppLoginTheme.Custom can be set to the UIManager from the activity launching the facebookKit. For supported customizations refer https://developers.facebook.com/docs/accountkit/android/customizing/#advanced. To set this theme as the theme of the verification activities:

int selectedThemeId = R.style.AppLoginTheme_Bicycle;
UIManager themeManager = new ThemeUIManager(selectedThemeId);
configurationBuilder.setUIManager(themeManager);

For further info please refer the official developer's page: https://developers.facebook.com/docs/accountkit/android For customization refer: https://developers.facebook.com/docs/accountkit/android/customizing/#advanced