We are facing an AAD login issue for our web application (node.js + angular 10) in MS Teams Desktop & Mobile app while our users easily login by clicking a login button in any web browser or MS teams web client.
In Angular, we are using two library (@azure/msal-browser msal and @azure/msal-common) and using graph toolkit for AAD through login in our application.
In login page, we are just calling login component via a simple login button. We added our angular web app as personal tab/app of MS Teams. When a user clicks it in Microsoft Teams Desktop app, we are encountering below error message in console:
ERROR Error: Uncaught (in promise): BrowserAuthError: redirect_in_iframe:
Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true
BrowserAuthError: redirect_in_iframe: Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true at t [as constructor]
We suppose that Teams Desktop tab could not open our authentication mechanism because we could not add our code below functions:
microsoftTeams.initialize(() => {
microsoftTeams.authentication.authenticate({
url: config.BASE_URL + '/app/microsoft-teams/tabs/auth',
width: 600,
height: 535,
successCallback: onAuthSuccess,
failureCallback: onAuthFailure,
});
});
This is from teams SDK javascript and we did not figure out how to use this function in our Angular 10 structure, we can not call the function from any package in Angular.
Is there a workaround for Angular 10 apps to utilize functions like microsoftTeams.authentication.authenticate? Any typescript package for ms teams etc.?
Do we have to create an external Teams-spesific-login flow app with React (like these codes: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2531#issuecomment-770110059) and call ms teams js sdk package for authenticating users via this React app and then finally redirect user to our angular 10 app with a gained token? This approach is best case or best workaround for this kind of situation?
Is there any method to proceed in only one Angular 10 standalone app and one login mechanism that works browsers, teams desktop app, teams mobile app together? I found this topic (https://github.com/OfficeDev/microsoft-teams-library-js/issues/90) but could not figure out how to use it to solve my problem.
MSAL for Angular enables Angular web applications to authenticate users using Azure AD work and school accounts (AAD), Microsoft personal accounts (MSA) and social identity providers like Facebook, Google, LinkedIn, Microsoft accounts, etc. through Azure AD B2C service. It also enables your app to get tokens to access Microsoft Cloud services such as Microsoft Graph.
Please check doc for more info