Adding Did as Microsoft Teams app or channel tab

[pettersh]

We should support did as an app in Microsoft Teams!

I used the App Studio in Teams to create a manifest (see attached zip)
DID365.zip

I installed it for myself directly from the App Studio and got the following result:

Edge Chromium dev console reports the following: https://teams.microsoft.com/_#/apps/785ddc76-aa79-4d30-97cf-9f3414cb1834/sections/DID365

Refused to display 'https://did365.azurewebsites.net/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[olemp]

Anything you could have a look at @pzlespen?

[pettersh]

I changed DID address to https://did365.puzzlepart.com/, but still the same error.

Refused to display 'https://did365.puzzlepart.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[pettersh]

X-Frame-Options: ALLOW-FROM https://teams.microsoft.com

[olemp]

This is probably due to frameguard from helmet.

https://helmetjs.github.io/docs/frameguard/

[olemp]

@pettersh You could clone did365 locally, install npm packages, and run npm run watch.

See if you can then embed localhost:8080 in Teams.

Try to do the following in middleware\helmet\index.js:

module.exports = helmet({
    frameguard: {
        action: 'allow-from',
        domain: 'https://teams.microsoft.com'
    },
    hidePoweredBy: true,
    hsts: helmet.hsts({ maxAge: 5184000 }),
    ieNoOpen: true,
    noSniff: true,
});

[olemp]

Get down and dirty into the code @pettersh 🔪

[okms]

Im not sure you will be able to test this against localhost though

[olemp]

Im not sure you will be able to test this against localhost though

Then he'll have to do a PR against dev with a feature branch and we can test it there. Or create another slot for this particular test in Azure.

[olemp]

Closing due to inactivity.

[okms]

I've tested and verified that modifying the helmet config does indeed allow iframe requests from teams. It does not, however, do anything with regards to SSO so you will have to log in inside the iframe in teams.

I have done a quick Teams SSO PoC using the dev. preview of yo teams to generate the app (and of course setting up the plumbing in AAD). This did however not work with the current auth mechanism for Did365, so we'll have to look into that at some point too.

I'll turn in a PR for the helmet minor change in the next couple of minutes, and we'll let this run its course. So hopefully you can get your basic did365 frame soon @pettersh :)

[okms]

for future reference, the documentation for Teams SSO https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso

[pettersh]

@okms this is not deployed to any env yet? I've got unsuccessful attempts with both https://did365.puzzlepart.com and https://did365-dev.azurewebsites.net/

[olemp]

@okms this is not deployed to any env yet? I've got unsuccessful attempts with both https://did365.puzzlepart.com and https://did365-dev.azurewebsites.net/

Not merged into dev yet.

#239

cc @okms