Authenticating users with Social Accounts using Azure Mobile Apps

Overview

In almost every Mobile App, you would find a user login (or Sign In) and registration (or Sign Up) as a key feature. Registration can be achieved by prompting the user to enter his/her personal details (for example name, phone number, email, etc.) in a simple form by storing them in the custom Database. Depending on the need, sometimes filling up the form could be a reason why someone may like to defer on boarding with you. And hence providing an alternate option by making use of third party authentications like Google, Facebook, Twitter etc., for the user registration is an excellent choice.

App Service Authentication / Authorization is a feature provided by Azure that allows users to sign in to your application with the single line of code. In this blog, you will develop a xamarin.android application and integrate it with Azure Mobile App (one of the Azure App Service type ) for authenticating users with Google, Facebook and Twitter accounts.

Prerequisites

• Familiarity with developing Xamarin.Android applications
• Familiarity with Azure
• Familiarity with Azure App Services and Azure Mobile App ( https://docs.microsoft.com/en-us/azure/app-service/app-service-value-prop-what-is )

Steps

You need to follow the below steps to achieve authentication of social accounts ( Gmail, Facebook and Twitter ) in Xamarin.Android application using Azure Mobile App.

1. Setup Azure Mobile Apps – For hosting mobile app backends.
2. Register Application with the identity providers
3. Configure identity providers with respective values
4. Integrating Azure Mobile Apps in Xamarin.Android Application

Setup Azure Mobile Apps – For hosting mobile app backend

• Sign into Azure Portal ( if you don’t have an account Signup by clicking here).

• Create Mobile app in Azure by clicking on the + icon the left sidebar and select the Web + Mobile ? Mobile App and then fill the required fields ( in the current example – App name chosen as ‘AzureMobileAuthentication’ ) the corresponding section as shown below and finally click on create button.

• You will see the following message in the Notifications area once the Mobile App i.e., AzureMobileAuthentication is created successfully in Azure.

• Click on the All resources icon in the left sidebar and select AzureMobileAuthentication application as shown below.

• Click on the Overview section. Inside Essentials section , note down the value of the URL as shown in below picture.

NOTE:  

• This URL value i.e., https://azuremobileauthentication.azurewebsites.net/  needs to be entered in ALLOWED EXTERNAL REDIRECT URLS field as shown in Figure-9.

• This URL value i.e., https://azuremobileauthentication.azurewebsites.net/ needs to be appended at the start of the RedirectURL of respective identity provider which is covered in Step 2 of this article.

• Scroll down to Settings section, and click on Authentication/Authorization option as shown below.

• • Set App Service Authentication to On and click on Save button.

• You would see the below screen with identity providers not configured.

• Configuring Identity providers are explained in the “Register Application with the Identity providers section”.

Register Application with the identity providers

In this section , you’ll register application i.e., AzureMobileAuthentication with various identity providers i.e., Google , Facebook and Twitter.

For Google

Follow the steps in the Registering on Gmail Developer portal section of this article.

For Twitter

Follow the steps in the Registering on Twitter Developer portal section of this article.

For Facebook

Follow the steps in the Registering on Facebook Developer portal section of this article.

NOTE:  

• In the Authorized redirect URIs section , For Google enter the following value

          https://azuremobileauthentication.azurewebsites.net//.auth/login/google/callback

• In the Authorized redirect URIs section , For Facebook enter the following value

          https://azuremobileauthentication.azurewebsites.net//.auth/login/facebook/callback

• In the Authorized redirect URIs section , For Twitter enter the following value

          https://azuremobileauthentication.azurewebsites.net//.auth/login/twitter/callback

Configure identity providers with respective values

• Log in back to Azure Portal to configure identity providers for the application.
• Click on the corresponding providers and give the key and secret values and then click on OK.
• For example , in the below screen you can observe how to configure the values for Google.
• Now you can see the window with Configure message, below the respective Identity provider.

• Add EXTERNAL REDIRECT URLS as shown below and click on Save.  

• You’ve successfully set up Google , Facebook and Twitter Identity Providers in Azure Mobile App.  In the next section , you’ll integrate Azure Mobile App with Xamarin.Android application.

Integrating Azure Mobile Apps in Xamarin.Android Application

• Create a Xamarin.Android application and add a nuGet package Microsoft.Azure.Mobile.Client to your application.

• Initialize the MobileService Client in OnCreate() method shown below by providing Azure Mobile App URL i.e., https://azuremobileauthentication.azurewebsites.net/

• Create a button and provide a click event for the button and add a click event to launch the sign-in form for Google identity provider. (Here we are using await keyword so make sure that click event should be async.). Similarly, you can add separate buttons for twitter and Facebook to sign in from the respective providers.

• That’s it! Run the application to authenticate users from Google, Facebook and Twitter accounts.

Summary

This article explained how to develop an xamarin.android application and integrate it with Azure Mobile App for authenticating users with Google, Facebook and Twitter accounts.