Azure Web Apps: How to retrieve user email in the claim when using Microsoft Account as a provider in Easy Auth

App Service Authentication/Authorization also known as Easy Auth is one of the widely used feature in Azure App Service. It reduces the burden on the developers and provides a way for the application to sign in users without changing code. It is implemented as a module and is injected at runtime within the app. It automates a lot of configuration which usually is a tedious task. It is a one time process where the users have to configure the web app to use one or more of the identity providers. Following is a list of providers currently supported with this module:

  • Azure Active Directory (AAD)
  • Facebook
  • Google
  • Twitter
  • Microsoft Account (microsoftaccount)

Refer the following article to configure your web application to use Microsoft account as the auth provider.

How to configure your App Service application to use Microsoft Account login 

Multiple providers can be configured for a single web app. For this, in portal set the

"Action to take when request is not authenticated"= “Allow request (no action) ”.

This is also known as deferred authentication. In this case the providers from the app have to be called explicitly and the application will consume it based on the obtained claim. The following table illustrates the api endpoint which is used to invoke certain calls. 

 Login End Point   /.auth/login/<provider> 
  /.auth/login/<provider>?post_login_redirect_uri=<url-path> 
 Logout End point   /.auth/logout 
  /.auth/logout?post_logout_redirect_uri=<url-path> 
 Token Access   /.auth/me 

<providers> can be set to aad, facebook, google, twitter & microsoftaccount. Here is an example:

https://easyauth.kaushalz.com/.auth/login/microsoftaccount?post_login_redirect_url=/

NOTE: The query string parameter post_login_redirect_uri redirects the user request to the value specified in url path. In the above example url, post successful authentication, the users will be redirected to the root of the application.

Adding users email address to the Claim

By default, the claim which is obtained from Microsoft Account provider doesn’t contain the users email address. Here is a how the default user claims obtained from MSA looks like

image

To add the email address as part of the claim the following scopes have to be enabled:

  • wl.basic
  • wl.emails 
NOTE: The token can be obtain by calling the following endpoint /.auth/me

Refer the following steps on how to configure this via the Azure portal

  • Log-in to Azure portal: https://portal.azure.com 
  • Click on App Service & select the web app
  • Under Settings blade, click on Authentication/Authorization (This will launch another blade for this feature
  • In here, configure the following
    1. Set App Service Authentication to On
    2. Under Authentication providers, click on Microsoft Account.
    3. Click on wl.basic & wl.emails to enable them (Refer the following screenshot)

image

  • Click on OK and then click on Save.

When the users try to login again, the application will notify the user that it needs permissions so that the application can retrieve users email address. This happens for the first time.

image

Upon giving permissions to the application, the users email address becomes part of the user_claims. Below is a screenshot for reference:

image

NOTE: I used Chrome browser with the JSON Formatter extension installed to see the claim

 

MORE INFORMATION:

In case the application is not hosted on Azure App Service, please refer the following thread on Stackoverflow on how to do this for your application.

https://stackoverflow.com/questions/17168353/getting-email-from-oauth-authentication-microsoft?lq=1