Step 1:

Create / Register Azure Active Directory Login from Here

Step 2:

Implement Xamarin.Forms Application

After completed your Azure app register, then you can start follow below steps for create xamarin application with Login AD Authentication.


Step 1: Create New Xamarin Forms Application:

Let Start create new Xamarin Forms Project in Visual studio. Open Run ➔ Type Devenev.Exe and enter ➔ New Project (Ctrl+Shift+N)➔ select Blank Xamarin.Forms Portable template



It will automatically create multiple project like Portable, Android, iOS, UWP. First we will start edit portable project then platform specific project

Step 2: Install Microsoft ActiveDirectory nuget Package

Microsoft ADAL provides a Xamarin Portable Class Library with easy to use authentication functionality for.NET client on various platforms including UWP, Xamarin iOS and Xamarin.Android .you can get more info from here ( https://www.nuget.org/packages/Microsoft.IdentityModel.Clients.ActiveDirectory/)

For implement Azure active directory login, we need to install Active Directory Authentication Library, I will show below steps for install ADAL library

Select Solution => Right Click Manage nuget Packages for Solution => Search “Microsoft IdentityModel” => Select Microsoft.IdentityModel.Clients.ActiveDirectory => Select all Project => Click on Install


Step 3: Azure AD Configuration (App.xaml.cs)

I have added azure configuration like ApplicationID,tenantUrl,returnuri and GraphresourceUrI in APP.xaml.cs

In portable project =>open App.xaml.cs = > update all configuration

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;

namespace DevEnvAzure
{
public partial class App : Application
{
// update your Application ID or client ID
public static string ApplicationID = "----dfc6-2089-4e8c-ssss-8d3591736a96";
//modify your Azure tenant
public static string tenanturl = "https://login.microsoftonline.com/<Azure Tenant >
//Update your return url
public static string ReturnUri = "http://DevEnvAzure.microsoft.net";
//No need to change
public static string GraphResourceUri = "https://graph.microsoft.com";
public static AuthenticationResult AuthenticationResult = null;
public App()
{
InitializeComponent();
MainPage = new DevEnvAzure.Login();
}

protected override void OnStart()
{
// Handle when your app starts
}

protected override void OnSleep()
{
// Handle when your app sleeps
}

protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Step 3: Create Login Page (Login.Xaml)

I have created quick and simple login screen. You can modify as per your requirement
Right Click Portable Class Library ➔ Add New Item ➔ Select Xaml Page(Login)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DevEnvAzure"
x:Class="DevEnvAzure.Login">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10" Spacing="10">
<Button Text="" Clicked="Login_OnClicked" Image="login.png" />
</StackLayout>
</ContentPage>

Step 4: Login Click Event (Login.Xaml.cs)

Add LoginClick event in login page code behind file and if login success ,page navigate to home page

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System;
using Xamarin.Forms;

namespace DevEnvAzure
{
public partial class Login : ContentPage
{
public Login()
{
InitializeComponent();
}
private async void Login_OnClicked(object sender, EventArgs e)
{
try
{
var data = await DependencyService.Get<IAuthenticator>()
.Authenticate(App.tenanturl, App.GraphResourceUri, App.ApplicationID, App.ReturnUri);
App.AuthenticationResult = data;
NavigateTopage(data);
}
catch(Exception)
{ }
}

public async void NavigateTopage(AuthenticationResult data)
{
var userName = data.UserInfo.GivenName + " " + data.UserInfo.FamilyName;
await Navigation.PushModalAsync(new HomePage(userName));
}
}
}

Step 4: Create Home Page

I have created quick and simple home screen. You can modify as per your requirement
Right Click Portable Class Library ➔ Add New Item ➔ Select Xaml Page(Homepage)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DevEnvAzure.HomePage">
<Label Text="" x:Name="lblname" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

And modify code behind file like below

using Xamarin.Forms;
namespace DevEnvAzure
{
public partial class HomePage : ContentPage
{
public HomePage(string username)
{
InitializeComponent();
lblname.Text = " Welcome Mr " + username;
}
}
}

Step 5: Create Authentication Interface.

In portable project, Add a new interface for Authentication method. The authentication method will return Authentication result from ADAL , Which contains the AccessToken and user details .

Right Click on PCL project => Select Interface => name as IAuthenticator.cs => Click on Ok

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System.Threading.Tasks;

namespace DevEnvAzure
{
public interface IAuthenticator
{
Task<AuthenticationResult> Authenticate(string tenantUrl, string graphResourceUri, string ApplicationID, string returnUri);
}
}

Step 6: Implement Platform Specific Dependency Service:

We need to implement platform specific dependency services for login authentication .
The below code is Xamarin.Forms DependencyService which maps Authenticator.
[assembly: Dependency(typeof(DevEnvAzure.Droid.Authenticator))]

Android Application:

Add Authenicator clsss in xamarin Android application
Right click Android Project => Select Class=> Name as Authenticator

using Android.App;
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System;
using System.Linq;
using System.Threading.Tasks;
using Xamarin.Forms;
[assembly: Dependency(typeof(DevEnvAzure.Droid.Authenticator))]

namespace DevEnvAzure.Droid
{
class Authenticator : IAuthenticator
{
public async Task<AuthenticationResult> Authenticate(string tenantUrl, string graphResourceUri, string ApplicationID, string returnUri)
{
try
{
var authContext = new AuthenticationContext(tenantUrl);
if (authContext.TokenCache.ReadItems().Any())
authContext = new AuthenticationContext(authContext.TokenCache.ReadItems().FirstOrDefault().Authority);
var authResult = await authContext.AcquireTokenAsync(graphResourceUri, ApplicationID, new Uri(returnUri), new PlatformParameters((Activity)Forms.Context));
return authResult;
}
catch(Exception)
{
return null;
}
}
}
}

Now run your application and see the result like below


UWP Application:

Add Authenicator clsss in xamarin UWP application
Right click UWP Project => Select Class=> Name as Authenticator

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Xamarin.Forms;

[assembly: Dependency(typeof(DevEnvAzure.UWP.Authenticator))]

namespace DevEnvAzure.UWP
{
public class Authenticator : IAuthenticator
{
public async Task<AuthenticationResult> Authenticate(string tenantUrl, string graphResourceUri, string ApplicationID, string returnUri)
{
try
{
var authContext = new AuthenticationContext(tenantUrl);
if (authContext.TokenCache.ReadItems().Any())
authContext = new AuthenticationContext(authContext.TokenCache.ReadItems().First().Authority);
var authResult =
await
authContext.AcquireTokenAsync(graphResourceUri, ApplicationID, new Uri(returnUri),
new PlatformParameters(PromptBehavior.Auto, false));
return authResult;
}
catch(Exception )
{
return null;
}
}
}
}

Now run your application and see the result like below


iOS Application:

Add Authenicator clsss in xamarin iOS application
Right click iOS Project => Select Class=> Name as Authenticator

using System;
using System.Linq;
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using UIKit;
using Xamarin.Forms;
using System.Threading.Tasks;

[assembly: Dependency(typeof(DevEnvAzure.iOS.Authenticator))]
namespace DevEnvAzure.iOS
{
class Authenticator : IAuthenticator
{
public async Task<AuthenticationResult> Authenticate(string tenantUrl, string graphResourceUri, string ApplicationID, string returnUri)
{
try
{
var authContext = new AuthenticationContext(tenantUrl);
if (authContext.TokenCache.ReadItems().Any())
authContext = new AuthenticationContext(authContext.TokenCache.ReadItems().FirstOrDefault().Authority);
var authResult = await authContext.AcquireTokenAsync(graphResourceUri, ApplicationID, new Uri(returnUri),
new PlatformParameters(UIApplication.SharedApplication.KeyWindow.RootViewController));
return authResult;
}
catch (Exception)
{
return null;
}
}
}
}

Now run your application and see the result like below


Issues and Solution:

I have shared below some implementation, Development, issues and solution



Error: Could not Install Package Microsoft.IdentityModel.Client.ActiveDirectory

While trying adding Nuget package for Azure Active Directory ('Microsoft.IdentityModel.Clients.ActiveDirectory 3.13.8') , it is possible you will receive an error complaining that the package does not contain any assembly references which are compatible with the targets of your PCL project. The error will be something like below.

Error:

Could not install package 'Microsoft.IdentityModel.Clients.ActiveDirectory 3.13.8'. You are trying to install this package into a project that targets '.NETPortable,Version=v4.5,Profile=Profile259', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.

Solution:

ADAL does not support windows phone 8.1 version so we need to follow below steps for resolve above shown issue
Remove Installed all Nuget package
Removing the windows Phone 8.1 project from solution
Remove target platform from the PCL project

Step 1: Remove Installed all Nuget package

Go To solution > Right Click > Manage Nuget Packages > Click on Installed tab > uninstall all installed package like (Including Xamarin.Form etc ) .

If you are not uninstall the package and trying to change the targeted platforms by removing the target Windows Phone 8.1 you would get an error.


Step 2: Remove the Windows 8.1 project from Solution

ADAL does not support Windows Phone 8.1 so you need remove windows 8.1 project from solution . Only removing the Windows Phone 8.1. project from your solution will not resolve this issue. You still need follow next steps as well

Step 3: Remove target platform from the PCL project

Right click on your PCL project > Click on “Properties” > Go to the tab “Library” > You can see list of targeted platforms > Press the button “Change” > uncheck the target “Windows Phone 8.1” and “ Windows Phone Silvelight 8” > Press the “OK” button

Wait a few seconds and the dialog will be gone and the target is removed from the PCL project.



Now you can able to install ADAL nuget package from your solution


Error:

Micrsoft.identityModel.Clients.ActiveDirectory.AdalServiceException:AADSTS65005:The Client application has requested access to resource ‘https://graph.microsoft.com’.the request has failed because theclient has not specific this resource in its requredResourceAccss list. If you get above error means ,try below solution


Solution:

You are missed to give Grand permission to your application so We need to give permission to access application from mobile or web so follow below steps for grand permission. Select on newly created application => Select on Required Permission => Click on Grand permission.


Related Article:

Register Identity Provider For New OAuth Application from here( http://www.c-sharpcorner.com/article/register-identity-provider-for-new-oauth-application/ )

OAuth Login Authenticating With Identity Provider In Xamarin.Forms from here( http://www.c-sharpcorner.com/article/oauth-login-authenticating-with-identity-provider-in-xamarin-forms/)

Create Azure Mobile Apps Service from here( http://www.c-sharpcorner.com/article/create-azure-mobile-apps-service/ )

Introduction:

We all knew xamarin and visual studio is great technology. You are no longer restrict develop only phone and tablet now you can develop Android wearable apps using xamarin. Android wear was officially released by google on 2014.

In this article, I will show how to setup and create Android Wearable App using xamarin ,



System Requirements

Mac / Windows 7++ Machine with 8 GB RAM.

Xamarin Studio 5.0 or new version/ Visual Studio 2012 or new version.

Visual Studio required professional or higher version because the Xamarin extension for Visual Studio will only be supported for non-express editions. Download Visual studio from here( https://www.xamarin.com/visual-studio)

Install Android SDK & Tools:

You can start open visual studio in Windows machine. Open Visual Studio (Run => type “Devenev.exe”)



You can verify all required SDK was installed in Visual Studio. If you do not have the latest SDK and tools installed, download the required SDK tools and the API. Go to Tools menu =>Android =>Android SDK manager. Android SDK manager window will visible in your system like below


Create Android Wear emulator

In order for us to run the android wear application we need to first setup an emulator. You can create one by following these few steps. Go to Tools in Visual Studio > Andriod > Andriod Emulator Manager. See below



Following screen, you will get know already created emulator. if you want to create new emulator click on “Create “button



After click on create button and provide following information AVD name, Device Name, chose correct Target platform and click on Create.



If you get any error "No CPU /ABI system image available for this target” means target SDK not installed. you can chose different target or install specific target SDK. when creating the device, make sure that the correct target of the OS is selected, but especially that the CPU is Android Wear ARM. after creating emulator you will receive following message for confirmation



After click on Okay you will get following screen for list of emulator


Create New Project:

You can follow below steps for Create your first Android Wear app and run it on a Wear emulator . File => New => Project. you can select project as Android and select template is Wear App. Now automatically project and wear reference will added .



See below screen for project structure and reference



In the Solution ,included xamarin android wearable reference and icon for tile image ,3 layout for rectangle and round watch and phone layout with common MainActivity class

Round / Rectangle Main.xaml:

I have included sample reference axaml code .you can modify as per your requirement

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:deviceIds="wear_round">
<Button
android:id="@+id/msdnbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/msdn" />
<Button
android:id="@+id/csharpbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/csharp" />
<Button
android:id="@+id/bloggerbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/blogger" />
</LinearLayout>

MainActivity.CS

In MainActivity Class, create onbutton click and show the notification

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android.Support.Wearable.Views;
using Android.Support.V4.App;
using Android.Support.V4.View;
using Java.Interop;
using Android.Views.Animations;

namespace DevEnvWear
{
[Activity(Label = "DevEnvWear", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
int count = 1;

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
var v = FindViewById<WatchViewStub>(Resource.Id.watch_view_stub);
v.LayoutInflated += delegate
{
// Get our button from the layout resource,
// and attach an event to it
Button buttonmsdn = FindViewById<Button>(Resource.Id.msdnbutton);
Button buttoncsharp = FindViewById<Button>(Resource.Id.csharpbutton);
Button buttonblog = FindViewById<Button>(Resource.Id.bloggerbutton);
buttonmsdn.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("MSDN")
.SetContentText("https://social.msdn.microsoft.com/profile/j%20suthahar/")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
buttoncsharp.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("C# Corner")
.SetContentText("http://www.c-sharpcorner.com/members/suthahar-j")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
buttonblog.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("My Blog")
.SetContentText("www.devenvexe.com")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
};
}
}
}

Output Screen:

You can refer below screen for output. Click on tile => click on any button => swipe to home and see the notification




Microsoft Azure Active Directory (Azure AD) to add authentication and authorization to Our web, mobile Application and web APIs. In this article I shown below how to create / implement Azure Active Directory authentication login using xamarin.Forms . I have seen many article for the process of moving the management experience for all Azure services from the ‘classic’ portal at https://manage.windowsazure.com ,Here I am showing new portal at https://portal.azure.com for Azure AD Application creation and User creation .Azure Subscription Login
The New Azure Portal is that you don’t need an azure subscription to use it. You and other administrators in your organization can manage your tenant in the new portal without any of you needing to get and manage to an azure subscription. You can directly sign -in as usual with your work or school account

Azure Active Directory Application creation:

I will show below steps for application creation, user creation and permission configuration. While implement mobile application, we need Client ID, tenant, return url so here, I will show how to get all configuration information from following steps.

Step 1: App Registration:

Login to Microsoft Azure Portal https://portal.azure.com and choose Azure Active Directory from the sidebar.



The under Manage Select on App Registration => Click on + Add button

Provide the following details, name for the Application, select the Application Type as Native(Mobile application) or Web app/API, and for Sign-on URL enter your application URL and Click on Create


Step 2: App Required Permissions:

We need to give permission to access application from mobile or web so follow below steps for grand permission. Select on newly created application => Select on Required Permission => Click on Grand permission.


Step 3: Create new user:

Create user for access the application. choose Azure Active Directory from the sidebar => Select Users and groups =>Select All Users=> Click on +Add =>provide the user details as below Name of user, user name (email id).


Step 4: Get Client ID and Redirect Url:

The Client Id is unique identifier for our application. We need client id for implement Azure AD authentication in mobile application so you can follow below steps for get client id. choose Azure Active Directory from the sidebar =>Select App registrations =>Select newly created application => Click on property = > Use Application Id as client ID

Click on Redirect Url under settings =>get redirect url / update redirect url



Step 5: Get Tenant:

We already register our application in a Azure AD tenant. We need tenant ID for implement AD authentication in mobile application. you can follow below steps get tenant id.

choose Azure Active Directory from the sidebar => Select on Properties => use Directory ID as tenant ID



You can implement Active directory login in Web ,Mobile ,Windows application using Client ID ,Redirect Url and Tenant ID ..

Issue :

While trying adding Nuget package for Azure Active Directory ('Microsoft.IdentityModel.Clients.ActiveDirectory 3.13.8') , it is possible you will receive an error complaining that the package does not contain any assembly references which are compatible with the targets of your PCL project. The error will be something like below.

Severity
Description
Error
Could not install package 'Microsoft.IdentityModel.Clients.ActiveDirectory 3.13.8'. You are trying to install this package into a project that targets '.NETPortable,Version=v4.5,Profile=Profile259', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.

Solution:

ADAL does not support windows phone 8.1 version so we need to follow below steps for resolve above shown issue

Remove Installed all Nuget package
Removing the windows Phone 8.1 project from solution
Remove target platform from the PCL project
Step 1: Remove Installed all Nuget package
Go To solution > Right Click > Manage Nuget Packages > Click on Installed tab > uninstall all installed package like (Including Xamarin.Form etc ) .
If you are not uninstall the package and trying to change the targeted platforms by removing the target Windows Phone 8.1 you would get an error.



Step 2: Remove the Windows 8.1 project from Solution

ADAL does not support Windows Phone 8.1 so you need remove windows 8.1 project from solution . Only removing the Windows Phone 8.1. project from your solution will not resolve this issue. You still need follow next steps as well

Step 3: Remove target platform from the PCL project

Right click on your PCL project > Click on “Properties” > Go to the tab “Library” > You can see list of targeted platforms > Press the button “Change” > uncheck the target “Windows Phone 8.1” and “ Windows Phone Silvelight 8” > Press the “OK” button

Wait a few seconds and the dialog will be gone and the target is removed from the PCL project.



Now you can able to install ADAL nuget package from your solution



Azure Mobile App Service is easy to rapidly build engaging cross-platform and native apps for iOS, Android, Windows. We can use implement following mobile feature using Azure and create backend logic in C# or Node.Js

Store data in Azure Cloud Storage

Store image using blob storage

Azure AD Authentication

Send Push notification

Access on-premises resource

This article will be an step by step guide on how to create mobile apps service using azure.


Prerequisites

If you are not having Azure account, you can click here for a free trial azure subscription.

If you want to get start with azure app service before signup to azure account. Try App Service


Create Mobile App Service

Step 1:

Sign -in into Azure portal

Step 2:

In the upper left corner of the azure portal. Click on + New and type Mobile Apps in search box like below

Step 3:

Select Mobile Apps and Click on Create


Step 4: Create Mobile App

Provide the App name, Resource Group name and click on create.


Step 5: Successfully created Mobile App Service:

After Click on Create. Wait a few minutes for the service to be deployed successfully before proceeding.


Step 6: Mobile Service Settings

Click on Menu > Select App Services > Select newly created App Service(DevEnvDemo) > Click on (…) > Select Settings


Step 7: Select Client Application platform:

Search “Quick Start” > Select client application platform (Xamarin,Windows,native App) > Select Database ( Click on Connect a database)


Step 8: Create Data Connection:

Click on + Add button


Step 9: Select or Create Database:

Select database connection type as Sql Database > Select Sql Database configure Setting > Create New Database or Select database > if New Database – provide new Database name > Select Server or create New Server > if new server – provide server details and click on Select > Click on Ok


Step 10: Data Connection Status

After Click on Ok. Wait a few minutes for the Data connection create successfully before proceeding or click Notification icon and check data connection is created or not


Step 11: Download Client Application and Mobile Service:

Select client application > select backend language (C# or node.js ) > Click on Download button for both client and cloud project

now you can download cloud and Client application

Step 11: Publish and Debug Server Project

Download install language specific SDK https://azure.microsoft.com/en-us/downloads/

Open Visual Studio as Run as Admin, rebuild the project to restore NuGet packages.

In Solution Explorer, right-click the project, click Publish.

Click on Microsoft Azure App Service > Next > sign-in with your Azure credentials.


Select App service:



Provide server details > click on validate connection and publish the service



Wait few minutes for deploy service


Step 12: Run and Debug Application

Now you can Extract the client project that you downloaded, and then open it in Xamarin Studio or Visual Studio.



I believe this article will help you to create mobile app service in Azure. If you have any question or feedback, please share in the comment box.

Featured Post

How to Get an Free Azure Subscription for Learning

This guide will help you get started with Microsoft Azure for free. It explains three easy ways: using a Free Azure Account Signing up for A...

MSDEVBUILD - English Channel

MSDEVBUILD - Tamil Channel

Popular Posts