Teams应用Bot开发：用户输入特定文本时打开第三方注册页面的实现及对话框内打开方案（Node.js SDK）

Hey there! As someone who's built a few Teams Bots that integrate with third-party services, I totally get where you're coming from. Let's tackle your two questions one by one with practical, code-focused solutions using the Node.js Bot Framework SDK.

1. Can I open a registration webpage within a Teams dialog? #

Teams Bots don't support directly embedding external webpages inside standard dialogs, but you have two great alternatives that let users complete registration without leaving Teams:

Option A: Use an Adaptive Card with an Action.OpenUrl button #

This is the simplest approach—you can send an Adaptive Card that includes a button linking to your registration page. When clicked, it'll open the page in a new browser tab, or you can configure it to open in a Teams task module (see Option B) for a more integrated experience.

Here's a code snippet to send such a card in your dialog:

const { AdaptiveCards } = require("@microsoft/adaptivecards-tools");
const { MessageFactory } = require("botbuilder");

// Inside your dialog's onMessage handler or waterfall step
async function sendRegistrationCard(stepContext) {
    const cardJson = {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
                "type": "TextBlock",
                "text": "To access third-party platform info, please complete registration first!",
                "size": "Medium",
                "weight": "Bolder"
            }
        ],
        "actions": [
            {
                "type": "Action.OpenUrl",
                "title": "Go to Registration Page",
                "url": "https://your-third-party-registration-url.com"
            }
        ]
    };

    const cardAttachment = AdaptiveCards.declare(cardJson).render();
    await stepContext.context.sendActivity(MessageFactory.attachment(cardAttachment));
    return { status: DialogTurnStatus.waiting };
}

Option B: Use a Task Module to load the registration page #

If you want a more seamless experience (the page opens inside a Teams popup instead of a browser), you can use a Task Module. This keeps users within the Teams app while they register.

Here's how to trigger a Task Module from your bot:

const { TaskModuleRequest, TaskModuleResponseFactory } = require("botbuilder");

// Inside your dialog handler
async function triggerRegistrationTaskModule(stepContext) {
    const taskModuleRequest = {
        type: "task/fetch",
        data: {
            url: "https://your-third-party-registration-url.com",
            height: 600,
            width: 400,
            title: "Complete Registration"
        }
    };

    const response = TaskModuleResponseFactory.toTaskModule(taskModuleRequest);
    await stepContext.context.sendActivity(response);
    return { status: DialogTurnStatus.waiting };
}

2. How to open the third-party registration page in a new tab/browser when the user enters specific text? #

Teams doesn't allow bots to automatically open browser tabs for security reasons, but you can detect the user's specific input (like "register" or "sign up") and respond with a message that includes a clickable link or Adaptive Card button to open the registration page in a new tab.

Here's how to implement this in your bot's message handler:

const { ActivityHandler, MessageFactory } = require("botbuilder");
const { AdaptiveCards } = require("@microsoft/adaptivecards-tools");

class RegistrationBot extends ActivityHandler {
    constructor() {
        super();

        this.onMessage(async (context, next) => {
            const userInput = context.activity.text.toLowerCase();

            // Detect specific trigger text (e.g., "register", "sign up")
            if (userInput.includes("register") || userInput.includes("sign up")) {
                // Option 1: Send a plain text message with a hyperlink
                await context.sendActivity(`To register, click here: [Third-Party Registration](https://your-third-party-registration-url.com)`);

                // Option 2: Send an Adaptive Card (more visually appealing)
                const cardJson = {
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                    "type": "AdaptiveCard",
                    "version": "1.4",
                    "body": [
                        {
                            "type": "TextBlock",
                            "text": "Got it! Click the button below to complete your registration in a new browser tab:",
                            "wrap": true
                        }
                    ],
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "Open Registration Page",
                            "url": "https://your-third-party-registration-url.com",
                            "style": "positive"
                        }
                    ]
                };

                const cardAttachment = AdaptiveCards.declare(cardJson).render();
                await context.sendActivity(MessageFactory.attachment(cardAttachment));
            } else {
                // Handle other user inputs
                await context.sendActivity("Feel free to type 'register' to get started with the third-party platform!");
            }

            await next();
        });
    }
}

module.exports.RegistrationBot = RegistrationBot;

Key Notes: #

• Always use Action.OpenUrl for links—this ensures Teams handles the opening securely, either in a new browser tab or Teams task module (depending on your configuration).
• Never try to auto-open tabs/browsers directly from the bot—Teams blocks this for security and user experience reasons.
• Test your flow thoroughly in Teams (both desktop and mobile) to ensure the registration page loads correctly and the user can complete the process smoothly.

内容的提问来源于stack exchange，提问作者Sana.91