Xamarin Mobile Apps Authentication using Xamarin.Auth -Facebook

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.

  • 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.

  • 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().

  • 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.

  • 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.

You can see the sample code in the Git Repository.

Walking Tree 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

Related Posts

Comments (1)

Very useful article, Thanks a lot 😀

Leave a comment

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.