Xamarin Mobile Apps Authentication using Xamarin.Auth -Facebook

1 2

By Walking Tree Xamarin January 20, 2017

Overview

In the article, Xamarin Mobile Apps Authentication using Xamarin.Auth – Gmail, we explored how to authenticate users with Gmail. In this article, we’ll discuss on how to authenticate user with Facebook using Xamarin.Auth component.

In order to integrate Xamarin.Auth component into our application, we need to follow the below steps.

App needs to be registered with social account server to get Access token.

Authenticating users by making use of Access Token and retrieve basic user information like email id, name, and profile pic etc.

Registering on Facebook Developer portal

So as a first step, we should register an app in Facebook developer to get the permission from the facebook server and which can be achieved by the following steps.

Sign into Facebook Developer portal. Click on the Register button.

Now we can see a popup appears and ask you for accepting the terms and conditions, switch to Yes and then click on Register.
And then again a new popup will be appear, asking you for Creating an App Id, as shown below. Click on Create App ID.
After that, it asks to provide some basic details about app in the new popup as shown below. Give the app name and your Email ID in the corresponding fields and select the category of your app (For the sample application we can choose any category.) and then click on Create App ID.

If you are using an application only for development purpose there is NO need to make the application public. Generally, Facebook operates in a sandbox environment in which you can still authenticate the registered test user(admin) without making the application public so that you can test you application with the registered user credentials.

- If you are ready to go to production then you should make your app public so that any Facebook user can log into the application.

And if you do not make the application public in production mode and when a user tries to log in they will get the below error.

To make your app public in production, click on App review on the left sidebar menu and make your app public, by switching the Make Test app public to Yes.

- You have successfully created an app in Facebook Console and you can also see your AppID at the top of the screen. Now Click on Add Product on the left sidebar menu. It will open a Product setup window. Select Facebook Login by clicking on Get Started as shown below.

