
<p>This post is about how to integrate Facebook login into an Android application.</p> 
 
 
 
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #280449;" href="https://github.com/arunk7839/FLoginExp"><strong>DOWNLOAD CODE</strong></a></div> 
<div> </div> 
</div> 
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="OTA6Wl9X5-g" title="Integrating Facebook Login in Android App"><a placeholder href="https://youtu.be/OTA6Wl9X5-g"><img src="https://i.ytimg.com/vi/OTA6Wl9X5-g/hqdefault.jpg" layout="fill" object-fit="cover" alt="Integrating Facebook Login in Android App"></a></amp-youtube></p> 
<h4><span style="color: #000080;"><strong>The Facebook SDK</strong></span></h4> 
<p>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.</p> 
<p>Follow the steps below to add Facebook Login to your app:</p> 
<p>1 . Go to <a href="https://developers.facebook.com/"><strong><span style="color: #000080;">facebook developer site</span></strong></a> and log in using your Facebook account.</p> 
<p>2 . After login, click on<span style="color: #008000;"><strong> My Apps</strong></span> option shown at the top right.</p> 
<p>3 . Now, select an app or create a new one.</p> 
<p><img class="alignnone size-full wp-image-3029" src="https://c1ctech.com/wp-content/uploads/2022/02/a.png" alt="" width="658" height="112" /></p> 
<p>4 . Choose <span style="color: #008000;"><strong>Facebook Login Setup</strong></span> option from the left side and then click on <strong><span style="color: #008000;">Quickstart</span>.</strong></p> 
<p>5 . Now, select the platform as <span style="color: #008000;"><strong>Android</strong></span>.</p> 
 
 
 
