OfficeDev / microsoft-teams-library-js

JavaScript library for use by Microsoft Teams apps
https://docs.microsoft.com/microsoftteams/platform/
Other
428 stars 195 forks source link

Getting message "This app may have issues in the web version of teams" when adding the app #2185

Open nbelyh opened 7 months ago

nbelyh commented 7 months ago

Started getting the issue when adding the app in a WEB browser: The app is a few years old (not a new one).

image

If proceeding, there is an issue with login, this one (it launches the prompt in a completely new window, and getting teams token fails). image

"Invalid authResponse received from msal for resource api ...." The application is calling microsoftTeams.authentication.getAuthToken() at this point to get the teams token.

Any ideas what to look for? What does the first message mean, what are the changes? If I switch to the "classic" (old) teams in the web browser, all works as expected. Also in the desktop teams client it works like always.

Prasad-MSFT commented 7 months ago

@nbelyh - The error message indicates that there is an issue with the authentication process using MSAL (Microsoft Authentication Library) in your app. Please ensure that your authentication flow is compatible with both the desktop and web versions of Teams. and check if there have been any changes in the authentication process over the years that may affect the functionality of your app. Check if there are any outdated dependencies or libraries related to authentication that need to be updated to ensure compatibility with the latest Teams SDK and authentication mechanisms.

Also, could you please provide the app package if possible so that we can repro this at our end as well?

nbelyh commented 7 months ago

@Prasad-MSFT Thank you for the repsonse. The application is VisPlan, just try to install it from the Microsoft Store. You need to use NEW teams and WEB browser (in desktop client or "old" version of teams it works properly)

I will try to update to the latest version of all libraries, currently using teamsjs 1.12.1 (i.e. v.1.x) - could this cause the issue? Do you have any thought what libraries should be updated? The autnetication fails when calling teamsjs, i.e. microsoftTeams.authentication.getAuthToken. The app cannot get teams token. The applications does not seem to use MSAL library explicitly at this point, i.e. the error above is returned by teamsjs call (getAuthToken)

Could you please give some insights what does the first message mean? I mean, "This application may have issues with web version of teams", what are the conditions for it to show up? (it is shown only in the "new" teams). The screen with the heap of exclamation marks that is. This is probably not directly related to authentication (but may be), it just started showing that screen recenlty when installing the app in web-version.

just in case the below is manifest (with placeholders)

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "id": "{{APPLICATION_ID}}",
  "version": "{{VERSION}}",
  "packageName": "{{PACKAGE_NAME}}",
  "developer": {
    "name": "VisPlan",
    "websiteUrl": "https://visplan.com",
    "privacyUrl": "https://visplan.com/support/privacy-policy-for-visplan",
    "termsOfUseUrl": "https://visplan.com/support/terms-of-service",
    "mpnId": "...."
  },
  "name": {
    "short": "{{APPLICATION_NAME}}",
    "full": "{{APPLICATION_NAME}}"
  },
  "description": {
    "short": ".......",
    "full": "......"
  },
  "icons": {
    "outline": "{{ICON_OUTLINE}}",
    "color": "{{ICON_COLOR}}"
  },
  "accentColor": "#f0f0f0",
  "configurableTabs": [
    {
      "configurationUrl": "https://{{HOSTNAME}}/tab/config?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [
    {
      "entityId": "6bd761c2-658f-41d9-97a8-8ce92e126877",
      "scopes": [
        "personal"
      ],
      "context": [
        "personalTab"
      ],
      "name": "VisPlan",
      "contentUrl": "https://{{HOSTNAME}}/tab/personal?name={loginHint}&tenant={tid}&theme={theme}"
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "{{HOSTNAME}}"
  ],
  "defaultInstallScope": "team",
  "showLoadingIndicator": false,
  "publisherDocsUrl": "https://visplan.com/knowledge-base",
  "webApplicationInfo": {
    "id": "{{APPLICATION_ID}}",
    "resource": "api://{{HOSTNAME}}/{{APPLICATION_ID}}"
  },
  "localizationInfo": {
    "defaultLanguageTag": "en-us",
    "additionalLanguages": [
      {
        "languageTag": "sv-se",
        "file": "sv-se.json"
      }]
  }
}
Prasad-MSFT commented 7 months ago

Hi @nbelyh - We tried to repro this using VisPlan application. The first time when we tried to add the app in any team, it showed us the same error as you are encountering in New Teams Web browser. However, the next time when we tried to do the same it asked us to login and give consent using credentials and it worked successfully.

image image image image

nbelyh commented 7 months ago

@Prasad-MSFT Yes, exactly this is the problemn. I.e. this happens only FIRST TIME, when user has not consented yet (very first consent prompt is the problem). The new teams web client starts somehow switching windows (does some unexpected redirect??), and that results in the error in the issue description.

I.e. in principle "eventually" it works; it is the user interface in the new web client that appears to be "broken" somehow (or maybe not compatible with the old app), which may be indicated by the first screen with exclamation marks?

For new users this is really frustrating experience, and we would definitely like to have that fixed somehow.

Prasad-MSFT commented 7 months ago

@nbelyh - I agree with that. For new users that will not be good experience. We have raised a bug for the same. We will inform you once we get any further update from engineering team.

Thanks!

rahul-chanana commented 6 months ago

We are facing the same issue with our app.

microsoftTeams.authentication.getAuthToken() seems to be broken when we switch to new teams (v2) in web browser. It works fine in deskop clients though.

Additional info: as a result of above mentioned bug ("Invalid authResponse received from msal for resource api") the consent window is not opening up as a pop up but as a redirect in same browser tab as https://teams.microsoft.com/v2

Please provide an update about status of this bug.

rahul-chanana commented 5 months ago

Is there any update on the above mentioned problem "Invalid authResponse received from msal for resource::api:redacted" when using getAuthToken method of the library? Please note that due to this error consent for single-sign-on doesn't open as pop up in the browser version of Teams V2 but as a redirect in tab.

All works fine in desktop client though.

jke-r commented 5 months ago

@Prasad-MSFT : We have the same problem. This happens with our well established app as well with our newly developed app. Everything works fine in Desktop app. But in the browser we get the same screen, everytime(!) the app is loaded. This is a huge problem because it gives our users a very untrustworthy experience.

We have recently updated to teams-js 2.21.0. But it worked stable after the migration for several weeks. We did not change anything else so far.

Interesting thing: This also happens without token retreival. Our latest app (currently in development) does not receive any tokens from teams-js. Only the context information.

Our environment:

Update 1: We have updated to teams-js 2.22.0 and cleared the cache of the browser -> No affect. Same behaviour.

Do you have any update on that matter?

Prasad-MSFT commented 5 months ago

Apologies, currently there is no update to share. We will check this with engineering team and will update this thread once we hear from them. Thanks!

jke-r commented 4 months ago

@Prasad-MSFT : Any update on this? It still happens and is really annoying for our users and us.

nbelyh commented 4 months ago

Does anyone have an idea what that message mean? That is, how does it "know" that that app "...may have issues in the web version of Teams"? What kind of issues?

jke-r commented 4 months ago

@Prasad-MSFT, @nbelyh :

We have just checked:

Trkrkrl commented 4 months ago

Hi I was getting similar error with same message as @nbelyh . image

Invalid authResponse received from msal for resource::api:"

Solution for me : In Azure , Microsoft Entra we add client apps ID so they can access. These ıd's mentioned here: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-register-aad After adding these IDs: 1fec8e78-bce4-4aaf-ab1b-5451cc387264 =>for Teams mobile or desktop application

5e3ce6c0-2b1f-4285-8d4b-75ee78787346 =>for Teams web application image

my sso started working. I hope it helps

nbelyh commented 4 months ago

@Trkrkrl For us, the authentication is working (these IDs were added 3 years ago already). It is not working for a first-time user (when Teams rises a consent for a brand-new user, who never used the app before). Sorry if I was confusing about that. We just get a lot of redirects, and user has to reopen the app multiple times. But eventually it works.

You can also reproduce this situation if you delete "Enterprise App" in the "user's" environment (thus deleting all user's consents for it), and open the app tab.

This problem is pretty specific and happens when using NEW teams WEB client ("new" means "Teams V2") It does not happen with a Desktop/Mobile client, or "classic" teams web client.

jker-org commented 4 months ago

@Trkrkrl : Thank you for the hint. Unfortunately, that is not the cause for that problem. Those IDs have been added years ago. As @nbelyh mentioned: This is a very specific problem that only occurs with Teams V2 on the web.

@Prasad-MSFT : Any update from you on this? This is really frustrating for our users and leaves a bad impression about our app.

jbmyid commented 3 months ago

The warning page is shown when the browser has third-party cookies disabled eg: chrome incognito or safari. I wonder if we can disable this warning with the app manifest parameter.

ahukkanen commented 3 months ago

We are running an embedded Teams "Tab application" and also saw this message. Following above what @jbmyid said, I have gone through the process of allowing 3rd party cookies for the Microsoft services following this guidance: https://learn.microsoft.com/en-us/microsoftteams/troubleshoot/teams-sign-in/sign-in-loop

After that, the error is gone.

Would be of course nice if we could get rid of this error automatically for all users, even with 3rd party cookies disabled.

jker-org commented 3 months ago

@jbmyid , @ahukkanen : Thanks for your input. Unfortunately, it does not fix the situation for our apps (and others). We usually test with Edge, here the error occurs. However, third-party cookies are allowed.

@Prasad-MSFT : Any update from MS here?

image

Draginfable commented 3 months ago

Same thing here. I was testing with third-party cookies disabled to implement the Storage Access API, after being added. (https://github.com/OfficeDev/microsoft-teams-library-js/issues/1460)

Even though the Storage Access API works fine and the cookies of our app work fine when third-party cookies disabled, MS Teams shows this misleading warning.

cc @Prasad-MSFT I agree with @jbmyid that there should be a manifest flag to disable this warning.

jker-org commented 2 months ago

Hi @Prasad-MSFT, is there any update to this bug? When we perform a demo to prospects, this warning really is a problem.

tiennguyen1293 commented 2 months ago

I'm facing this issue on my App. It happened recently.

image