In that product window you can see the field Valid OAuth redirect URIs, that could be any valid Uri and should match with Redirect Uri in the oAuth2Authenticator class redirect URI parameter. (We recommend redirect uri as http://www.facebook.com/connect/login_success.html). And then click on save changes.

Your app is successfully integrated with a Facebook developer now you can use this App Id to fetch the data of different users.

Gathering user info from Facebook

Let us make use of the App Id in our application and implement the following code in MainActivity.cs (The process would be same as Gmail but we will use the different parameters for the OAuth2Authenticator class.):

In the previous blog we have implemented a button for Gmail. Now add the following AXML code to LinearLayout inside Main.axml to implement the button for Facebook.

<Button
          android:id="@+id/FacebookButton"
          android:text="Login using Facebook"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

<Button

android:id="@+id/FacebookButton"

android:text="Login using Facebook"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

Add below the line of code to find a button from the view by using the Id attribute and assign it to the variable inside OnCreate().

Button facebookBtn=FindViewById <Button >(Resource.Id.FacebookButton);

1	Button facebookBtn=FindViewById <Button >(Resource.Id.FacebookButton);

Here we use OAuth2Authenticator and OAuth2Request classes, provided by Xamarin.Auth, to implement the application side of the authentication flow with Facebook.

Implement an authentication inside the click event handler for the button.

// you can find following readonly strings in Constants.cs file in the 
//github project
// Pasted it here for ease of reference with the code
public static readonly string FACEBOOK_ID = 
                             "";
public static readonly string FACEBOOK_SCOPE = "";
public static readonly string FACEBOOK_AUTH =
                           "https://m.facebook.com/dialog/oauth/";
public static readonly string FACEBOOK_REDIRECTURL = 
                      "http://www.facebook.com/connect/login_success.html";
public static readonly string FACEBOOK_REQUESTURL = 
        "https://graph.facebook.com/me?fields=id,name,email,picture.type(large)";

facebookBtn.Click += FbAuthentication;

private void FbAuthentication(object sender, EventArgs e)
{
         var auth = new OAuth2Authenticator(
                                     FACEBOOK_ID,
                                     FACEBOOK_SCOPE,   
                                     new Uri(FACEBOOK_AUTH),  
                                     new Uri(FACEBOOK_REDIRECTURL)
                                   );
         auth.AllowCancel = true;
         StartActivity(auth.GetUI(this));  
         //It will fire Once we are done with authentication
         auth.Completed += async (sender, e) =>
         {
            //Fires when authentication is cancelled
             if (!e.IsAuthenticated)
             {
                 //Authentication failed Do something
                 return;
              }
             //Make request to get the parameters access
             var request = new OAuth2Request(
                                             "GET",
                                             new Uri(FACEBOOK_REQUESTURL), 
                                             null,
                                             e.Account);
             //Get response here
             var response = await request.GetResponseAsync();
             if (response != null)
             {
                 //Get the user data here
                 var userData = response.GetResponseText();
             }
         };
}

// you can find following readonly strings in Constants.cs file in the

//github project

// Pasted it here for ease of reference with the code

public static readonly string FACEBOOK_ID =

"";

public static readonly string FACEBOOK_SCOPE = "";

public static readonly string FACEBOOK_AUTH =

"https://m.facebook.com/dialog/oauth/";

public static readonly string FACEBOOK_REDIRECTURL =

"http://www.facebook.com/connect/login_success.html";

public static readonly string FACEBOOK_REQUESTURL =

"https://graph.facebook.com/me?fields=id,name,email,picture.type(large)";

facebookBtn.Click += FbAuthentication;

private void FbAuthentication(object sender, EventArgs e)

{

var auth = new OAuth2Authenticator(

FACEBOOK_ID,

FACEBOOK_SCOPE,

new Uri(FACEBOOK_AUTH),

new Uri(FACEBOOK_REDIRECTURL)

);

auth.AllowCancel = true;

StartActivity(auth.GetUI(this));

//It will fire Once we are done with authentication

auth.Completed += async (sender, e) =>

{

//Fires when authentication is cancelled

if (!e.IsAuthenticated)

{

//Authentication failed Do something

return;

}

//Make request to get the parameters access

var request = new OAuth2Request(

"GET",

new Uri(FACEBOOK_REQUESTURL),

null,

e.Account);

//Get response here

var response = await request.GetResponseAsync();

if (response != null)

{

//Get the user data here

var userData = response.GetResponseText();

}

};

}

With the above code in place, we can authenticate the user with Facebook account and we can also get the user information.

Summary

This article explained how to enable a user to login to a mobile app with their Facebook credentials without signing up for the app. We also discussed accessing the basic user info from the Facebook server using Xamarin.Auth component. And in the subsequent article, we’ll explore how to authenticate users with Twitter using Xamarin.Auth component.

WalkingTree is a pioneer in building enterprise mobile and web applications. Being a Xamarin Consulting Partner, we pride ourselves in providing a native solution to our customers. Do reach out to us with your questions and we will be happy to assist!

References

OAuth2Authenticator & OAuth2Request APIs
Scope parameter of OAuth2Authenticator API
Xamarin Mobile Apps Authentication using Xamarin.Auth – Gmail

Xamarin Mobile Apps Authentication using Xamarin.Auth -Facebook

Overview

Registering on Facebook Developer portal

Gathering user info from Facebook

Summary

References

Comments (1)

Leave a comment Cancel reply

Xamarin Mobile Apps Authentication using Xamarin.Auth -Facebook

<img fetchpriority="high" class="aligncenter wp-image-36885 size-full" src="https://walkingtree.tech/wp-content/uploads/2017/01/fb.jpg" alt="" width="560" height="315" />Overview

Registering on Facebook Developer portal

Gathering user info from Facebook

Summary

References

Related Posts

Comments (1)

Leave a comment Cancel reply

Overview