MSAL: Azure Active Directory Authentication in Xamarin.Forms (C# - Xaml)

Introduction:
Microsoft Authentication Library (MSAL) is Latest generation of Microsoft authentication libraries. Allow you to acquire tokens for users signing-in to your application with Azure AD (work and school accounts), Microsoft (personal) accounts (MSA) and Azure AD B2C. It will also soon support a direct connection to ADFS 2019.

Requirements:

• Visual Studio 2017 or later version with the Mobile development with .NET workload.
• An Internet connection.
• At least one of the following accounts: A Microsoft Account An Azure AD account
• For UWP, if you want to test the UWP application, you will have to add the SDK corresponding to your version of Windows 10 (or all the Windows 10 SDKs). See Testing UWP applications on Windows 10

Description:

This is a simple Xamarin Forms app showcasing how to use MSAL.NET to1. Authenticate users with Work or School accounts (AAD) or Microsoft personal accounts (MSA) and get an access token to access the Microsoft Graph.

How To Run this Sample?

Step 1: Download source code from  https://github.com/SubramanymRajuB/Xamarin.Forms/tree/master/ActiveDirectoryXamMSAL.

Step 2: Register the client app from azure portal:

1. Navigate to the Microsoft identity platform for developers App registrations page. 

2. Select New registration. 

3. When the Register an application page appears, enter your application's registration information: 

• In the Name section, enter a meaningful application name that will be displayed to users of the app, for example ActiveDirectoryXamMSAL.
• In the Supported account types section, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com). 
• Select Register to create the application. 
• On the app Overview page, find the Application (client) ID value and record it for later. You'll need it to configure the Visual Studio configuration file for this project. 
• In the list of pages for the app, select Authentication.. In the Redirect URIs | Suggested Redirect URIs for public clients (mobile, desktop) section, check the option of the form msal<clientId>://auth Select Save. 
• In the list of pages for the app, select API permissions Click the Add a permission button and then, Ensure that the Microsoft APIs tab is selected In the Commonly used Microsoft APIs section, click on Microsoft Graph In the Delegated permissions section, ensure that the right permissions are checked: User.Read. Use the search box if necessary. Select the Add permissions button

Step 3: Configure the Visual Studio project with your app coordinates:

In the steps below, "ClientID" is the same as "Application ID" or "AppId". 

• Open the solution in Visual Studio. 
• Open the ActiveDirectoryXamMSAL\App.cs file. Find the assignment for public static string ClientID and replace the value with the Application ID from the app registration portal, created in Step 2.

Step 4: Configure the iOS project with your apps' return URI:

1. Open the ActiveDirectoryXamMSAL.iOS\AppDelegate.cs file. 

2. Open the ActiveDirectoryXamMSAL.iOS\info.plist file in a text editor (opening it in Visual Studio won't work for this step as you need to edit the text) .

3. In the URL types section, add an entry for the authorization schema used in your redirectUri:

1. <key>CFBundleURLTypes</key>    
2.        <array>    
3.      <dict>    
4.        <key>CFBundleTypeRole</key>    
5.        <string>Editor</string>    
6.        <key>CFBundleURLName</key>    
7.        <string>com.yourcompany.ActiveDirectoryXamMSAL</string>    
8.        <key>CFBundleURLSchemes</key>    
9.        <array>    
10.      <string>msal[APPLICATIONID]</string>    
11.        </array>    
12.      </dict>    
13.        </array>    

Step 5:Configure the Android project with your return URI:

1. Open the ActiveDirectoryXamMSAL.Droid\MainActivity.cs file. 

2. Open the ActiveDirectoryXamMSAL.Droid\Properties\AndroidManifest.xml.

3. Add or modify the <application> element as in the following:

1. <application>  
2.     <activity android:name="microsoft.identity.client.BrowserTabActivity">  
3.       <intent-filter>  
4.     <action android:name="android.intent.action.VIEW" />  
5.     <category android:name="android.intent.category.DEFAULT" />  
6.     <category android:name="android.intent.category.BROWSABLE" />  
7.     <data android:scheme="msal[APPLICATIONID]" android:host="auth" />  
8.       </intent-filter>  
9.     </activity>  
10.       </application>  

where [APPLICATIONID] is the identifier you copied in step 2. Save the file.

Step 6: Run the sample:

Choose the platform you want to work on by setting the startup project in the Solution Explorer. Make sure that your platform of choice is marked for build and deploy in the Configuration Manager. Clean the solution, rebuild the solution, and run it: 

• Click the sign-in button at the bottom of the application screen. On the sign-in screen, enter the name and password of a personal Microsoft account or a work/school account. The sample works exactly in the same way regardless of the account type you choose, apart from some visual differences in the authentication and consent experience. During the sign in process, you will be prompted to grant various permissions (to allow the application to access your data). 
• Upon successful sign in and consent, the application screen will list some basic profile info for the authenticated user. Also, the button at the bottom of the screen will turn into a Sign out button. 
• Close the application and reopen it. You will see that the app retains access to the API and retrieves the user info right away, without the need to sign in again. 
• Sign out by clicking the Sign out button and confirm that you lose access to the API until the next interactive sign in.

Important Notes:

1. MSAL.NET in Android requires support for Chrome Custom Tabs for displaying authentication prompts.

2. Make sure carefully copy the Application ID from the app registration portal, created in Step 2.

3. Make sure to match MSAL Redirect URI from your app.

References:

1. https://azure.microsoft.com/en-us/resources/samples/active-directory-xamarin-native-v2/.

2. https://github.com/Azure-Samples/active-directory-xamarin-native-v2.

3. https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/Register-your-application-with-Azure-Active-Directory

You can also directly work on below sample source code to understand this article.

You can also see output of this article from below youtube video. Also for more videos please don't forget to SUBSCRIBE our youtube channel from here.

FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B