Tuesday, October 8, 2019

Android Facebook Integration (Login) with Examples

The Facebook SDK for Android enables people to sign into your app with Facebook Login. When people log into your app with Facebook they can grant permissions to your app so you can retrieve information or perform actions on Facebook on their behalf.

To integrate Facebook login, first we need to register our application in Facebook developer site to allow Facebook to authenticate all API requests that are coming from our app, for that open Facebook Developer site and follow the below steps to create an App ID for your android application.

Create a New App Id

Once we open Facebook developer site, click on Create a New App button to create an App Id for our android application like as shown below.

Android Integrate Facebook - Create a New App in Facebook Developer site

Once we click on Create a New App, a new popup window will open in that enter display name of our app, contact email and click on Create App ID like as shown below.

Android Integrate Facebook - Enter App Display Name in Facebook Developer Site

Once we enter all the details and click on Create App ID, it will open Security check window with captcha, enter the captcha and click on submit like as shown below.

Android Integrate Facebook - Enter Captcha to Create New App in Facebook

Once we are done with creation of App, our App ID will be shown like as shown below.

Android Integrate Facebook - After creating the app in facebook developer site

Add Facebook SDK to Project

Now we will add Facebook SDK to our android application, for that create a new android application using android studio and give names as FacebookLoginExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

To add Facebook SDK in your project, make it a dependency in Maven or download it. Choose the method which you preferred like as shown below.
Android Integrate Facebook - Select SDK Maven or SDK Facebook
In case if you select Maven to use Facebook SDK, we need to add the build dependency in our project, for that open your app à Gradle Scripts à build.gradle (project) and add mavenCentral() repository to the buildscript {repositories{}} section to download the SDK from the Maven Central Repository like as shown below.

buildscript {
    repositories {
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath 
'com.android.tools.build:gradle:2.3.3'    }
}
Now we need to add facebook compile statements to our application, for that open your app à Gradle Scripts à build.gradle (Module: app) and add following compile statement to the dependencies{} section to compile the latest version of Facebook Login SDK.

dependencies {
    ...
    compile 
'com.facebook.android:facebook-login:[4,5)'
    
...
}
Once you are done with adding required dependencies, build your application to update with required SDK’s.

Add Package Name and Default Class of App

Now add Android Application Package Name and Default Activity Class name in facebook, then click on save button like as shown below.

Android Integrate Facebook - Add Package Name and Default Activity Class Name

After click on Save button, a Popup will display, in that click on Use this Package Name button like as shown below.

Android Integrate Facebook - Use Google Play Package Name

Add Development and Release Key Hashes of App

To ensure the authenticity between our app and Facebook, we need to add Android key hash for our development environment. In case, if your app has already been published, you need to add both Android key hash and release key hash for your development.

Generating a Development Key Hash

You'll have a unique development key hash for each Android development environment. To generate a development key hash, on Mac, run the following command in terminal.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
On Windows, run this command in terminal.

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
This command will generate a 28-character key hash unique to your development environment. Copy and paste it into the Key Hashes input field below. You will need to provide a development key hash for the development environment of each person who works on your app.

Anroid Integrate Facebook - Add Key Hases to Facebook

Generating a Release Key Hash

Android apps must be digitally signed with a release key before you can upload them to the store. To generate a hash of your release key, run the following command on Mac or Windows substituting your release key alias and the path to your keystore.

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

Enable Single Sign On For Your App

We need to enable a Single Sign On for our app, for that select Yes and click Save like as shown below.

Android Integrate Facebook - Enable Single Sign On for our Android App

Add Facebook App ID

Now we will add our Facebook App ID in strings.xml file, for that open strings.xml file from /res/values path and following string values.

<string name="facebook_app_id">297800690726297</string>
<
string name="fb_login_protocol_scheme">fb297800690726297</string>
We need to add following details in our manifest file (AndroidManifest.xml) to set required user permissions, meta data and activity details.

Add Internet Permission

We need to add Internet permission in our manifest file, for that open AndroidManifest.xml file from /app/manifests/ path.

<uses-permission android:name="android.permission.INTERNET"/>

Add Meta Data Element

Add the following meta-data element to application element in AndroidManifest.xml file.

<application ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        
android:value="@string/facebook_app_id"/>
    ...
</application>

Add FaceBook Activity

Add following facebook activity in android manifest file.

<activity android:name="com.facebook.FacebookActivity"
    
android:configChanges=
        
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    
android:label="@string/app_name" />

Add Chrome Custom Tabs

We need to add following activity and intent filters for Chrome Custom Tabs to allow a Facebook SDK to provide a login dialog instead of Webview, in case if Facebook app is not installed. As a result, people do not have to enter their credentials, if they already logged into Facebook in their Chrome browser.

<activity
    
android:name="com.facebook.CustomTabActivity"
    
android:exported="true">
    <
intent-filter>
        <
action android:name="android.intent.action.VIEW" />
        <
category android:name="android.intent.category.DEFAULT" />
        <
category android:name="android.intent.category.BROWSABLE" />
        <
data android:scheme="@string/fb_login_protocol_scheme" />
    </
intent-filter>
</
activity>
Once we add all the required elements our AndroidManifest.xml file should contain the code like as shown below.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"
    
package="com.tutlane.facebookloginexample">
    <
uses-permission android:name="android.permission.INTERNET"/>

    <
application
        
android:allowBackup="true"
        
android:icon="@mipmap/ic_launcher"
        
android:label="@string/app_name"
        
android:roundIcon="@mipmap/ic_launcher_round"
        
android:supportsRtl="true"
        
