NotifyMe – authentication

Today I want to present you an authentication mechanism with Facebook provider using App Service Authentication from Microsoft Azure App Service.

In the beginning we have to create new Microsoft Azure component via portal:

Then select Mobile App component in Web + Mobile category.

Then you will be asked for filling form which is presented below. You have to select Azure subscription, resource group and app service plan.

A few seconds later your new component is available for use so we can configure authentication mechanism.

Open Authentication / Authorization  section in component and select Facebook provider.

The last step you have to do in portal is provide application key and ID in form below. In this step you can also define scopes where logged user will has access via mobile application.

How to collect application ID and key?
Just log into Facebook Developers site.

There you can find ability to register your own application which will be using Facebook services.

After successful registration your application is visible in your applications section.

On application Dashboard get App ID and App Secret in order to finish configuration.

Don’t forget to set public access for your application if you want to authenticate other accounts than application owner’s account.

To achieve that, open App Review section and turn on Make public option.


In case of successful authentication provider wants to inform you about it sending proper http request. To get that confirmation you have to set specific endpoint address in your service.

For this purpose add new product called Facebook Login at portal and fill  Valid OAuth redirect URIs. Correct format of endpoint address is:
https://{app-name}.azurewebsites.net/.auth/login/facebook/callback

Configuration done. Now we can create some code 🙂

In Android application just call LoginAsync method from MobileServiceClient in main activity for logging.

For button which you can see at screenshot above is binded following command:

 public ICommand LoginCommand
        {
            get
            {
                return loginCommand ?? (loginCommand = new RelayCommand(async () =>
                {
                    var success = await App.Authenticator.Authenticate();
                    if (success)
                    {
                        NavigationService.NavigateTo(ViewTypes.FriendsPage);
                    }
                }));
            }
        }

User of application will be redirected into WebView where he have to pass logging credentials.

MobileServiceUser user = await MobileServiceClientWrapper.Instance.Client.LoginAsync(this, MobileServiceAuthenticationProvider.Facebook);

 

After successful authentication user will be redirected to next view. To do that we have to implement INavigationService interface as I said in previous post.

public class NavigationService : INavigationService
	{
		private readonly Dictionary<string, Type> registeredPages = new Dictionary<string, Type>();
		private NavigationPage navigation;
		
		public string CurrentPageKey
		{
			get
			{
				if (navigation.CurrentPage == null)
				{
					return null;
				}
				
				var pageType = navigation.CurrentPage.GetType();
				
				return registeredPages.ContainsValue(pageType)
					                  ? registeredPages.First(p => p.Value == pageType).Key
						                  : null;
			}
		}
		
		public void GoBack()
		{
			navigation.PopAsync();
		}
		
		public void NavigateTo(string pageKey)
		{
			NavigateTo(pageKey, null);
		}
		
		public void NavigateTo(string pageKey, object parameter)
		{
			if (registeredPages.ContainsKey(pageKey))
			{
				var type = registeredPages[pageKey];
				
				var page = App.Container.GetInstance(type, Guid.NewGuid().ToString());
				navigation.PushAsync(page as Page);
			}
		}
		
		public void Configure(string pageKey, Type pageType)
		{
			if (registeredPages.ContainsKey(pageKey))
			{
				registeredPages[pageKey] = pageType;
			}
			else
			{
				registeredPages.Add(pageKey, pageType);
			}
		}
		
		public void Initialize(NavigationPage navigation)
		{
			this.navigation = navigation;
		}
	}

In next post I will tell you about App Service Token Store. Knowledge about it will be useful for achieving next milestone of application. Selecting facebook friend.

Leave a Reply

Your email address will not be published. Required fields are marked *