What’s Azure Active Directory

Azure Active Directory or also Azure AD is a cloud-based Identity and Access Management (IAM) Microsoft’s solution. Azure AD can be used for many reasons like add users to your directory, control access or even add single sign-on (SSO) to your apps.

In this blog, we’ll talk only about how to add apps to your Azure Active Directory, how to add scopes and how to add API access to your client application.

Create a new application for your API (My API APP)

Each time you have a web or native application who communicates with an API you start thinking how to protect it and how to implement the authentication and the authorization process. Azure Active Directory is a good alternative for making a solid and good solution for that. When using Azure Active Directory, the first thing you’ll have to do is create an application for your API on Microsoft Azure. So, let’s start!

Navigate to https://portal.azure.com and sign in using your own account, if you don’t have a one you can register for free and then you can access for trying.

Azure Portal

Microsoft Azure provides a set of services like SQL databases, virtual machines, Azure Cosmos DB etc. For our need you have to select the “Azure Active Directory” option in the left side bar menu.

Azure Portal

As shown above, through Azure Active Directory space you can manage users, groups, applications, roles and many other things related to your organization. Now select “App registrations” and then click on “Register an application”:

Azure Portal

After that you must set your application name, your application type (Web app/API or native) and the sign-on URL and finally click on create.

Azure Portal

After the creation process, Azure shows you the details of the application: display name, application type,home page, application id and object id.

Azure Portal

Congrats! Your API’s application now is well created on your Azure Active Directory.

Add scopes to your API app

Scopes are parameters used within the authentication process by the application to specify what access it needs, scopes are used also by the authorization server to know exactly what permissions it must returns. For creating a custom scope, you can click on the Manifest button, then Azure will show you a JSON content who describes the application as shown below:

Azure Portal

Now navigate inside the JSON file to the “oauth2Permissions”: inside this JSON section you can add all scopes you’ll need for your application using the default model.

Azure Portal

Let’s add a sample scope called “Todo.Read” of type “User”:
{
  "adminConsentDescription": "Allow access to read all users' todo items.",
  "adminConsentDisplayName": "Read access to todo items",
  "id": "9e2ce07b-fbc9-4b0b-9e83-8d00da3a5e21",
  "isEnabled": true,
  "type": "User",
  "userConsentDescription": "Allow access to read your todo items.",
  "userConsentDisplayName": "Read access to your todo items",
  "value": "Todo.Read"
}

Azure Portal

Until now you created your API app and you defined a scope inside the Manifest JSON file, in the next step we’ll show you how to create an application for the client side who will be called «My Client APP».

Create a new application for your client (My Client APP)

Navigate to Azure Active Directory option again then select ”App registrations” and click on “New application registration”. Like you did for the first app created for your API, you must set your application name, your application type (Web app/API or native) and the sign-on URL of your application and finally click on create.

Azure Portal

After the creation process, Azure shows you the details of the application: display name, application type,home page, application id and object id.

Azure Portal

After that, you’ll need to set the access for “My API APP”. So let’s do it in the next section of our tutorial.

Set API Access to your API

On the same screen shown after the creation process of your client app, click on “Settings” then “Required permissions”.

Azure Portal

When you click on “Required permissions”, Azure portal will show you a list of applications that your application have already required permissions of them, like Azure Active Directory:

Azure Portal

Now, click on “Add” to add your API, then click on “Select an API”:

Azure Portal

Here, Azure Portal will show you a list of applications that you can access through your client application.

Azure Portal

Now, tap and looking for “My API App”, then select it:

Azure Portal

When you select the “My API APP” you have to select required permissions, so click on the second section called “Select permissions”. As shown below, there are two types of permissions: Application Permissions: Designed for autonomous apps that don’t need a signed-in user but need authorizations like services or APIs. Delegated Permissions: Designed for apps that have a signed-in user.

Azure Portal

As you defined two scopes in the Manifest file of “My API App”, Azure will show you them under the Delegated Permission. Each selected delegated permission will be shown as scope inside the “Select permissions” section.

Azure Portal

Click “select” then “done”.

Azure Portal

Azure will display a notification to confirm you the success of the process.

Azure Portal

Click on “Grant Permissions” then “Yes” to confirm all permissions you selected.

Azure Portal Azure Portal

Now if you navigate to “App registrations” and then click on “View all applications”, you will see the both of your applications created during our tutorial: “My Client APP” and “My API APP”:

Azure Portal

Conclusion

During this tutorial, you well created too applications on Azure Active Directory, you added a “Todo.Read” scope to your API application and you set the API access to your client application. In the next tutorial, we will show you how to implement authentication and authorization in your Angular application using OpenID Connect with the Azure Active Directory and My Client App.

Thank you for having taken your time to provide us your valuable feedback !