Forum Discussion
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.
Mamatha-MSFTMicrosoft
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.
- Mamatha-MSFT
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.
