Microsoft-authentication-library-for-js: Could you please place a sample implementation for proper msal silent and popup authentication for usage in a MS Teams app web tab (not the standard web url tab)

[BerndGewehr]

When trying to create a valid aad login method for a pure html/js/css web app, we found that the vanillajs examples from here do not work for teams web tabs added via "real" teams apps (by creating and uploading a manifest or by using the teams appstudio).

Could you please provide a working example for a MSAL silent authentication with redirection after successful login to an apps web URL? If silent fails, could you ask for a login via a popup? Can the token be placed in localstorage so that one authentication will be enough for multiple teams tabs?

I have tried to achieve this result by trying many available documentation pages - no luck so far. A simple and working example would be of great help to enter the space of teams app bulding...

[BerndGewehr]

[BerndGewehr]

It seems like the login form is denied to appear inside of an iframe when using a teams app web tab while being allowed when using a teams website tab. So IF a login form is needed, it has to appear in a popup. But it seems that popups are forbidden in the inapp browser of Teams.

[BerndGewehr]

I changed console.log() to alert().

[BerndGewehr]

All examples for Teams use adal instead of msal
https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-silent-aad
https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad#samples

[ManuelTS]

Yes, but only on the outdated documentation, as said in:

• https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-migration
• https://github.com/AzureAD/azure-activedirectory-library-for-js

Maybe the following links can help you, I recommend only to view github code of MSAL.js and github doc, but not any docs on microsoft.com.

• https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples
• https://github.com/Azure-Samples/ms-identity-javascript-v2
• https://github.com/OfficeDev/msteams-tabs-sso-sample-nodejs
• https://github.com/wictorwilen/teams-sso-tab-demo/blob/master/src/app/api/graphRouter.ts

I'm trying to authenticate in my node.js restify server a MS teams dialog (TaskInfo), to query user names from the MS graph API, but I fail to do so.

[hectormmg]

Hi @BerndGewehr ! Thanks for the feedback. We agree that we should have samples for Microsoft Teams. In the mean time, please take a look at this sample that was put together by a Microsoft employee.

[BerndGewehr]

Thank You @manuelTS . None of these contain a sample for a MSAL using Teams app Web tab implementation. That's why I asked for it. Any recommendation welcome!

Need a vanilla javascript silent authentication with pop up fall back and token persistence in local storage on success

[BerndGewehr]

@technical-boy this example relies on on disk files that are not part of the repository. Sorry to say but it did not help me in that state of completeness.

[hectormmg]

@BerndGewehr it seems the sample was configured to use a locally installed copy of the "msal" package. Have you tried deleting the package-lock.json file and running npm install? I believe this would help if your intention is to test the sample with the published version of [email protected].

[BerndGewehr]

@technical-boy I tried the example - and failed. It somehow does not manage to show a real login procedure and fails on trying what looks like a second attempt for a silent login:

[BerndGewehr]

@technical-boy I found that in a web tab of teams the code works fine. In an app web tab (created from a manifest.json), the redirect fails without further notice.

[BerndGewehr]

Possibly similar problem here:
https://stackoverflow.com/questions/62461493/msal-login-redirect-window-inside-microsoft-toolkit-wpf-ui-controls-webview-is-l

[BerndGewehr]

I found that the referenced version from the sample (1.2.2) does not work successfully while the current released version (1.3.4) works much better.

[hectormmg]

@BerndGewehr glad to hear 1.3.4 works better, has your issue been solved then?

[BerndGewehr]

Well, partly.

I achieved a working solution for the following flow:

• build a teams app web tab (manifest.json, tab, Config.html) from appstudio
• use your web app in the app tab
• try to get a AAD token silently in index.html
• if no luck, get a token in a Popup auth.html silently (have not yet completely understood why this is helpful)
• if no luck even there, let the user sign in interactively in auth.html redirected to login.microsoftonline.com
• on success, get back to index.html
• use the accessToken for graph API access etc.

What I did not yet understand is how this all could help me to use a AAD SAML enabled enterprise app silently in a teams app web tab. This was my initial problem why I started to go deeper into all this. I always hoped that a teams user, logged on with his AAD user would never have to log on again in teams tabs, be it for graph API apps or for SAML federated apps with Azure AD. But this is not the case. Users have to login again in those tabs (but the login is blocked by an app web tab IFrame settings) while they experience working SSO (with additional manual login within the IFrame) in a web URL tab. To use the advantages of the app web tab (opens inside mobile app instead of breaking out to browser, integration with a bot, whitelisting of domains involved, icons, preset names, etc.), I wanted to use those better than url web tabs.

Any suggestions for this?

[akleimrey]

A similar issue is found on our end, oddly enough the pop-up login prompts the standard browser on the machine to open, basically hijacking the entire experience to the browser.
The Desktop app so far doesn't appear to be able to deal with the pop-up login.

[BerndGewehr]

@akleimrey which version of MSAL do you use? Had similar experiences with the wrong version, with 1.3.4 it worked as designed.

[akleimrey]

@akleimrey which version of MSAL do you use? Had similar experiences with the wrong version, with 1.3.4 it worked as designed.

I'm using the Angular Wrapper, but I checked my dependencies, and we had the version of 1.3.3 of MSAL apparently. I installed the 1.3.4 version of MSAL but sadly, same issue.

[github-actions[bot]]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[BerndGewehr]

Can anybody tell what to do to use a MSFT AAD SAML federated web app seamlessly in a teams app tab?

The manifest already has some switches and fields to handle an AAD enterprise app for correct SSO but I did not see any effect on these entries.

(Recognizing being off-topic a bit)

[jmckennon]

@BerndGewehr You will need to open a ticket on Azure for that question--I'm not sure if that's in the scope of this particular team.