Microsoft-authentication-library-for-dotnet: [Bug] Teams app tab not supported on W10 due to iframe

[kurx78]

I have an ASP MVC application that uses msal.net for authentication, the application is currently on production and we intent to expose it as a tab in a Microsoft Teams app.
We had good results on mobile and browser but on the windows client the application fails to authenticate because the Teams client opens it inside an iframe. We chose msal.net because it has amazing support for all kinds of browsers but for the Windows Teams client there seems to be an issue because of the way teams loads web apps into tabs.

How can I direct this issue to the right team and work on it to find a fix for this scenario? This issue involves both msal.net and Teams so I’m not sure who is the right team to address.

Is this the intended behavior for msal while Integrating into Teams? Do I need to open a new feature request for this?

[jmprieur]

@kurx78 I suggest you try with MSAL.js which has support for iframes
cc: @negoe @sameerag @DarylThayil

[kurx78]

We are using MVC 5, so just changing the library is not that simple since msal.net does a really good job at integrating with controllers and gives us better control of the http context, which is something we actually need.
We are trying to understand why this issue is happening, and how iframed scenarios can be handled in MVC, just changing the library does not solve the problem.

I find msal.net a far better authentication library than msal.js, with more options and better control of the auth flow, is there any way we can adapt it to better handle iframed scenarios like in teams?

[kurx78]

I been trying msal.js but I find it quite limited compared to msal.net. I also find it more secure since I can set specific security attributes in controller definitions. I think supporting iframed scenarios would be a great idea, and provide some integration with the Microsoft Teams SDK.

In the end, the goal is to have a site that is secured and can be accessed both ways, in the browser or inside the Teams application.
What it's interesting is that, the issue is specific to the Windows 10 client, mobile devices and even going to teams on portal.office works without additional changes.

[kurx78]

SOLVED :)

UPDATE: You can actually use msal.net on an MVC project and expose the site as a teams application by using the authenticate function on teams.js

microsoftTeams.authentication.authenticate({ url: window.location.origin + "/tab-auth/simple-start", width: 600, height: 535, successCallback: function (result) { getUserProfile(result.accessToken); }, failureCallback: function (reason) { handleAuthError(reason); } });

On your callback Controller Action do:

microsoftTeams.authentication.notifySuccess({ idToken: hashParams["id_token"], accessToken: hashParams["access_token"], tokenType: hashParams["token_type"], expiresIn: hashParams["expires_in"] })

You should be able to authenticate against Azure AD and return any relevant information to the callback.
NOTE: If you are opening the application from a mobile device, try to use a normal redirect call since mobiles have a different way to deal with popups. Keep in mind that the auth flow must happen on the popup in order to work.

I hope this helps someone
Thanks

[DarylThayil]

cc @sameerag for to see how teams go around some of this

[jennyf19]

thanks for the update @kurx78 .... @jmprieur should we update the docs w/this info?

[jmprieur]

This is very Teams specific, @jennyf19, and applies to ASP.NET / ASP.NET Core. I guess I'd want to work with the ASP.NET team to have an how to: "how to expose an ASP.NET site as a Teams app" ?