android:theme="@style/AppTheme">
        <
meta-data android:name="com.facebook.sdk.ApplicationId"
            
android:value="@string/facebook_app_id"/>
        <
activity android:name="com.facebook.FacebookActivity"
            
android:configChanges=
                
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            
android:label="@string/app_name" />
        <
activity
            
android:name="com.facebook.CustomTabActivity"
            
android:exported="true">
            <
intent-filter>
                <
action android:name="android.intent.action.VIEW" />
                <
category android:name="android.intent.category.DEFAULT" />
                <
category android:name="android.intent.category.BROWSABLE" />
                <
data android:scheme="@string/fb_login_protocol_scheme" />
            </
intent-filter>
        </
activity>
        <
activity android:name=".MainActivity">
            <
intent-filter>
                <
action android:name="android.intent.action.MAIN" />
                <
category android:name="android.intent.category.LAUNCHER" />
            </
intent-filter>
        </
activity>
    </
application>
</
manifest>

Add Facebook Login in App

By using Facebook SDK we can add LoginButton to our application. The LoginButton is a UI element that wraps functionality available in the LoginManager. When someone clicks on the button, the login is initiated with the permissions set in the LoginManager.

In our activity_main.xml layout file, we need to add Facebook Login button using full class name com.facebook.widget.LoginButton like as shown below.

<com.facebook.login.widget.LoginButton
    
android:id="@+id/login_button"
    
android:layout_width="wrap_content"
    
android:layout_height="wrap_content"
    
android:layout_gravity="center_horizontal"
    
android:layout_marginTop="150dp"
    
android:layout_marginBottom="30dp" />
The complete code of our activity_main.xml file will be like as shown below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
android:layout_width="match_parent"
    
android:layout_height="match_parent"
    
android:paddingLeft="20dp"
    
android:paddingRight="20dp"
    
android:orientation="vertical" >
    <
com.facebook.login.widget.LoginButton
        
android:id="@+id/login_button"
        
android:layout_width="wrap_content"
        
android:layout_height="wrap_content"
        
android:layout_gravity="center_horizontal"
        
android:layout_marginTop="150dp"
        
android:layout_marginBottom="30dp" />
</
LinearLayout>
Now we need to add the following code details in MainActivity.java file to set callback manager, read permissions, etc. to use facebook login in our applications.

Create CallBack Manager and Set Read Permissions

By using CallBackManager.Factory.create we can create a callback manager to handle login responses and we need to set read permissions using setReadPermissions() method to get user details from Facebook.

Following is the code to add callback manager and setting read permissions to read user details from facebook profile in activity file.

public class MainActivity extends AppCompatActivity {
    CallbackManager 
callbackManager;
    
@Override
    
protected void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        
callbackManager = CallbackManager.Factory.create();
        LoginButton loginButton = (LoginButton)findViewById(R.id.
login_button);
        loginButton.setReadPermissions(
"email");
    }
}

Register a Callback

To respond to a login result, we need to register a callback with either LoginManager or LoginButton. In case, if we register the callback with LoginButton, we don't need to register the callback on Login manager.

We need to add the callback to our activity or fragment's onCreate() method like as shown below.

public class MainActivity extends AppCompatActivity {
    CallbackManager 
callbackManager;
    
@Override
    
protected void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        
callbackManager = CallbackManager.Factory.create();
        LoginButton loginButton = (LoginButton)findViewById(R.id.
login_button);
        loginButton.setReadPermissions(
"email");
        loginButton.registerCallback(
callbackManagernew FacebookCallback<LoginResult>() {
            
@Override
            
public void onSuccess(LoginResult loginResult) {
               
// App code
            
}
            
@Override
            
public void onCancel() {
                
// App code
            
}
            
@Override
            
public void onError(FacebookException exception) {
                
// App code
            
}
        });
    }
}

Add onActivityResult()

The onActivityResult() forward the login results to the callbackManager created in onCreate() method.

@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {
    
super.onActivityResult(requestCode, resultCode, data);
    
callbackManager.onActivityResult(requestCode, resultCode, data);
}

MainActivity.java

The complete code of our MainActivity.java file will be like as shown below.

package com.tutlane.facebookloginexample;import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import com.facebook.CallbackManager;import com.facebook.FacebookCallback;import com.facebook.FacebookException;import com.facebook.login.LoginResult;import com.facebook.login.widget.LoginButton;
public class MainActivity extends AppCompatActivity {
    CallbackManager 
callbackManager;
    
@Override
    
protected void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        
callbackManager = CallbackManager.Factory.create();
        LoginButton loginButton = (LoginButton)findViewById(R.id.
login_button);
        loginButton.setReadPermissions(
"email");
        loginButton.registerCallback(
callbackManagernew FacebookCallback<LoginResult>() {
            
@Override
            
public void onSuccess(LoginResult loginResult) {
               
// App code
            
}
            
@Override
            
public void onCancel() {
                
// App code
            
}
            
@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);
    }
}

Output of Android Facebook Integration Example

When we run above program in android studio we will get the result like as shown below.

Android Facebook Login Integration Example Result

When we click on Continue with Facebook button, it will show popup to login with Facebook, once you logged in successfully we will get the logout button like as shown below.

Android Facebook Login Integration Example Result After Facebook Login

This is how we can integrate Facebook login in android applications based on our requirements.

No comments:

Post a Comment

How to DROP SEQUENCE in Oracle?

  Oracle  DROP SEQUENCE   overview The  DROP SEQUENCE  the statement allows you to remove a sequence from the database. Here is the basic sy...