What is Facebook Login: by integrating facebook log in our app we can login a user by their existing facebook account and get the user information Like Profile picture,User Name,Email,birthday,gender etc. So that we can identify a user.
In this tutorial, we will create a simple android app by implementing Facebook login to fetch user’s name & profile picture, Email , gender and display them on simple Layout.
STEP 1: Creating NEW Android Project.
-Create a new project in android studio name it as myfblogin and package name is com.khushi.myfblogin.
-And i have activity named MainActivity.java and its layout file name is activity_main.xml.
STEP 2: Creating New App in facebook developer.
-(you must have a facebook account.)
-Goto http://developer.facebook.com/
-Click on My Apps> Add A New App.
-now give the name to your app and type email.
-Click on Create App.
-Now note down your App ID.
STEP 3: Integrating Facebook SDK: The Facebook Login SDK for Android is a component of the Facebook. To use the Facebook Login SDK in your project, make it a dependency in Maven, or download it. Choose the method you prefer,i m using it with maven dependency.
-Download and login into your facebook app.
-In your project, open your_app > Gradle Scripts > build.gradle (Project) make sure the following repository is listed in the buildscript { repositories {}}:
jcenter()
-In your project, open your_app > Gradle Scripts > build.gradle (Module: app) and add the following implementation statement to the dependencies{} section to depend on the latest version of the Facebook Login SDK:
implementation 'com.facebook.android:facebook-login:[5,6)'
-Build your project.
STEP 4: Edit Your Manifest: Add the following uses-permission element after the application element:
<uses-permission android:name="android.permission.INTERNET"/>
-Add the following meta-data element, an activity for Facebook, and an activity and intent filter for Chrome Custom Tabs inside your application element:
<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>
STEP 5: Edit your Resources file: Open your- app>src>values>strings.xml file.
<string name="app_name">myfblogin</string> <string name="facebook_app_id">1386921814984169</string> <string name="fb_login_protocol_scheme">fb1386921814984169</string> <string name="email">Email: </string> <string name="name">Facebook Name: </string> <string name="gender">Gender: </string>
-Add the following: here type yours app id and fb_login_protocol_scheme(simply type fb before app id).
STEP 6: Adding details in your facebook app.
6.1 Associate Your Package Name and Default Class with Your App:
-GOTO: https://developers.facebook.com/apps/[your app id]/settings/basic/
-You need to provide platform information for each platform you deliver your app on. For each platform, go to Settings > Basic and click Add Platform.
-Add your Package Name: com.khushi.myfblogin
-Add your class name: com.khushi.myfblogin.MainActivity.java
6.2 Provide the Development and Release Key Hashes for Your App
Windows:You will need the following:
For Generating SHA1 on Windows we need to:
1) Download Openssl library.
– Download it from here(link:https://drive.google.com/open?id=1aq4UFJkJtQYDEnlW6aExdzKFbzZm6QGv).
– And Extract it to path C:\Program Files\
– Run command in command prompt:
set OPENSSL_CONF=C:\Program Files\\OpenSSL\bin\openssl.cfg
2) Make sure Java Runtime Environment is installed. Then Run the following command in Command Prompt:
"PATH_TO_JAVA_BIN\keytool.exe" -exportcert -alias androiddebugkey -keystore "C:\Users\YOUR_USER_NAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | ""PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
In the above command make changes according to your system. In our case Its as follows:
YOUR_USER_NAME= khushi
PATH_TO_OPENSSL_LIBRARY = C:\Program Files\OpenSSL
PATH_TO_JAVA_BIN = C:\Program Files\Java\jre1.8.0_251\bin
The final command will be as follows:
"c:\Program Files\Java\jre1.8.0_251\bin\keytool.exe" -exportcert -alias androiddebugkey -keystore "C:\Users\Khushi\.android\debug.keystore" | "C:\Program Files\OpenSSL\bin\openssl" sha1 -binary | "C:\Program Files\OpenSSL\bin\openssl" base64
After running this command it will ask for the android debug keystore password.
The password is :
android
You wil get the key hash as something similar to:
HCSloI6qlnHXBWZLScyWrW+MUP0=
-This command will generate a 28-character key hash unique to your development environment. You will need to provide a development key hash for the development environment of each person who works on your app.
6.3 Enable Single Sign On for Your App:
(If you would like your Android Notifications to have the ability to launch your app, enable single sign on.)
STEP 7: Add the Facebook login button: The simplest way to add Facebook Login to your app is to add LoginButton from the SDK. 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.
<com.facebook.login.widget.LoginButton android:id="@+id/login_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center_horizontal" /></pre>
STEP 8: Add the following code in your activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:id="@+id/layout_info" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/login_button" android:layout_marginBottom="20dp" android:orientation="vertical" android:visibility="gone"> <com.facebook.login.widget.ProfilePictureView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/email" android:textStyle="bold" /> <TextView android:id="@+id/email" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/name" android:textStyle="bold" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/gender" android:textStyle="bold" /> <TextView android:id="@+id/gender" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </LinearLayout> <com.facebook.login.widget.LoginButton android:id="@+id/login_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center_horizontal" /> </RelativeLayout></pre>
STEP 9: Now open MainActivity.java and do the below modifications-
9.1 Now create a callbackManager to handle login responses by calling CallbackManager.Factory.create.
CallbackManager callbackManager; CallbackManager = CallbackManager.Factory.create();
9.2 Here you should write all the data permission you required.
loginButton.setPermissions(Arrays.asList("public_profile, email, user_birthday,user_gender"));
-To respond to a login result, register a callback with LoginManager.
-You add the LoginManager callback to your activity or fragment’s onCreate() method:
LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { SendGraphRequest(loginResult.getAccessToken()); } @Override public void onCancel() { // App code } @Override public void onError(FacebookException error) { Toast.makeText(MainActivity.this, "error to Login Facebook", Toast.LENGTH_SHORT).show(); } });
-If login succeeds, the LoginResult parameter has the new AccessToken, and the most recently granted or declined permissions. 9.3 onSuccess(...) : And if success then onSucess(...) method is called and in this method we call SendGraphRequest(...) which will fetch user data in JSON OBJECT. 9.4 SendGraphRequest(...): By calling this method we get users data in JSON OBJECT and then this method call setProfileToView(...). 9.5 setProfileToView(...): This method get the data from JSON OBJECT and display it on simple layout. 9.6 onActivityResult(...): Finally, in your onActivityResult method, call callbackManager.onActivityResult to pass the login results to the LoginManager via callbackManager.
package com.khushi.myfblogin; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import com.facebook.AccessToken; import com.facebook.AccessTokenTracker; import com.facebook.CallbackManager; import com.facebook.FacebookCallback; import com.facebook.FacebookException; import com.facebook.GraphRequest; import com.facebook.GraphResponse; import com.facebook.login.LoginManager; import com.facebook.login.LoginResult; import com.facebook.login.widget.LoginButton; import com.facebook.login.widget.ProfilePictureView; import org.json.JSONException; import org.json.JSONObject; import java.util.Arrays; public class MainActivity extends AppCompatActivity { CallbackManager callbackManager; LoginButton loginButton; TextView email,gender,facebookName; ProfilePictureView profilePictureView; LinearLayout infoLayout; AccessTokenTracker accessTokenTracker; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); callbackManager = CallbackManager.Factory.create(); AccessToken accessToken = AccessToken.getCurrentAccessToken(); boolean isLoggedIn = accessToken != null && !accessToken.isExpired(); if(isLoggedIn){ SendGraphRequest(accessToken); } email = (TextView)findViewById(R.id.email); facebookName = (TextView)findViewById(R.id.name); gender = (TextView)findViewById(R.id.gender); profilePictureView = (ProfilePictureView)findViewById(R.id.image); infoLayout = (LinearLayout)findViewById(R.id.layout_info); // infoLayout.setVisibility(View.GONE); loginButton = (LoginButton) findViewById(R.id.login_button); loginButton.setPermissions(Arrays.asList("public_profile, email, user_birthday,user_gender")); LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { SendGraphRequest(loginResult.getAccessToken()); } @Override public void onCancel() { // App code } @Override public void onError(FacebookException error) { Toast.makeText(MainActivity.this, "error to Login Facebook", Toast.LENGTH_SHORT).show(); } }); } private void SendGraphRequest(AccessToken token) { //App code GraphRequest request = GraphRequest.newMeRequest( token, new GraphRequest.GraphJSONObjectCallback() { @Override public void onCompleted(JSONObject object, GraphResponse response) { Log.v("Main", response.toString()); setProfileToView(object); } }); Bundle parameters = new Bundle(); parameters.putString("fields","id,name,email,gender,birthday"); request.setParameters(parameters); request.executeAsync(); //hiding infolayout if iser currently logged out. accessTokenTracker = new AccessTokenTracker() { @Override protected void onCurrentAccessTokenChanged(AccessToken oldAccessToken, AccessToken currentAccessToken) { if (currentAccessToken == null) { infoLayout.setVisibility(View.GONE); //write your code here what to do when user logout } } }; } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { callbackManager.onActivityResult(requestCode, resultCode, data); super.onActivityResult(requestCode, resultCode, data); } private void setProfileToView(JSONObject jsonObject) { try { System.out.println("FB json object : "+jsonObject.toString()); email.setText(jsonObject.getString("email")); gender.setText(jsonObject.getString("gender")); facebookName.setText(jsonObject.getString("name")); profilePictureView.setPresetSize(ProfilePictureView.NORMAL); profilePictureView.setProfileId(jsonObject.getString("id")); infoLayout.setVisibility(View.VISIBLE); } catch (JSONException e) { e.printStackTrace(); } } }
2,086 total views, 8 views today