Azure Active Directory multitenant integration with Blazor WASM – Part 1

This blog is set in two parts. The first describes the process of setting up an Azure Active Directory multitenant on Azure, and the 2nd part describes how to integrate with a Blazor WASM application.

The source code for this blog is available here.

Why multi-tenant?

Allows absolutely anyone to use your app as long as they have authenticated using Azure Active Directory. The user doesn’t need to be in your directory, just some directory.

Note that this doesn’t restrict who can access your application, nor what they can do once they’ve signed in. It just ensures you know the person using your application has gone through the necessary sign-in process on Azure Active Directory.

Enable Active Directory as a resource provider

This only needs to be enabled once per subscription, it allows your subscription to use Azure Active Directory as an identity provider.

1. Sign into https://portal.azure.com
2. Select your subscription
3. In the menu on the left hand side (Left menu) select Resource providers
4. Click Microsoft.Azure.ActiveDirectory
5. If its status is not Registered, click Register at the top of the page

Set up Azure Active Directory multitenant

This will be the tenant that your app will be registered against. Your own company’s users may be registered in this directory, but users from any Active Directory will also be able to authenticate and use your application.

1. From the Azure home page click Create a resource
2. Search for Azure Active Directory
3. Find the Azure Active Directory icon (NOT B2C)
4. Click the Create link at the bottom of the item
5. Click Azure Active Directory in the popup menu
6. For Tenant type select Azure Active Directory (NOT B2C)
7. Click Next
8. Enter an Organization name and Initial domain name (e.g. MyOrg and MyOrgInitialDomain)
9. Select your Location
10. Click Review + create
11. Click Create

Switch to your new directory

We now need to switch to the new directory in order to register your application.

1. Click your user account icon at the top-right of the page
2. Click Switch directory in the popup menu
3. Refresh your browser if your new tenant is not listed
4. Click Switch next to your new directory in the list

Register your application

We now need to register some basic information about the application, such as what kind of application it is (web, single-page application) and what kind of directory may be used to sign into it.

1. Click the three horizontal lines (burger menu) at the top-left of the page
2. Select Azure Active Directory from the popup menu
3. In the left-menu, click App registrations
4. Click New registration at the top of the page
5. Give it a name (e.g. “MyApp”)
6. For Supported account types select Accounts in any organizational directory (Any Azure AD directory - Multitenant)
7. Under Redirect URI select Single-page application (SPA) for the platform
8. For the URI enter https://localhost:6510/authentication/login-callback
9. In the left menu, click Overview
10. Make a note of the value of Application (client) ID

Specify the callback URI of your website

When our app asks AAD to authenticate the current user, the application will include a parameter in the URL specifying where it wants AAD to navigate to after the user has successfully authenticated. To prevent a malicious actor from providing a user with a link that will sign them in and then return their token to a malicious website where it is recorded, AAD requires us to record a list of valid call-back URLs. If the callback URI specified in the sign-in request is not listed, AAD will refuse to pass the token to it.

We’ve entered a callback URL for our development environment, but we need to also enter the official callback URL on the website the app will ultimately be hosted.

1. In the left menu, click Authentication
2. Under Single-page application click Add URI
3. Enter the login-callback URI of your app (e.g. https://ibm.com/authentication/login-callback)
4. Click Save

Expose an API for your application

Although this section is called “Expose an API”, it does not actually expose an API for access via the Web. What it actually means is that we wish to identify and API that a user can have permission to access.

1. Click the burger menu at the top-left of the page
2. Select Azure Active Directory
3. In the left menu, click App registrations
4. Click your application in the list
5. In the left menu, click Expose an API
6. At the top of the page, find Application ID URI and click Set
7. It will default to api://{Application (client) ID}, this ID is acceptable (NOTE: {} denotes the value, e.g. d581756b-53b0-4957-820a-d6aa43fd69de)
8. Click Save

Add a scope to your API

Scopes allow different levels of access. For this tutorial we’ll only be adding a single scope access_as_user.

1. Click Add a scope
2. For Scope name enter a name you wish to use to identify the scope (e.g. access_as_user)
3. For Who can consent select Admins and users
4. For Admin consent display name enter Read user's profile information
5. For Admin consent description enter Allows the application to read the user's profile information
6. For User consent display name enter Read your profile information
7. For User consent description enter Allows the application to read your profile information
8. Ensure Enabled is selected
9. Click Add scope

Add permissions for your application to use your scope

We now need to link scopes to our app. This is a many-to-many relationship. We can create many scopes, and use them across many applications.

1. In left menu, click API permissions
2. Click Add a permission
3. Click the [My APIs] tab at the top of the popup menu
4. Click your application in the list of items
5. In the Permissions section ensure access_as_user is checked
6. Click `Add permissions

Add permissions for your application to access additional user information

When the user accesses our application for the first time, AAD will show them a list of access permissions our application is requesting and ask them to confirm they consent to granting them. In this case, we are only interested in the user’s general information.

1. In the same API permissions page, click Add a permission
2. Select the Microsoft Graph item at the top of the popup menu
3. Click the Delegated permissions item in the popup menu
4. Ensure email and openid are both checked
5. Click Add permissions

Finishing adding permissions

When you’ve finished the above steps, click the Grant admin consent for {Your organisation name} and then click Yes`. Remember this step if you add any additional permissions in future.

Next steps

In the next part, we’ll go through how to create an ASP.NET hosted Blazor WASM application and configure it so both the client and API server use this AAD for authentication.