Open In App

Azure Active Directory Authentication

Last Updated : 30 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Azure Active Directory is now Microsoft Entra ID. Microsoft Entra ID is a cloud-based identity provider and access management service. If you are using Skype, Outlook, or OneDrive, then you are already a customer of Microsoft Entra ID. To access these services, the necessary thing is that you have to log in with your username and password related to Microsoft Entra ID. If you are a developer, you can use Microsoft Entra ID to secure your website by adding a signing feature. Identity is a thing that can be authenticated, and authentication is the process of verifying identity.

Traditional Login Systems

In the classic approach of logging into an application, the client enters credentials in the interface, and those credentials go to the server. The server then verifies those credentials with the database and responds accordingly to the client. However, this approach poses security risks associated with maintaining user data and implementing security features takes time and money.

Microsoft Entra ID’s Breakthrough Over Traditional Approaches

To overcome these challenges, we can use Microsoft Azure Entra ID. When the client enters credentials in the interface, they go to Microsoft Entra ID. In response to verification, Microsoft Entra ID shares a token with the client. This token is then shared with the server. The server asks for some basic information from Microsoft Entra ID, and after verification, the server grants access to the client—this can be referred to as the result.

Clients can use the same credentials of Microsoft Entra ID across various services, ensuring security. Clients also benefit from Multi-Factor Authentication (MFA) support, conditional access, and much more.

Now, Let’s Consider Who Should Learn Microsoft Entra ID

Typical user profiles include:

  • IT Administrators: They configure MFA for organizational users, handle on-premise user synchronization, and protect users and organizations where they work.
  • Application Developers: Microsoft Entra ID can provide identity management services for web applications. If a user is already signed in with Microsoft Entra ID, developers can take advantage of Single Sign-on (SSO), eliminating the need for users to retype their credentials while accessing the application.
  • Subscribers of Microsoft 365: You can manage integrated apps with Microsoft Entra ID.

How To Use Microsoft Entra ID for Login?

Firstly, We will create a simple interface that has one button. After clicking on it, it will redirect to a particular URL. We may think this will be a simple task, but only when you have Microsoft Entra ID. We will hardcode these credentials in our code. This is not a recommended way, but as we are just creating a sample interface, we can do this.

Steps To Use Microsoft Entra ID

Step 1: Login to your Microsoft Azure Account and search for ‘Microsoft Entra ID.’

Click on 'Microsoft Entra ID'

Step 2: After clicking on ‘Microsoft Entra ID,‘ on the left side menu, you will see an ‘App registrations’ service of Microsoft Entra ID. Click on that.

Click on 'App registrations'

Step 3: Now, fill in the details of your application, give it a unique name, and select ‘Support account types’ according to your needs. Now, click on register.

Registering an Application

Step 4: After successfully registering the app, you will see details of your app. Note your app’s ‘Application ID’ and ‘Directory ID’.

App Details

Sample Project

Now, we will create a simple interface that will have a button, and after clicking, it will redirect to a particular URL.

The following is the Sample Template to create an Interface:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            background-color: #f0f7fc;
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
 
        h1 {
            color: #0078d4;
            margin-bottom: 10px;
        }
 
        p {
            color: #4d4d4d;
            margin-bottom: 20px;
            margin-left: 70px;
              margin-right: 70px;
        }
 
        form {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px; /* Adjust the width as needed */
        }
 
        button {
            background-color: #0078d4;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
 
        button:hover {
            background-color: #005a9e;
        }
    </style>
</head>
<body>
    <h1>Welcome to Your App</h1>
    <p>Here, we have directly added the 'tenant-id,' 'client-id,' and 'redirect_uri' of the Microsoft Entra ID that we created. We are showcasing a small use case of Microsoft Entra ID in the login process. This is suitable only for testing purposes. When you click on the "Login with Microsoft Entra ID" button, it will redirect to the 'redirect_uri' provided by you.</p>
    <form id="loginForm" action="https://login.microsoftonline.com/{your-tenant-id}/oauth2/v2.0/authorize" method="get">
        <input type="hidden" name="client_id" value="{your-client-id}">
        <input type="hidden" name="response_type" value="token">
        <input type="hidden" name="redirect_uri" value="{your-redirect-uri}">
        <input type="hidden" name="scope" value="openid">
        <button type="submit">Login with Microsoft Entra ID</button>
    </form>
</body>
</html>


  • In this template, replace ‘{your-tenant-id}‘ with your ‘Directory ID’ of the app, ‘{your-client-id}’ with the ‘Application ID’ of your app, and ‘{your-redirect-uri}’ with the url where you want to redirect the user.

Result

We have successfully created a sample interface that redirects to GeeksForGeeks using Microsoft Entra ID.

demo on Sample Interface creation

We have seen how Microsoft Entra overcomes the traditional login system. Also, we developed a sample project to demonstrate how Microsoft Entra helps in accessing third-party URIs. While it is not a good practice to include credentials in code, for testing purposes, we did this. In this article, we have explored how Microsoft Entra works.

Azure Active Directory Authentication – FAQs

What Is The New Name Of Azure Active Directory?

Now The new name of Azure Active Directory is known as Microsoft Entra ID.

What Is Microsoft Entra ID?

Microsoft Entra ID is a cloud-based identity provider and access management service.

How Does Microsoft Entra ID Differ From Traditional Login Systems?

In traditional systems, credentials go from the client to the server for verification. Microsoft Entra ID, however, issues a token to the client after verification, enhancing security and efficiency.

For Whom Is Microsoft Entra ID Appropriate?

For IT administrators who are in charge of setting up MFA, user synchronization, and general organizational security, Microsoft Entra ID is a useful tool. It can be used by application developers to manage identities in web applications, providing the convenience of Single Sign-On (SSO). Microsoft Entra ID allows Microsoft 365 subscribers to effectively manage linked apps.

Is It Advised To Hardcode Login Credentials Into The Code?

The recommendation is not to hardcode credentials in production systems because of security issues. However, it can be done cautiously while developing an example interface.



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads