Botbuilder-js: Adaptive card sign in submit not working for MS Teams

[tabrza]

Versions

What package version of the SDK are you using.
v4.3.4
What nodejs version are you using
v10.15.3
What os are you using
Same result on Win10 and iOS when using MS Teams

Describe the bug

When trying to authenticate, while the redirect url does appear when hovering over the adaptive card prompt in MS TEAMS, clicking on it does nothing. This prompt does work in Skype.

Expected behavior

Upon clicking 'sign in', a web page should open enabling the user to authenticate themselves.

Screenshots

[bug]

[benbrown]

Likely related to https://github.com/microsoft/botbuilder-dotnet/pull/1887

[tdurnford]

I reproduced this issue using the Bot Authentication Sample. It looks like when the user clicks the Sign In button on the SignIn Card, Teams is not opening a web browser and navigating to the login page. I wrote a simple middleware that changes the action type of the button from ActionTypes.Signin to ActionTypes.OpenUrl, and with the middleware, the sample works as expected in the Teams Channel.

adapter.use(async (turnContext, next) => {

    turnContext.onSendActivities(async (context, activities, nextSend) => {

        if (turnContext.activity.channelId !== 'msteams') {
            return await nextSend();
        }

        for (let i = 0; i < activities.length; i++) {
            if (activities[i].attachments) {
                for (let j = 0; j < activities[i].attachments.length; j++) {

                    const {content, contentType } = activities[i].attachments[j];

                    if (contentType === 'application/vnd.microsoft.card.signin') {
                        activities[i].attachments[j] = {
                            contentType,
                            content: {
                                ...content,
                                buttons: content.buttons.map(button => ({ ...button, type: button.type === ActionTypes.Signin? ActionTypes.OpenUrl: button.type }))
                            }
                        }
                    }
                }
            }
        }

        await nextSend();
    });
    await next();
});

This middleware is not a solution to the issue and needs to be investigated further in Teams.

[tabrza]

Thanks for the pointing me in the right direction here.
Cheers

[EricDahlvang]

Reopening. This is an SDK issue that needs to be resolved.

[tdurnford]

It looks like to make the Sign In button work in Teams, you have to create an App Manifest that includes 'token.botframework.com' in the valid domains and sideload it into Teams. Take a look at the sample manifest below.

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
  "manifestVersion": "1.3",
  "version": "1.0.0",
  "id": "<APP_ID>",
  "packageName": "com.example.myapp",
  "developer": {
    "name": "TJ Durnford",
    "websiteUrl": "https://auth-bot.com/",
    "privacyUrl": "http://web-policies.azurewebsites.net/privacy",
    "termsOfUseUrl": "http://web-policies.azurewebsites.net/terms"
  },
  "name": {
    "short": "Auth Bot"
  },
  "description": {
    "short": "Authentication Bot",
    "full": "Authentication Bot"
  },
  "icons": {
    "outline": "bot_32.png",
    "color": "bot_192.png"
  },
  "accentColor": "#468499",
  "bots": [
    {
      "botId": "<APP_ID>",
      "scopes": [
        "team",
        "personal",
        "groupchat"
      ],
      "supportsFiles": true
    }
  ],
  "validDomains": [
    "token.botframework.com"
  ]
}

Note, to make the bot authentication sample function correctly with Teams, you also have to handle Invoke Activities. If you are working from the Bot Authentication sample, you would add the code snippet below to the dialogBot's activity handler.

this.onUnrecognizedActivityType(async (context, next) => {
    if (context.activity.type === ActivityTypes.Invoke) {
        await this.dialog.run(context, this.dialogState);
    }
    await next();
});

Hope this helps.