I am currently working on integrating login with Outlook using Azure Portal client ID in my web application. I have followed the documentation and registered an application in the Azure Portal, obtaining a client ID. However, I have encountered several difficulties and have been unable to successfully retrieve user credentials.
Here is an overview of the steps I have taken and the issues I am facing:
I registered an application in the Azure Portal and obtained the client ID.
I implemented the necessary code in my web application, following the provided documentation.
When I click on the "Login with Outlook" button, I expected a login prompt to appear, but nothing happens.
I have checked the console for any error messages and found no relevant information.
I have also reviewed the Azure Portal settings multiple times to ensure the configuration is correct.
I have attempted to troubleshoot the issue by modifying the code and trying different approaches, but none have been successful.
I am unsure why the login prompt is not appearing and why I am unable to obtain user credentials. Could anyone with experience in integrating login with Outlook using Azure Portal client ID provide guidance on what might be causing this issue and suggest potential solutions?
I appreciate any assistance or insights you can provide. Thank you!
<html>
<head>
<title>Outlook Login Integration</title>
<script src="https://alcdn.msauth.net/browser/2.18.0/js/msal-browser.min.js"></script>
</head>
<body>
<button id="loginButton">Login with Outlook</button>
<script>
const msalConfig = {
auth: {
clientId: 'clientid',
authority: 'https://login.microsoftonline.com/common',
redirectUri: 'my url', // Replace with your redirect URI
clientSecret: 'client secret'
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: true,
}
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
const loginRequest = {
scopes: ['openid', 'profile', 'offline_access', 'https://outlook.office.com/Mail.Read'],
};
const login = async () => {
try {
const response = await msalInstance.loginPopup(loginRequest);
console.log('Login successful', response);
const accessTokenResponse = await msalInstance.acquireTokenSilent(loginRequest);
const accessToken = accessTokenResponse.accessToken;
console.log('Access token:', accessToken);
// Use the access token to make API requests to Outlook
// Example: fetchOutlookMail(accessToken);
} catch (error) {
console.error('Login error', error);
}
};
const loginButton = document.getElementById('loginButton');
loginButton.addEventListener('click', login);
const fetchOutlookMail = async (accessToken) => {
const response = await fetch('https://outlook.office.com/api/v2.0/me/messages', {
headers: {
'Authorization': `Bearer ${accessToken}`
}
});
if (response.ok) {
const data = await response.json();
console.log('Emails:', data.value);
} else {
console.error('Error fetching emails:', response.status, response.statusText);
}
};
</script>
</body>
</html>