<p>6 . From the next screen, instead of downloading the Facebook SDK we will import it. Click on <span style="color: #008000;"><strong>next</strong></span>.</p> 
<h5><span style="color: #000080;"><strong>Import the Facebook SDK</strong></span></h5> 
<p>7 . Open Project-level build.gradle file and add the <strong><span style="color: #008000;">mavenCentral()</span></strong> repository to download the SDK from the Maven Central Repository:</p> 
<pre>buildscript {<br /> repositories {<br /> google()<br /> <span style="color: #008000;"><strong>mavenCentral()</strong></span><br /> }</pre> 
<p>8 . Open App-level build.gradle file and add the latest version of the SDK dependency under the dependencies section and then click on<strong><span style="color: #008000;"> Sync Now</span></strong>.</p> 
<pre>dependencies {<br /> implementation 'com.facebook.android:facebook-android-sdk:latest.release'<br />}</pre> 
<p>9 . Add the following statements to import the Facebook SDK packages.</p> 
<pre>import com.facebook.FacebookSdk;<br />import com.facebook.appevents.AppEventsLogger;</pre> 
<h5><span style="color: #000080;"><strong>Add package and activity class name</strong></span></h5> 
<p>10 . Enter your package name and default activity name with the fully qualified path and then click on <span style="color: #008000;"><strong>save</strong></span>.</p> 
<p><img class="alignnone size-large wp-image-3031" src="https://c1ctech.com/wp-content/uploads/2022/02/b-1-e1643784099570-1024x368.png" alt="" width="1024" height="368" /></p> 
<p>11 . The next window asks for setting up the key hashes. Run the provided commands on mac terminal/windows cmd and then add the generated hash key in the Key hashes field.</p> 
<p>12 . Enable <span style="color: #008000;"><strong>Single Sign-on </strong></span>for your app.</p> 
<p><img class="alignnone size-large wp-image-3036" src="https://c1ctech.com/wp-content/uploads/2022/02/c-1024x225.png" alt="" width="1024" height="225" /></p> 
<h5><span style="color: #000080;"><strong><span class="lfloat _ohe _c24 _50f4 _50f7"><span class="_1l7d _50f9 _2iel">Edit Your Resources and Manifest</span></span></strong></span></h5> 
<p>13 . Open your <strong><span style="color: #008000;">/app/res/values/strings.xml</span> </strong>file and add the below string elements:</p> 
<pre><;resources>;<br /> <span style="color: #008000;"><strong> <;!--</strong></span><br /><span style="color: #008000;"><strong> On the Dashboard, navigate to Settings >; Basic >; App ID.</strong></span><br /><span style="color: #008000;"><strong> -->;</strong></span><br /> <;string name="facebook_app_id">;1062987424533270<;/string>;<br /><br /><strong><span style="color: #008000;"> <;!--</span></strong><br /><strong><span style="color: #008000;"> same as facebook app id but prefix with fb </span></strong><br /><strong><span style="color: #008000;"> -->;</span></strong><br /> <;string name="fb_login_protocol_scheme">;fb1062987424533270<;/string>;<br /><br /> <strong><span style="color: #008000;"> <;!--</span></strong><br /><strong><span style="color: #008000;"> On the Dashboard, navigate to Settings >; Advanced >; Security >; Client token.</span></strong><br /><strong><span style="color: #008000;"> -->;</span></strong><br /> <;string name="facebook_client_token">;f946459314g319906e85bebb758ed5fe<;/string>;<br /><br /><;/resources>;</pre> 
<p>14 . Open <span style="color: #008000;"><strong>/app/manifest/AndroidManifest.xml</strong> </span>file:</p> 
<ul> 
<li>Add meta-data elements to the <strong><span style="color: #008000;">application</span></strong> element for your app ID and client access token:</li> 
</ul> 
<pre><;application android:label="@string/app_name" ...>;<br /> ...<br /><;meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>;<br /><;meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>;<br /> ...<br /> <;/application>;</pre> 
<ul> 
<li>Add an activity for Facebook, and an activity and intent filter for Chrome Custom Tabs inside your <span style="color: #008000;"><strong>application</strong></span> element:</li> 
</ul> 
<pre><;activity<br /> android:name="com.facebook.FacebookActivity"<br /> android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"<br /> android:label="@string/app_name" />;<br /><br /><;activity<br /> android:name="com.facebook.CustomTabActivity"<br /> android:exported="true">;<br /> <;intent-filter>;<br /> <;action android:name="android.intent.action.VIEW" />;<br /><br /> <;category android:name="android.intent.category.DEFAULT" />;<br /> <;category android:name="android.intent.category.BROWSABLE" />;<br /><br /> <;data android:scheme="@string/fb_login_protocol_scheme" />;<br /> <;/intent-filter>;<br /><;/activity>;</pre> 
<ul> 
<li>Add a uses-permission element to the manifest above the <strong><span style="color: #008000;">application</span></strong> element:</li> 
</ul> 
<pre><;uses-permission android:name="android.permission.INTERNET" />;</pre> 
<h4><span style="color: #000080;"><strong>Creating the Layout File</strong></span></h4> 
<p>The below layout file consist of a <strong><span style="color: #008000;">LoginButton</span></strong> from the Facebook SDK and two Textviews (to display the user name and email).</p> 
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:app="http://schemas.android.com/apk/res-auto"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> tools:context=".MainActivity">;<br /><br /> <;TextView<br /> android:id="@+id/userName"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:gravity="center"<br /> android:textColor="@color/purple_500"<br /> android:textSize="21sp"<br /> app:layout_constraintBottom_toBottomOf="parent"<br /> app:layout_constraintEnd_toEndOf="parent"<br /> app:layout_constraintHorizontal_bias="0.5"<br /> app:layout_constraintStart_toStartOf="parent"<br /> app:layout_constraintTop_toTopOf="parent" />;<br /><br /> <;TextView<br /> android:id="@+id/userEmail"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="25dp"<br /> android:gravity="center"<br /> android:textColor="@color/purple_500"<br /> android:textSize="21sp"<br /> app:layout_constraintEnd_toEndOf="@+id/userName"<br /> app:layout_constraintStart_toStartOf="@+id/userName"<br /> app:layout_constraintTop_toBottomOf="@+id/userName" />;<br /><br /> <;com.facebook.login.widget.LoginButton<br /> android:id="@+id/login_button"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_gravity="center_horizontal"<br /> android:layout_marginTop="30dp"<br /> android:layout_marginBottom="30dp"<br /> app:layout_constraintEnd_toEndOf="@+id/userEmail"<br /> app:layout_constraintStart_toStartOf="@+id/userEmail"<br /> app:layout_constraintTop_toBottomOf="@+id/userEmail" />;<br /><br /><;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
<h4><strong><span style="color: #000080;">Creating the MainActivity File</span></strong></h4> 
<p>The <strong><span style="color: #008000;">MainActivity.kt</span></strong> file contains the below code:</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>package com.c1ctech.floginexp<br /><br />import androidx.appcompat.app.AppCompatActivity<br />import android.os.Bundle<br />import com.facebook.login.LoginResult<br />import com.c1ctech.floginexp.databinding.ActivityMainBinding<br />import java.util.*<br />import android.content.Intent<br />import android.util.Log<br />import android.widget.Toast<br />import com.facebook.*<br />import org.json.JSONObject<br />import org.json.JSONException<br />import com.facebook.GraphResponse<br />import com.facebook.GraphRequest<br /><br />class MainActivity : AppCompatActivity() {<br /><br /> lateinit var accessTokenTracker: AccessTokenTracker<br /> lateinit var callbackManager: CallbackManager<br /><br /> lateinit var activityMainBinding: ActivityMainBinding<br /><br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /><br /> activityMainBinding = ActivityMainBinding.inflate(layoutInflater)<br /><br /><strong><span style="color: #008000;"> // initializes the Facebook SDK</span></strong><br /> FacebookSdk.sdkInitialize(applicationContext)<br /><br /> setContentView(activityMainBinding.root)<br /><br /> <strong><span style="color: #008000;">// create an instance of callbackManager</span></strong><br /><strong><span style="color: #008000;"> // It manages the callbacks into the FacebookSdk from onActivityResult()'s method.</span></strong><br /> callbackManager = CallbackManager.Factory.create()<br /><br /><strong><span style="color: #008000;"> // set the permissions to use when the user logs in.</span></strong><br /> activityMainBinding.loginButton.setPermissions(listOf("email", "public_profile"))<br /><br /><strong><span style="color: #008000;"> // Registers a login callback to the given callback manager.</span></strong><br /> activityMainBinding.loginButton.registerCallback(<br /> callbackManager,<br /> object : FacebookCallback<;LoginResult?>; {<br /><br /><span style="color: #008000;"><strong> // called when the dialog completes without error.</strong></span><br /> override fun onSuccess(result: LoginResult?) {<br /> Log.e("message: ", "success")<br /> }<br /><br /><strong><span style="color: #008000;"> // called when the dialog is canceled.</span></strong><br /> override fun onCancel() {<br /> Log.e("message: ", "onCancel")<br /> }<br /><br /><strong><span style="color: #008000;"> // called when the dialog finishes with an error.</span></strong><br /> override fun onError(exception: FacebookException) {<br /> Log.e("message: ", exception.localizedMessage)<br /> }<br /> })<br /><br /> accessTokenTracker = object : AccessTokenTracker() {<br /><br /><span style="color: #008000;"><strong> // The method that will be called with the access token changes.</strong></span><br /> override fun onCurrentAccessTokenChanged(<br /> oldAccessToken: AccessToken?,<br /> currentAccessToken: AccessToken?<br /> ) {<br /><strong><span style="color: #008000;"> // condition is true when user logs out</span></strong><br /> if (currentAccessToken == null) {<br /> activityMainBinding.userName.text = ""<br /> activityMainBinding.userEmail.text = ""<br /> Toast.makeText(this@MainActivity, "LogOut", Toast.LENGTH_SHORT).show()<br /> } else {<br /><strong><span style="color: #008000;"> //get user data from Json object and display it in textviews.</span></strong><br /> loadUserProfile(currentAccessToken)<br /> }<br /> }<br /> }<br /> }<br /><br /> override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {<br /> callbackManager.onActivityResult(requestCode, resultCode, data)<br /> super.onActivityResult(requestCode, resultCode, data)<br /> }<br /><br /> override fun onDestroy() {<br /> super.onDestroy()<br /><strong><span style="color: #008000;"> // stops tracking the current access token</span></strong><br /> accessTokenTracker.stopTracking()<br /><br /> }<br /><br /> private fun loadUserProfile(currentAccessToken: AccessToken) {<br /><strong><span style="color: #008000;"> // creates a new Request configured to retrieve a user's own profile.</span></strong><br /> val request = GraphRequest.newMeRequest(<br /> currentAccessToken, object : GraphRequest.GraphJSONObjectCallback {<br /> override fun onCompleted(`object`: JSONObject?, response: GraphResponse?) {<br /> Log.d("TAG", `object`.toString())<br /> try {<br /> val first_name = `object`!!.getString("first_name")<br /> val last_name = `object`!!.getString("last_name")<br /> val email = `object`!!.getString("email")<br /><br /> activityMainBinding.userName.setText("$first_name $last_name")<br /> activityMainBinding.userEmail.setText(email)<br /><br /> } catch (e: JSONException) {<br /> e.printStackTrace()<br /> }<br /> }<br /> })<br /><br /> val parameters = Bundle()<br /> parameters.putString("fields", "first_name,last_name,email,id")<br /><br /><strong><span style="color: #008000;"> // set parameters for this request.</span></strong><br /> request.parameters = parameters<br /><br /><strong><span style="color: #008000;"> // Executes the request asynchronously.</span></strong><br /> request.executeAsync()<br /> }<br />}<br /><br /></pre> 
<p>In the above code,</p> 
<ul> 
<li><span style="color: #008000;"><strong>sdkInitialize()</strong></span> method initializes the Facebook SDK.</li> 
<li>The instance of <strong><span style="color: #008000;">callbackManager</span></strong> manages the callbacks into the FacebookSdk from the Activity&#8217;s <span style="color: #008000;"><strong>onActivityResult()</strong> </span>method.</li> 
<li>The <strong><span style="color: #008000;">setPermissions()</span> </strong>method sets the permissions to use when the user logs in.</li> 
<li>The <strong><span style="color: #008000;">registerCallback()</span></strong> method registers a login callback to the given callback manager.</li> 
<li>In onActivityResult() method, the <strong><span style="color: #008000;">callbackManager.onActivityResult()</span></strong> (returns <span style="color: #008000;"><strong>true</strong></span> If the result could be handled) passes the login results to the <strong><span style="color: #008000;">registerCallback</span></strong> method via callbackManager.</li> 
<li>If login <strong><span style="color: #008000;">succeeds</span></strong>, the <strong><span style="color: #008000;">LoginResult</span></strong> parameter has the new AccessToken, and the most recently granted or declined permissions.</li> 
<li> 
<p><strong><span style="color: #008000;">onCurrentAccessTokenChanged()</span></strong> method will be called with the access token changes.</p> 
</li> 
<li>The <strong><span style="color: #008000;">Facebook Graph API</span> </strong>is used to retrieve user info. It works by passing a Bundle of parameters as keys to the GraphRequest. The GraphRequest, on execution, should return the relevant info values based on the keys specified if they meet the permissions. The result is returned in the form of a <strong><span style="color: #008000;">JSON</span></strong>.</li> 
</ul> 
<p>When you run the app you will see a login button on the screen:</p> 
<p><img class="alignnone wp-image-3041" src="https://c1ctech.com/wp-content/uploads/2022/02/s1-473x1024.png" alt="" width="268" height="580" /></p> 
<p>When the user successfully logged in you will see the Log out button with user info and on-click of Log out button it will show dialog as shown below:</p> 
<p><img class="alignnone wp-image-3042" src="https://c1ctech.com/wp-content/uploads/2022/02/s3-473x1024.png" alt="" width="281" height="608" /> <img class="alignnone wp-image-3043" src="https://c1ctech.com/wp-content/uploads/2022/02/s2-473x1024.png" alt="" width="284" height="615" />