Guide on how to use Facebook login kit on Android apps.

Facebook authentication for Android apps or websites is a very secure, easy, and fast way of getting a user to sign in or sign up to your app or website. I will be taking us on a step by step tour on how to use this beautiful feature, specifically on our basic Android apps.

Let’s get to it:

Step 1: Create a new Android Studio project and give it a name of your choice.

Step 2: Open www.developers.facebook.com and at the top right corner of the page, click on Get Started and a dialogue box will be displayed for you to fill in your Facebook account details and get signed up. After this has been done, choose Apps in the header navigation and select Add a New App.

Step 3: Another dialogue box where you will input your app display name and email address shows up. Choose a name for your app and select Create New Facebook App ID.

Step 4: Your app ID will be generated and this is very unique to your app. You will use this ID whenever you use one of the SDKs or Open Graph tags for sharing. You can find your app ID in your app’s dashboard.

Step 5: At the left hand side of your screen, select Settings > Basic and below the open screen, select Add Platform > Android.

Step 6: Your Google Play package name can be gotten from your AndroidManifest.xml in your studio project. Copy the package name and paste it inside “Google Play Package Name.” In the “Class Name,” just put .MainActivity.

For the “Key Hashes,” this is very unique to every computer system and there are different ways you can generate yours. I will drop some lines of codes here which will help you generate yours. Copy, paste, and run the code below in:

MainActivity.java

import android.content.pm.PackageInfo;import android.content.pm.PackageManager;import android.content.pm.Signature;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.Base64;import android.util.Log;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;public class MainActivity extends AppCompatActivity { PackageInfo info; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); try { info = getPackageManager().getPackageInfo("app.com.example.ekenechristian.koko", PackageManager.GET_SIGNATURES); for (Signature signature : info.signatures) { MessageDigest md; md = MessageDigest.getInstance("SHA"); md.update(signature.toByteArray()); String something = new String(Base64.encode(md.digest(), 0)); Log.e("Result", something); } }catch (PackageManager.NameNotFoundException e1){ Log.e("Name not found", e1.toString()); }catch (NoSuchAlgorithmException e){ Log.e("No such algorithm", e.toString()); } catch (Exception e){ Log.e("Exception", e.toString()); } }}

Make sure to change app.com.example.ekenechristian.koko in the code to your project package name. Open the Android monitor below your studio environment, go through the error messages there, and you will see a 28 digit that ends with the “=” sign like “ OF***********MR****I7e+**F4=."

Copy the code and paste it in the space provided for Key Hashes. Turn on the Single Sign On toggle button and then click save changes to continue.

Step 7: At the top right corner of your screen, click Docs > Android SDK > login. Some codes will be provided to you that you can copy to your Android project. Follow the codes accordingly and at the end, your Facebook authentication to your app will be a success.

Here are the sample codes I used on mine. You can go through it to make it easier for you.

build.gradle(Module: app)

repositories{ mavenCentral()}dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.facebook.android:facebook-android-sdk:[4,5)' compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7' testCompile 'junit:junit:4.12'}

Notice the repositories and the Facebook dependency. Use internet to sync your project so the required SDK will be downloaded.

strings.xml

<resources> <string name="app_name">FBLoginTest</string> <string name="facebook_app_id">1646751488677797</string> <string name="fb_login_protocol_scheme">fb1646751488677797</string></resources>

The facebook_app_id helps access your Facebook app directly from your phone while the fb_login_protocol_scheme helps locate a browser in your phone where you will login with Facebook in cases where there is no Facebook app on your phone.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="app.com.example.ekenechristian.fblogintest.MainActivity"> <TextView android:id="@+id/login_status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Welcome" android:textSize="35sp" android:textColor="#000" android:layout_centerHorizontal="true" android:layout_marginTop="30dp"/> <TextView android:id="@+id/sign_up" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sign up" android:textSize="20sp" android:textColor="#000" android:layout_below="@id/login_status" android:layout_centerHorizontal="true" /> <EditText android:id="@+id/first_name" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="30dp" android:layout_marginLeft="10dp" android:paddingRight="10dp" android:hint="Enter your first name here" android:layout_below="@id/sign_up"/> <EditText android:id="@+id/last_name" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:paddingRight="10dp" android:hint="Enter your last name here" android:layout_below="@id/first_name"/> <EditText android:id="@+id/user_name" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:paddingRight="10dp" android:hint="Choose Username" android:layout_below="@id/last_name"/> <EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:paddingRight="10dp" android:hint="Choose Password" android:layout_below="@id/user_name"/> <TextView android:id="@+id/or_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="or" android:textColor="#000" android:textAllCaps="true" android:textSize="25sp" android:layout_below="@id/password" android:layout_centerInParent="true" android:layout_marginTop="20dp" /> <com.facebook.login.widget.LoginButton android:id="@+id/login_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:layout_marginBottom="30dp" android:textSize="20sp"/></RelativeLayout>

You can add your ScrollView to the above XML.

MainActivity.java

package app.com.example.ekenechristian.fblogintest;import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;import com.facebook.CallbackManager;import com.facebook.FacebookCallback;import com.facebook.FacebookException;import com.facebook.FacebookSdk;import com.facebook.login.LoginManager;import com.facebook.login.LoginResult;import com.facebook.login.widget.LoginButton;public class MainActivity extends AppCompatActivity { private TextView textView; private LoginButton loginButton; CallbackManager callbackManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FacebookSdk.sdkInitialize(getApplicationContext()); setContentView(R.layout.activity_main); textView = (TextView) findViewById(R.id.login_status); loginButton = (LoginButton) findViewById(R.id.login_button); callbackManager = CallbackManager.Factory.create(); LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { textView.setText("Login Successful \n" + loginResult.getAccessToken().getUserId() + "\n" + loginResult.getAccessToken().getToken()); } @Override public void onCancel() { textView.setText("Login Cancelled"); } @Override public void onError(FacebookException exception) { // App code } }); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); callbackManager.onActivityResult(requestCode, resultCode, data); }}

Make sure that the Single Sign On in your developer Facebook account is activated to YES.

With this, your app authentication with Facebook should be a success.

Thank You.