Guides on how to use Facebook login kit on Android apps — Ekene Christian.
Facebook authentication to android apps or website is a very secure, easy and very 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 and 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 which 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 is 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 in 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.