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:
<!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.
Azure Active Directory Authentication
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.
Contact Us