search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.25k stars 1.02k forks source link

WebPart exposed as teams' compose extension are not working inside Teams Mobile #9018

Open stevebeauge opened 1 year ago

stevebeauge commented 1 year ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

Additional environment details

On desktop :

On android : latest Teams app (1416/1.0.0.2023103504/0605)

Tested with SPFX 1.17.3 + node 16.20.1

Describe the bug / error

We are developing SPFX webparts that are exposed in Microsoft Teams.

Some webparts are exposed as staticTabs, some others as composeExtension.

On desktop, everything is working properly: both static tabs and compose extension are able to show the webparts:

Exemple of compose extension: image

However, on Teams mobile I get an error (Android version but some users reported issue with IOS too):

image

In english: Failed to load webview. Please check whether the specified app is available.

Most of the discussions I found related to this issue (like https://github.com/MicrosoftDocs/msteams-docs/issues/4254) are related to targeted content not available as IFrame because of CSP issues.

However, because the task module is hosted by SharePoint itself, I cannot control the headers sent by the server.

Since the webparts are OK as static tabs, I think this is very specific to the way Teams load the task module.

Because the failure happens before the webview is loaded. Web dev tools (inspect from edge://inspect) is not possible, the page is not yet loaded. I didn't find any location where I can get some clue about the error (no console,...).

In order to test, I took the manifest build automatically by sharepoint, and I just added the compose extension:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "version": "1.0.0",
  "manifestVersion": "1.16",
  "id": "3249eed9-2f35-4ba0-a3f0-57cac9caccf7",
  "packageName": "InTeams",
  "name": {
    "short": "InTeams",
    "full": "InTeams"
  },
  "developer": {
    "name": "SPFx + Teams Dev",
    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
  },
  "description": {
    "short": "InTeams",
    "full": "InTeams"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [
    {
      "entityId": "3249eed9-2f35-4ba0-a3f0-57cac9caccf7",
      "name": "InTeams",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}",
      "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
      "scopes": [
        "personal"
      ]
    }
  ],
  "composeExtensions": [
    {
      "botId": "ea6b93fd-0bdf-4cd2-b4ea-4e051f1af636",
      "commands": [
        {
          "id": "uploadFileSP",
          "type": "action",
          "title": "Test compose extension",
          "description": "",
          "initialRun": false,
          "fetchTask": false,
          "context": [
            "message"
          ],
          "taskInfo": {
            "title": "Test compose extension",
            "width": "large",
            "height": "large",
            "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}"
          }
        }
      ],
      "canUpdateConfiguration": false
    }
  ],
  "validDomains": [
    "{teamsitedomain}{teamsitepath}",
    "{teamsitedomain}",
    "products.office.com",
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "id": "00000003-0000-0ff1-ce00-000000000000",
    "resource": "https://{teamSiteDomain}"
  }
}

Steps to reproduce

  1. bootstrap a new SPFX project using the latest version of spfx (1.17.3)
  2. generate the sppkg solution
  3. Add to the tenant's app catalog the generated package.
  4. Ensure "Add to teams" is enabled
  5. Export the generated manifest (as described in Deployment options for SharePoint Framework solutions for Microsoft Teams using _api/web/tenantappcatalog/downloadteamssolution(id)/$value endpoint)
  6. In Teams, using Developer Portal, declare a bot

  7. In the extracted manifest, add a compose extension:

    "composeExtensions": [
  {
    "botId": "191dd4c6-67de-46e6-9283-cceaaafccec6",
    "canUpdateConfiguration": false,
    "commands": [
      {
        "id": "uploadFileSP",
        "type": "action",
        "title": "Test compose extension",
        "description": "",
        "initialRun": false,
        "fetchTask": false,
        "context": [
          "message"
        ],
        "taskInfo": {
          "title": "Test compose extension",
          "height": "large",
          "width": "large",
          "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}"
        }
      }
    ]
  }
]
  8. Fix botId to match the bot you set up previously and set the componentId part inside the taskinfo url to your WebPart component (should be the same as the static tab already in the manifest)
  9. Zip the manifest
  10. Inside teams, publish the updated manifest either in the organization store or as side-loaded app and install the application
  11. On the desktop, ensure everything is working properly:
    • The static tab of the application should contains the webpart ✅
    • From a conversation, your should have the "Test compose extension" available and when you select it, the task module should open (maybe you'll have to add the application to the conversation) ✅
  12. On an Android mobile device (actual device or emulator), open MS Teams
    • From the application list, you should see your app. Open it and it should be working ✅
    • From a conversation, in message action, you should see the "Test compose extension". Click of the action. Instead of displaying the task module, you'll end up with the error window ❌

Expected behavior

Compose extension built using SPFX should works, same as static tabs built using same framework.

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

AJIXuMuK commented 1 year ago

@stevebeauge - thanks for reporting this one. If you look at the documentation, the url for the messaging extension should reference teamstaskhostedapp.aspx page, not teamshostedapp.aspx. Could you please modify it and check if that helps?

stevebeauge commented 1 year ago

Thanks @AJIXuMuK.

I fixed the manfiest URL to match the one in the documentation:

          "taskInfo": {
            "title": "Test compose extension",
            "height": "large",
            "width": "large",
            "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}"
          }

But it behaves exactly the same :(

I wonder if it can be related to validDomains. The few WebViews issues I found (not specific to MS Teams) mention some CORS / CSP issue.

Unless I'm missing something, there's no public documentation related to this configuration. I keep the default ones generated when I try "sync to teams" feature without manual manifest:

  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],

Is this list correct?

AJIXuMuK commented 1 year ago

@stevebeauge - could you by any chance share the app with me that I could test? you can use aterentiev@microsoft.com to privately send it to me.

stevebeauge commented 1 year ago

Published a repro here: https://github.com/stevebeauge/repro-sp-dev-docs-issues-9018

AJIXuMuK commented 1 year ago

Sorry @stevebeauge for the long delay. It's a bit weird but for some reason I can't even add the app you shared as a message extension (works fine as personal app and notification-only bot). I'm seeing you've opened an issue on Teams side - it's a good decision as it feels like something is wrong there.

stevebeauge commented 1 year ago

For reference: https://github.com/OfficeDev/TeamsFx/issues/9241#issuecomment-1634187050

Seems to be an issue with the {teamSiteDomain} resolution when neither staticTabs nor configurableTabs is present.

However, adding temporary these tabs does not solve the original issue of this issue (not working inside teams mobile)

HuihuiWu-Microsoft commented 1 year ago

Hi @AJIXuMuK, would like to confirm with you on this issue https://github.com/OfficeDev/TeamsFx/issues/9241#issuecomment-1634187050. Currently *.sharepoint.com exists in validDomains field in both SPFx official doc and auto-generated Teams manifest file (https://learn.microsoft.com/en-us/sharepoint/dev/spfx/deployment-spfx-teams-solutions#automatically-create-the-microsoft-teams-app-manifest-and-package). Since *.sharepoint.com doesn't pass marketplace validation (https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines#external-domains), will you regard this as a bug and update both sides?

stevebeauge commented 1 year ago

@HuihuiWu-Microsoft this issue is not related to validDomains, but to the inability to load SPFX based compose extension on mobile client.

I mentioned the other issue to add context and potential field of investigation.

HuihuiWu-Microsoft commented 1 year ago

@stevebeauge Yes, I know this is not totally the same issue as https://github.com/OfficeDev/TeamsFx/issues/9241#issuecomment-1634187050 but they might be potentially related.

But the validDomains issue is valid and SPFx side may also need to update if this is a bug. Or I can open another issue to confirm the validDomains issue.

AJIXuMuK commented 1 year ago

Hi @AJIXuMuK, would like to confirm with you on this issue OfficeDev/TeamsFx#9241 (comment). Currently *.sharepoint.com exists in validDomains field in both SPFx official doc and auto-generated Teams manifest file (https://learn.microsoft.com/en-us/sharepoint/dev/spfx/deployment-spfx-teams-solutions#automatically-create-the-microsoft-teams-app-manifest-and-package). Since *.sharepoint.com doesn't pass marketplace validation (https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines#external-domains), will you regard this as a bug and update both sides?

This is an issue with marketplace validation, not the manifest. We can't remove *.sharepoint.com from validDomains. @GrahamMcMynn - please, correct me if I'm wrong.

HuihuiWu-Microsoft commented 1 year ago

@AJIXuMuK In that case, if user scaffold a SPFx solution and deploy to Teams with automatically generated app package(https://learn.microsoft.com/en-us/sharepoint/dev/spfx/deployment-spfx-teams-solutions#automatically-create-the-microsoft-teams-app-manifest-and-package), he will get validation failure from marketplace team when he wants to publish to Teams store. He needs to manually update the validDomains field to pass the validation, is that expected?

AJIXuMuK commented 1 year ago

@HuihuiWu-Microsoft I'd say uploading SPFx Teams solution to the marketplace is not a valid scenario at all as of now. You must deploy sppkg file to the SharePoint App Catalog to make it work. That's why ISVs should use SharePoint Store for their solutions right now, not Teams marketplace. If we go to the Teams Marketplace at some point, the validation should be changed to allow *.sharepoint.com in validDomains for SPFx solutions.

HuihuiWu-Microsoft commented 1 year ago

Got it, thanks @AJIXuMuK!

AJIXuMuK commented 1 year ago

@HuihuiWu-Microsoft I have confirmed that changing *.sharepoint.com to {teamSiteDomain} should work. So it can be a way at least for now if someone wants to publish a solution to the marketplace.

stevebeauge commented 1 year ago

Thanks for your feedback.

Let me recap the current status of the different issues, and my understanding of technical or functional analysis:

  1. The initial subject of this issue is that a compose extension build using SPFX does not load on teams mobile (neither android nor IOS). The last response from MS is in https://github.com/OfficeDev/microsoft-teams-library-js/issues/1830 (which is a “cross post” of this one), and we are waiting for further investigation on MS side.
  2. 2nd issue concerns the validDomains that Teams app submission team ask to restrict to only url we own. They explicitly asked us to remove everything but {teamsSiteDomain} and our hosted azure web apps which contains the logic. I raised an issue to highlight that a SPFX project bootstrapped contains invalid validDomains regarding the validation. It sounds incorrect and unclear to have two MS teams (SFPX and Teams) not to have the same position regarding this restriction.
  3. Last issue, still related to validDomains but this time with a technical view, is related to the incorrect {teamsSiteDomain} resolution when there’s only compose extension in the manifest. Our testing shows that a task module url based on SPFX won’t load unless there’s another static or configurable tab also based on SPFX (seems like URL analysis in the manifest behaves differently on tabs and compose extension). Currently we have no solution regarding this, and I fear the discussion regarding this point is buried under the other debates. Maybe a new dedicated issue should be required.

That said, @AJIXuMuK mentioned that the app should be put on SP marketplace, not a on Teams because the SPFX app won’t work without the sppkg deployed.

This is technically true, but we addressed the issue: the actual URL of our tabs and compose extension or not under {teamSiteDomain} but are in form of https://somehosting.azurewebsites.net/redirect=https:/%7bteamSiteDomain%7d/rest-of-path-to-spfx.

This intermediate page allows us to perform some checks, especially if the user is in our customer DB.

Putting technical aspects aside, we are selling a Teams application, and our communication reflects this aspect. Even if the SharePoint side needs a technical setup, the front side of the app is mostly Teams.

That’s why we need to publish the app in Teams store, not in SP Store.

HuihuiWu-Microsoft commented 1 year ago

@HuihuiWu-Microsoft I have confirmed that changing *.sharepoint.com to {teamSiteDomain} should work. So it can be a way at least for now if someone wants to publish a solution to the marketplace.

Thanks @AJIXuMuK. You're right, I've also tested to replace *.sharepoint.com to {teamSiteDomain} and everything works. I think the only problem is that it may confuse users as @stevebeauge mentioned as 2nd issue. But I kind of understand because the Teams SPFx project can be published to either tenant scope or Teams marketplace while the validDomains restriction is only from Teams marketplace side.

stevebeauge commented 1 year ago

Hello,

Any update on this? (regarding the initial issue : compose extension not working on teams mobile if built with SPFX, issue with validDomains is another issue)

Thanks