Showing an external WebApp in Teams tab - Authentication issue

Contributor

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:

David_Elsner_1-1616919731580.png

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

David_Elsner_0-1616919533910.png

 

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:

David_Elsner_0-1616927537146.png

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.