Facebook authentication with Azure Mobile App in Xamarin Android

Facebook authentication with Azure Mobile App in Xamarin Android

 

Short introduction

Microsoft Azure cloud platform offers Mobile Apps as a backend for mobile applications.

In this post I would like to show how easily you can add Facebook authentication using Azure Mobile App as an authentication provider.

Azure Mobile App integration with Xamarin Android

What do I need to start?

1) Visual Studio 2013 Community (for free) or higher

2) Microsoft Azure subscription (you can test it for free here)

3) Xamarin Android subscription (you can test it for free here)

4) Android Phone or Xamarin Android Player Emulator (download here)

5) Facebook account

6) Configured Azure Mobile App in Azure Portal (please see previous “Microsoft Azure Mobile Apps with Xamarin Android – jump start” post)

1) On Azure Portal select your previously created Mobile App:

facebookAzure1

a) Click User Auth panel:

facebookAzure2

2) Create and register your app on Facebook Developers portal:

a) Sign in:

facebookAzure3

b) After that click “My Apps” one the top bar and select “Add a New App”:

facebookAzure4

c) Select Android mobile app:

facebookAzure5

d) Insert the name of you app:

facebookAzure6

e) Choose category for you app. “Is this a test version of another app” option should be set to “no”. After that click “Create App Id”:

facebookAzure7

f) Your app is created. Dismiss quick start and select “My Apps” on the top bar and choose newly created app:

facebookAzure8

g) Now you can see that you have created new app. It is not activated yet (white ball near app name is white not green):

facebookAzure9

h) Now we must integrate our Facebook application with Azure Mobile App. In Azure Portal you can see your app url. For me it is: https://testerapp-code.azurewebsites.net

facebookAzure10

Click “Settings” on the left bar, you should see page like below. Insert your e-mail address and click “Add Platform”:

facebookAzure11

Choose “Website”:

facebookAzure12

Insert URL of your Azure Mobile App (“App Domains” section should also be filled):

facebookAzure13

Now we must insert redirect OAuth Reirect Uri. Go to “Advanced” tab and scroll down. Set “Client OAtuh Login”  and “Embedded Browser OAuth Login” to “yes”.

You will have to also paste the “Valid OAuth redirect URIs” (the same one like in Azure Portal, please see screen below):

facebookAzure14

Click “Save Changes”. Now you can publish your app! Go to “Status & Review” section:

Select “yes” option opposite “Do you want to make this app…” information:

facebookAzure15

Done! Your Facebook app is ready! Now we must connect it with Azure Mobile App.

1) Go to Azure Portal and select you Mobile App. Then insert App ID and App Secret from “Settings” from Facebook Developer portal. Click “Save”:

facebookAzure16

Great. Now the last thing we should do is check Facebook login in the Xamarin Android mobile application:

a) Open you previous Xamarin Android project (please see previous post named “Microsoft Azure Mobile Apps with Xamarin Android – jump start”) or download it from Azure Portal:

facebookAzure17

b) Open the project in Visual Studio and add below code as described:

Add this variable to “ToDoActivity”:

private MobileServiceUser user;

facebookAzure18

Add “Authenticate” method to the “ToDoActivity”:

private async Task Authenticate()

{

try

{

user = await client.LoginAsync(this, MobileServiceAuthenticationProvider.Facebook);

CreateAndShowDialog(string.Format("you are now logged in - {0}", user.UserId), "Logged in!");

}

catch (Exception ex)

{

CreateAndShowDialog(ex, "Authentication failed");

}

}

 

facebookAzure19
Add this line to “OnCreate” method:

await Authenticate();  

facebookAzure20

Thats it! Rebuild solution and run the app.

1) After login Facebook will ask you about permissions for previously created app. If you confirm, you are in!

facebookAzure21

facebookAzure22

facebookAzure23

Sum up

In this post you can learn how to integrate your Azure Mobile App with Facebook to enable users to sign in with Facebook in Xamarin Android mobile application.

Hope it will help. 🙂

Advertisements