Showing an external WebApp in Teams tab - Authentication issue


We have some important company websites - Angular applications that are using ADAL/MSAL or no authentication at all - that our users are using very often. Currently they have the browser open + MS Teams and use both tools.

I thought its nicer to show our App inside an MS Teams tab, to use Teams as a "browser" and to make life easier for our users.


What I did is simply creating a test app that I deployed to our tenant.

The app is having the web address to our external web app as a content-uri in a tab:


Now our app is appearing in the Teams client on the left side after installation:



If I launch this app our page appears a short time and then reloads for a hundred times at once.
What I would expect is a redirection to the MS page to login, to get a token for the user (like it works in Chrome)


I tried out different scenarios:


In the Teams-Browser app:

- Everything works perfectly


In the Teams Desktop app - that everyone is using:

- Using ADAL with redirection method => Like described above

- Using MSAL with interactionType: InteractionType.Popup => Tries to open "about" in the MS store, because there is no app available. The popup blocker cannot be a problem, because I have a button for login (user interaction) so I expect a window opening where I can login, but I get this:


I can never press ok - why is not a browser used?

- Using MSAL with interactionType: InteractionType.Redirect => Blank page

- Using an app without any authentication => Works as expected, the page is shown


I am now confused why this is happening. The teams iframe does allow popups explicitly if I inspect the iframe with DevTools.


Everything we want is to display one external page with MSAL or ADAL authentication enabled.

Another approach I tried: Using a "real" teams App that uses SSO. Once I have the token I pass it to the iframe with a #token=ey....


Howevery, this approach also does not work and the page is blank.


I think I am already to complicated in how I think. There must be an easy solution for this problem. Any proposals are highly appreciated.







4 Replies

@David_Elsner  Please go through the working Tab SSO authentication sample. It may help you. 


@Mamatha-MSFT I also found this sample. One question about this. I found two different ways to authenticate. First way is to use authentication through SSO - another way is this one: "Authenticate a user in a Microsoft Teams tab". Can you tell the difference?

I was hoping to launch my own angular app in the tab without doing too much efford (extra hosting etc..) but it might not be possible. 

@David_Elsner Authentication using Azure AD is used to get access to the user's profile information from Azure AD and Microsoft Graph. 
 single sign-on (SSO) is used to consent the app. If a user consents to use your app, they do not have to consent again on another device as they are signed in automatically. 

@David_Elsner Please let us know does that help clarify.