Hello, everybody!
I am trying to build an app (webview) for MS Teams. It should show up on the right hand side of video calls.
I am basing on this repo: https://github.com/pnp/generator-teams/tree/main/packages/generator-teams
During development, I am using NGrok (which is the way that is documented), and uploading the ZIP file directly (via "Manage Apps" -> "Upload").
Everything was working great until March the 1st, where, in the version for Work or School, I started getting, when adding the app to the call (after uploading the ZIP file), the following error:
"Something went wrong when loading tab configuration dialog, please try again later" (screenshot attached).
A few considerations:
- I have checked my server logs, and there is no request made to the configuration tab URL
- If I open the configuration tab URL on my browser, it works
- I have tried disabling CORS, but nothing
- I have tried replacing the NGrok based URL with a "live" one. Also no luck
- It all stopped working suddenly for everybody in my team, without us having changed anything in the code base.
- I tried removing the "bots" and "staticTabs" sections in the manifest. No luck.
Could anybody help pointing me in the right direction? Thanks a lot in advance!
Here is the manifest.json file:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.13/MicrosoftTeams.schema.json",
"manifestVersion": "1.13",
"id": "<ID_OF_THE_APP>",
"version": "0.0.1",
"packageName": "teams-voice",
"developer": {
"name": "Test Dev",
"websiteUrl": "https://teams-voice-app.ngrok.io",
"privacyUrl": "https://teams-voice-app.ngrok.io/privacy.html",
"termsOfUseUrl": "https://teams-voice-app.ngrok.io/tou.html"
},
"name": {
"short": "teams-voice",
"full": "teams-voice"
},
"description": {
"short": "TODO: add short description here",
"full": "TODO: add full description here"
},
"icons": {
"outline": "icon-outline.png",
"color": "icon-color.png"
},
"accentColor": "#D85028",
"configurableTabs": [
{
"configurationUrl": "https://teams-voice-app.ngrok.io/voiceTab/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
"canUpdateConfiguration": true,
"context": [
"channelTab",
"privateChatTab",
"meetingChatTab",
"meetingDetailsTab",
"meetingSidePanel",
"meetingStage"
],
"scopes": ["team", "groupchat"]
}
],
"staticTabs": [
{
"entityId": "<ID_HERE>",
"name": "test",
"contentUrl": "https://teams-voice-app.ngrok.io/Bot/test.html",
"scopes": ["personal", "team"]
}
],
"bots": [
{
"botId": "<ID_HERE>",
"needsChannelSelector": true,
"isNotificationOnly": false,
"scopes": ["team", "personal", "groupchat"],
"supportsCalling": true,
"supportsVideo": true,
"commandLists": [
{
"scopes": ["team", "personal"],
"commands": [
{
"title": "Help",
"description": "Shows help information"
},
{
"title": "Who am I?",
"description": "Shows information about your Teams user"
},
{
"title": "Mention me",
"description": "Let the bot @mention you"
}
]
}
]
}
],
"connectors": [],
"composeExtensions": [],
"permissions": ["identity", "messageTeamMembers"],
"validDomains": ["teams-voice-app.ngrok.io"],
"showLoadingIndicator": false,
"isFullScreen": false
}