Testing Out A Multi Tenant Sample With The Microsoft Graph

I have been looking at different ways to integrate the Microsoft Graph into an application, so when I got started I needed a quick way to accomplish this so I can be productive from the start. So I took one of the Azure AD applications Sample and modified its configuration to make it work with the Microsoft Graph. Here are the details of how this can be accomplished.

Defining the configuration

As you might have already noticed, the applications registered on https://apps.dev.microsoft.com/ seem to be created with multi-tenant support by default. This is different behavior from how applications are managed in the Azure Portal, in which you have to explicitly indicate that an application is multi-tenant. Let's start by creating an app in the Application Registration Portal by following these steps:

  • Login to the portal with your Microsoft or Work/School account https://apps.dev.microsoft.com/
  • Click on Add an app and then give your application a name, in my case I named it MyGraphApp New Application Registration
  • Now you should see your application details: Application Registration Portal
  • In order to configure the sample application, you are going to need to generate an application secret. Under Application Secrets click on Generate New Password, you should see a new pop up message containing your new password. Make sure you copy that password to a temporary medium like Notepad, you will need it later when configuring the sample, but you will not be able to see it after you click OK: Generated Password

That is all the settings you will need to set on the Application Registration Portal for configuring the sample application.

Implementing the configuration

In order to follow along, make sure you download or clone the sample application from GitHub, if you haven't already done so, at the following location:
Build a multi-tenant SaaS web application that calls a web API using Azure AD

  • Open the solution and locate the appsettings.json configuration file and refer back to the Application Registration Portal and copy the Application Id under Properties and paste it on the ClientId setting's value of the appsettings.json configuration file.

  • Refer back to the Password that you copied and pasted from the Application Secrets section of the configuration portal page and paste it as the value for the ClientSecret on the appsettings.json file.

  • Locate the GraphResourceId and GraphBaseEndpoint in the appsettings.json file and set https://graph.windows.net as the value as for both of those settings.

  • Finally, set the GraphApiVersion on the appsettings.json configuration file to v1.0

Your configuration file should look similar to this:
{ "Data": { "ConnectionString": "Filename=../../../../../TodoListWebApp/App_Data/TodoListWebApp.db" }, "AzureAd": { "ClientId": "92dc5f42-ef83-437c-8f50-bff0c47b6257", "ClientSecret": "PYGe3rqZCMh0uQJGJ6sHuJp", // We don't recommend storing this important security credential in code like this": null, "AuthorityFormat": "https://login.microsoftonline.com/{0}", // This app uses the public instance of Azure AD "RedirectUri": "https://localhost:44376/", "GraphResourceId": "https://graph.windows.net", // This app uses the public instance of the Azure AD Graph API "GraphBaseEndpoint": "https://graph.windows.net", "GraphApiVersion": "v1.0" } }

Now, there is just one more code change you need to make in order to have the sample work with the Microsoft Graph. Since the sample is using the Azure AD Graph, the URL it is expecting is a bit different, so all you need to do is update the code that parses the URL for the Microsoft Graph. Here is what you need to do:

  • Locate the UserProfileController.cs file under the Controllers folder
  • On the Index method, find the following code:

    // Call the Graph API and retrieve the user's profile. string requestUrl = String.Format("{0}/{1}{2}?api-version={3}", _aadConfig.GraphBaseEndpoint, User.FindFirst(AzureADConstants.TenantIdClaimType).Value, "/me", _aadConfig.GraphApiVersion);

  • Replace that code with the following in order to update the sample to use the Microsoft Graph URL:

    // Call the Graph API and retrieve the user's profile. string requestUrl = $"{_aadConfig.GraphBaseEndpoint}/{_aadConfig.GraphApiVersion}{"/me"}";

That is all the code and configuration you will need to make the sample work with the Microsoft Graph.

Running the sample

Now you can run the sample by running it using Visual Studio. Once the application starts, you can choose to 'Sign Up' with your respective tenant from the home page on the sample application. If you sign up with a tenant administrator account, you will receive the 'admin consent' screen, which will give everyone on your tenant directory access to the application. This is the same behavior as a multi tenant application that is configured in Azure AD as you may have seen before. Once you are signed up and logged in, you can click on your name and validate that you are getting data from the Microsoft Graph:
Microsoft Graph Query Results

The data that you receive from the Microsoft Graph does not exactly match what was expected on the original page, but that can be tweaked according to your needs. However, I will leave that tweaking as an exercise for the reader.

Summary

In this post you saw how you can get started using the Microsoft Graph in a multi tenant sample application. As Microsoft continues to merge the Azure AD Graph and Microsoft Graph functionality, these types of sample applications will solidify a bit more. For now, if you just want to try things out then you might need to get a bit creative and play around with some of these APIs to see what works.

Hope this was helpful. Until next time, happy coding.