Custom Teams app with Azure authenticaton doesn't work in Teams desktop app

1
votes

We have some webpages which are protected by Azure. I created a custom Teams app package to display one of webpages in Teams. We want the app to work in both browsers and Teams desktop app. After uploaded the package to Teams app catalog and added the app to a Channel tab, I can view my webpage in browsers without any problem. However, if I use Teams desktop app, the tab just shows a blank page. There is an error saying "login.microsoftonline.com" can't be displayed in an iframe.

My webpage is protected by Azure, so users will be redirected to Azure login page (login.microsoftonline.com) to sign in when they access the page. In browsers, the page will automatically log in using current user's session as the user already signed in Microsoft Teams. However, in Teams desktop app, the page can't get session from the desktop app and it will redirect the user to Azure login page which doesn't support iFrame.

I know custom Teams apps display their content in iframe. However, the Azure login page can't be displayed in an iframe. If the content page of a custom app is protected by Azure, it can't be used by Teams desktop app at all.

I spent quite some time but can't find a solution for this. Any suggestion?

Thanks in advance.

1
microsoft-teams
You need to implement Tab Authentication in your webpage. Please look at sample code – Trinetra-MSFT
Hi Trinetra, thanks for your reply. I took at the document and its sample code. My question is, will this work in Teams desktop app if the pages/apis in the sample app are protected by Azure authentication as well? – Matthew Hong
I did implement "Single sign-on (SSO) support for tabs" by following this doc: docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/…. The sample code doesn't require authentication and I made it work with Teams desktop app. But when I tried to put it into a real project where the user needs to be authenticated to the NodeJS app before calling its api to get the Graph access token, I can't get it work. How can I be authenticated if I can't access the login.miscrosoft.com page from iframe? Seems like a chicken-and-egg problem to me. Any suggestion? – Matthew Hong
BTW, I also tried the "Silent authentication" solution described in docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/…. It works for browsers, but not the Teams desktop app. – Matthew Hong
You need to add webApplicationInfo in your app manifest to load in teams desktop client ""webApplicationInfo": { "id": "<AAD_application_id here>", "resource": "<web_API resource here>" }" – Trinetra-MSFT

1 Answers

1
votes

I am experiencing the same issue as this post. Teams tabs work on the browser without an issue; however, it is showing an authentication error in the desktop teams application when opening our tab. The error is:

Error: in auth [email protected] InteractionRequiredAuthError: Trace ID: b38d5d36-e582-41af-b354-b4f9ec607e00 Correlation ID: e09d4267-3af7-4f95-98f8-4c01a3f71e9d Timestamp: 2020-11-19 11:12:52Z

More strangely, though, the Teams tab does actually work on one of our Ubuntu computers, but not on a Mac or Windows teams app. So, what could be the reason for this?

We are using the MSAL library and getting the silent token, and in the desktop version, it shows an error when we are trying to get the silent token.