Microsoft teams bot authentication blank screen

Question

Trying to set up the auth flow for the bot authentication based on this doc.

I'm confused about multiple things: it seems like the auth flow for Microsoft teams bot is different from the bot framework auth flow. One has callbacks and sign-in cards and the other has some sort of dialog process?

I get that the teams will open a pop up to my auth site, and then my auth site will at one point call notifySuccess. But how does the Microsoft teams npm package know where to auth/notifySuccess to? It doesn't seem like the package requires any sort of chat id or bot id. example
I'm able to send back a sign-in card

    let signinCard = CardFactory.heroCard(
          'Click below to sign in',
          null,
          [
              {
                  type: ActionTypes.Signin,
                  value: 'https://localhost:4200/bot/auth/login',
                  title: 'Sign in'
              }
          ])
    await context.sendActivity({ attachments: [signinCard] });

Manifest valid domains

  "validDomains": [
    "localhost",
    "*.ngrok.io",
    "token.botframework.com"
  ]

But the sign-in link on the web version just opens up a new tab meanwhile sideloading from the desktop app opens up a blank popup

Highly appreciate it if someone knows what I'm missing

roa roa · Accepted Answer · 2021-01-12T00:49:17

Your sign-in page is opened in an iframe inside Teams. And microsoftTeams.js communicates with Teams. This will let Teams know your website sent success notification.
Blank screen reason - incorrect validDomains in manifest file. localhost:4200 should be included in validDomains.

Microsoft teams bot authentication blank screen

1 Answers