Xamarin

Xamarin Android - Login With Facebook Authentication

Introduction

Facebook Login is an easy way for users to log in. Facebook users can grant permissions to our app; thereby retrieving all the user information.

Let’s start

Before starting Android Application creation, we need to register Facebook Developer account's new Application.

Step 1

Go to https://developers.facebook.com. Check the page right side corner +Add a New app. Now, click the button, open one more Window for app creation. It asks for Display Name and Contact Email, followed by clicking Create App ID button and then finally asks for security information. Check option afterwards and create your own app ID for our Application name.

 

  

Step 2

Now, go to AppName->Settings->Basic. When it is clicked, it shows an App ID and some data is retrieved. Now, at the bottom of the page , Add Platform and click this button.

 

Step 3

Afterwards, select the platform for an Android, followed by giving the Package name, Class Name and Key Hashes [Create Key Link . http://www.c-sharpcorner.com/article/xamarin-android-create-an-sha-1-key-for-google-map-app-deve/

 

 

Step 4

Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App.

Select Blank App. Now, give the Project Name and Project Location.

 

Step 5

Now, go to Solution Explorer-> Project Name-> References. Right click to Manage Nuget Packages, followed by opening new Dialog box. This dialog box helps to search Facebook Android, followed by installing Xamarin.Facebook.Android Packages.

 

Step 6

Open Solution Explorer-> Project Name->Resources->layout->Main.axml. Click Open Design View.

 

AXML code 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   
  5.    android:orientation="vertical"  
  6.   
  7.    android:layout_width="match_parent"  
  8.   
  9.    android:layout_height="match_parent">  
  10.     <com.facebook.login.widget.LoginButton  
  11.   
  12.    android:id="@+id/fblogin"  
  13.   
  14.    android:layout_width="wrap_content"  
  15.   
  16.    android:layout_height="wrap_content"  
  17.   
  18.    android:layout_marginTop="40dp"  
  19.   
  20.    android:layout_gravity="center_horizontal" />  
  21.     <com.facebook.login.widget.ProfilePictureView  
  22.   
  23. android:id="@+id/ImgPro"  
  24.   
  25. android:layout_width="150dp"  
  26.   
  27. android:layout_height="150dp"  
  28.   
  29. android:layout_marginTop="20dp"  
  30.   
  31. android:layout_gravity="center_horizontal" />  
  32.     <TextView  
  33.   
  34.    android:text="First Name"  
  35.   
  36.    android:textAppearance="?android:attr/textAppearanceMedium"  
  37.   
  38.    android:layout_width="wrap_content"  
  39.   
  40.    android:layout_height="wrap_content"  
  41.   
  42.    android:id="@+id/TxtFirstname"  
  43.   
  44.    android:layout_centerHorizontal="true"  
  45.   
  46.    android:layout_gravity="center_horizontal"  
  47.   
  48.    android:layout_marginTop="20dp" />  
  49.     <TextView  
  50.   
  51. android:text="Last Name"  
  52.   
  53. android:textAppearance="?android:attr/textAppearanceMedium"  
  54.   
  55. android:layout_width="wrap_content"  
  56.   
  57. android:layout_height="wrap_content"  
  58.   
  59. android:id="@+id/TxtLastName"  
  60.   
  61. android:layout_centerHorizontal="true"  
  62.   
  63. android:layout_gravity="center_horizontal"  
  64.   
  65. android:layout_marginTop="10dp" />  
  66.     <TextView  
  67.   
  68. android:text="User Name"  
  69.   
  70. android:textAppearance="?android:attr/textAppearanceMedium"  
  71.   
  72. android:layout_width="wrap_content"  
  73.   
  74. android:layout_height="wrap_content"  
  75.   
  76. android:id="@+id/TxtName"  
  77.   
  78. android:layout_centerHorizontal="true"  
  79.   
  80. android:layout_gravity="center_horizontal"  
  81.   
  82. android:layout_marginTop="10dp" />  
  83. </LinearLayout>  

Step 7

Now, open Solution Explorer-> Project Name->MainActivity.cs. Click Open CS code page view, followed by adding namespaces given below.

 

using Xamarin.Facebook.Login.Widget;

Step 8

Add public class MainActivity: Activity,IFacebookCallback Interface.

 

Step 9

Create new variables followed by assigning all the variables values.

 

C# code 

  1. private ICallbackManager mFBCallManager;  
  2. private MyProfileTracker mprofileTracker;  
  3. private TextView TxtFirstName;  
  4. private TextView TxtLastName;  
  5. private TextView TxtName;  
  6. private ProfilePictureView mprofile;  
  7. LoginButton BtnFBLogin;  
  8. protected override void OnCreate(Bundle bundle) {  
  9.     base.OnCreate(bundle);  
  10.     FacebookSdk.SdkInitialize(this.ApplicationContext);  
  11.     mprofileTracker = new MyProfileTracker();  
  12.     mprofileTracker.mOnProfileChanged += mProfileTracker_mOnProfileChanged;  
  13.     mprofileTracker.StartTracking();  
  14.     // Set our view from the "main" layout resource  
  15.     SetContentView(Resource.Layout.Main);  
  16.     BtnFBLogin = FindViewById < LoginButton > (Resource.Id.fblogin);  
  17.     TxtFirstName = FindViewById < TextView > (Resource.Id.TxtFirstname);  
  18.     TxtLastName = FindViewById < TextView > (Resource.Id.TxtLastName);  
  19.     TxtName = FindViewById < TextView > (Resource.Id.TxtName);  
  20.     mprofile = FindViewById < ProfilePictureView > (Resource.Id.ImgPro);  
  21.     BtnFBLogin.SetReadPermissions(new List < string > {  
  22.         "user_friends",  
  23.         "public_profile"  
  24.     });  
  25.     mFBCallManager = CallbackManagerFactory.Create();  
  26.     BtnFBLogin.RegisterCallback(mFBCallManager, this);  
  27. }   
 

C# code 

  1. public void OnCancel() {}  
  2. public void OnError(FacebookException p0) {}  
  3. public void OnSuccess(Java.Lang.Object p0) {}  
  4. void mProfileTracker_mOnProfileChanged(object sender, OnProfileChangedEventArgs e) {  
  5.     if (e.mProfile != null) {  
  6.         try {  
  7.             TxtFirstName.Text = e.mProfile.FirstName;  
  8.             TxtLastName.Text = e.mProfile.LastName;  
  9.             TxtName.Text = e.mProfile.Name;  
  10.             mprofile.ProfileId = e.mProfile.Id;  
  11.         } catch (Java.Lang.Exception ex) {}  
  12.     } else {  
  13.         TxtFirstName.Text = "First Name";  
  14.         TxtLastName.Text = "Last Name";  
  15.         TxtName.Text = "Name";  
  16.         mprofile.ProfileId = null;  
  17.     }  
  18. }  
  19. protected override void OnActivityResult(int requestCode, Result resultCode, Android.Content.Intent data) {  
  20.     base.OnActivityResult(requestCode, resultCode, data);  
  21.     mFBCallManager.OnActivityResult(requestCode, (int) resultCode, data);  
  22. }   
 

C# code 

  1. public class MyProfileTracker: ProfileTracker {  
  2.     public event EventHandler < OnProfileChangedEventArgs > mOnProfileChanged;  
  3.     protected override void OnCurrentProfileChanged(Profile oldProfile, Profile newProfile) {  
  4.         if (mOnProfileChanged != null) {  
  5.             mOnProfileChanged.Invoke(this, new OnProfileChangedEventArgs(newProfile));  
  6.         }  
  7.     }  
  8. }  
  9. public class OnProfileChangedEventArgs: EventArgs {  
  10.     public Profile mProfile;  
  11.     public OnProfileChangedEventArgs(Profile profile) {  
  12.         mProfile = profile;  
  13.     }  
  14.     Extract or delete HTML tags based on their name or whether or not they contain some attributes or content with the HTML editor pro online program.  
  15. }   

Step 10

Click Solution Explorer->Project Name->Properties-> AndroidManifest.xml file.

XML code 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.FacebookAuth.FacebookAuth" android:versionCode="1" android:versionName="1.0">  
  3.     <uses-sdk android:minSdkVersion="16" />  
  4.     <application android:label="FacebookAuth">  
  5.         <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="YOUR API KEY" /> </application>  
  6. </manifest>  

Step 11

Press F5 or build and run the Application.

 

Finally, we successfully created Xamarin Android app login with Facebook authentication.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs