无法在 MS Teams 桌面应用程序上运行选项卡

Question

I have build Tabs for MS Teams and showing me this error on the desktop app only as seen below

Also, this is working fine on every other platform (Browser, Mobile app)

InteractionRequiredAuthError: AADSTS50058: A silent sign-in request was sent but no user is signed in. The cookies used to represent the user's session were not sent in the request to Azure AD. This can happen if the user is using Inte.net Explorer or Edge, and the web app sending the silent sign-in request is in a different IE security zone than the Azure AD endpoint (login.microsoftonline.com). Trace ID: f6450045-e435-4fa7-8dcb-b1e7da7f2300 Correlation ID: b88afb3e-7b95-48fc-a68e-5875238dd1d3 Timestamp: 2021-01-28 08:56:59Z

---

Here we are using MSAL, silent authentication.

const tokenRequestObj = {
  scopes: ["user.read"],
  loginHint: loginHint,
};
this.msalService.acquireTokenSilent(tokenRequestObj) //get silent token using context.
  .then(async authTokenResult => {
    console.log(authTokenResult); //Got access token.
  }).catch((error) => {
    if (error.name === 'InteractionRequiredAuthError') {
      this.msalService.acquireTokenRedirect(tokenRequestObj)
    }
  });
this.msalService.handleRedirectCallback(this.authCallback);

Answer 1

It's not a bug, it's a feature.

=========== You can scroll down to the solution section ================

This is a boring section...

So let me try to explain what is happening on the background.

First you call msalService.acquireTokenSilent which does some magic on the backgroung, something similar to this:

1. Checks localStorage for a token you can obtain. (Web App level).
2. Invokes MSTeams App Api and trying to get token from there. (Teams App level).
3. Reqests token from Graph (Network level).

If the background magic doesn't work it means you have to sign user in and obtain token from the OAuth. That's why you see this error:

InteractionRequiredAuthError: AADSTS50058: A silent sign-in request was sent but no user is signed in. The cookies used to represent the user's session were not sent in the request to Azure AD. This can happen if the user is using Inte.net Explorer or Edge, and the web app sending the silent sign-in request is in a different IE security zone than the Azure AD endpoint (login.microsoftonline.com). Trace ID: f6450045-e435-4fa7-8dcb-b1e7da7f2300 Correlation ID: b88afb3e-7b95-48fc-a68e-5875238dd1d3 Timestamp: 2021-01-28 08:56:59Z

Next you call msalService.acquireTokenRedirect which redirects user to login.microsoftonline.com and here's where the things go wrong!

You see, Teams App works in a different way on different platforms. There are 4 platforms: IOS, Android, Web, Desktop.

IOS - opens Tab/Task in webview, has no redirect limitations.

Android - opens Tab/Task in webview, has no redirect limitations.

Web - opens Tab/Task in iframe, has redirect limitations (X-Frame-Options).

Desktop - opens Tab/Task in iframe, has redirect limitations (X-Frame-Options). Well basically Desktop is the Electron app which hosts Web app. But it has popup limitation which i'll desctibe below.

The issue you are facing with is related to the Desktop platforms.

======================= The solution section ===========================

So here's what you should do to fix this:

1. Implement redirects for mobile platforms only.
2. Avoid redirects on Web/Desktop platforms and use msalService.acquireTokenPopup instead.
3. Desktop App doesn't open popup window (Why Microsoft, just why?) instead it deligates it to a default OS browser (that's the limitation i wrote above). So you have to handle it on your own.

Here's an example how to handle Desktop popup issue:

1. Make a session on the backend.
2. Connect to the backend's session from Desktop App via websocket.
3. Wait for a data from websocket.
4. Send data to the websocket from the redirectUri page (in the OS web browser) when user is successfuly signed in and redirected.