Having Difficulty Displaying Web Frame with Task Module - Microsoft Bot Framework - botframework

Question

I have followed the microsoft documentation.
From it, I understand that "I can run my own custom HTML/JavaScript code" and make it display on teams with Task Module.
I have done everything recommended my card is showing blank each time invoke the task module.
I'm using the BotBuilder-Sample Node JS SDK
teamsTaskModuleBot.js file contains
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
const {
TeamsActivityHandler,
MessageFactory,
CardFactory,
} = require("botbuilder");
class TeamsTaskModuleBot extends TeamsActivityHandler
{
constructor ()
{
super();
// See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
this.onMessage(async (context,next) =>
{
const card = this.getHeroCardMenu();
const message = MessageFactory.attachment(card);
await context.sendActivity(message);
// By calling next() you ensure that the next BotHandler is run.
await next();
});
this.onMembersAdded(async (context,next) =>
{
const card = this.getHeroCardMenu();
const message = MessageFactory.attachment(card);
await context.sendActivity(message);
// By calling next() you ensure that the next BotHandler is run.
await next();
});
}
getHeroCardMenu ()
{
return CardFactory.heroCard(
"Task Module Invocation from Hero Card",
null, // No images
[
{
type: "invoke",
title: "Open",
value: {type: "task/fetch"},
},
]
);
}
handleTeamsTaskModuleFetch (context,taskModuleRequest)
{
// taskModuleRequest.data can be checked to determine different paths.
return {
task: {
type: "continue",
value: {
url: "https://botiframe.netlify.app/index.html",
height: "medium",
width: "medium",
title: "Task Module Bot",
fallbackUrl: "https://botiframe.netlify.app/index.html"
},
},
};
}
}
module.exports.TeamsTaskModuleBot = TeamsTaskModuleBot;
My manifest.json file
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "208a91ef-baa9-460d-bf8d-7c7bc2f475e0",
"packageName": "com.dipolediamond.taskmodule",
"developer": {
"name": "dipoleDiamond Ltd",
"websiteUrl": "https://www.dipolediamond.com",
"privacyUrl": "https://www.dipolediamond.com/blog",
"termsOfUseUrl": "https://www.dipolediamond.com/contact"
},
"icons": {
"color": "icon-color.png",
"outline": "icon-outline.png"
},
"name": {
"short": "Task Module Bot",
"full": "Simple Task Module Bot"
},
"description": {
"short": "Test Task Module Sample Bot",
"full": "Simple Task Module Sample Bot"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "208a91ef-baa9-460d-xxxx-xxxxxxx",
"scopes": ["personal", "team", "groupchat"],
"supportsFiles": false,
"isNotificationOnly": false
}
],
"permissions": ["identity", "messageTeamMembers"],
"composeExtensions": [
{
"botId": "208a91ef-baa9-460d-xxxx-xxxx",
"canUpdateConfiguration": true,
"commands": [],
"messageHandlers": [
{
"type": "link",
"value": {
"domains":"www.botiframe.netlify.app"
]
}
}
]
}
],
"validDomains": ["www.botiframe.netlify.app"]
}

Answer 1

Before showing your web content, Teams does some basic validation of the end address. This requires, as you've done, that the domain be registed with validDomains and domains sections. However, when I visit the site, I'm getting a certificate error, so it's likely that Teams is blocking your site for that reason. Are you able to get that resolved (custom domain, or cert matching domain (the cert is for *.netlify.com, but your site is running on netlify.app)? Try that first.