Showing an external WebApp in Teams tab - Authentication issue

[David_Elsner]

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.

[#2]

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

[#3]

@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. 

[#4]

@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. 

[#5]

@David_Elsner Please let us know does that help clarify.

[#6]

@Mamatha-MSFT Has this issue been resolved?  I'm also facing the same issue.  Using Azure B2C, MSAL, InteractionType.Popup, Angular frontend.  On Teams browser version, it works but on Teams windows app it does not.  It tries to open the about page for the popup and points to windows store.