question

MatthewWigley-5378 avatar image
0 Votes"
MatthewWigley-5378 asked MatthewWigley-5378 answered

Detect whether website is being hosted within a teams personal tab

Hello,
We are currently working on allowing our webapp to be hosted within Microsoft Teams.

We need to detect whether the app is being hosted by teams so that we can adjust our auth flows and page styling.

Is there any way to detect whether the website is currently iframed within MS teams?

We've tried using the @microsoft/teams-js library by calling microsoftTeams.getContext() but it only returns values if the app is within teams, but there's no failure callback. This means that to use it we have to do a setTimeout and just guess that if getContext() hasn't returned within a certain amount of time that it's not going to return. This blocks our app from loading and is also a bit flakey since there's no guarantee that the timeout we choose will be long enough.

Is there a better way to detect whether the app is hosted by teams?

office-teams-app-dev
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MatthewWigley-5378 avatar image
0 Votes"
MatthewWigley-5378 answered

Thanks for the reply Jagadeesh!

That's not ideal since it still requires a 'DONT_KNOW_YET' state. We've done some more searching and found this StackOverflow post that looks like it might work:
https://stackoverflow.com/questions/65300347/how-to-know-that-web-app-is-access-on-browser-or-from-teams-custom-app . the crux of it being to check

window.name === "embedded-page-container" ||
        window.name === "extension-tab-frame"

So I'll give that a go. It looks a little flakey though since it relies on teams setting the window.name.

Thanks!

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JagadeeshLankiReddy-5847 avatar image
1 Vote"
JagadeeshLankiReddy-5847 answered

Hi@MatthewWigley-5378, Please refer to this code once -> https://stackblitz.com/edit/react-cuadoi?file=src%2FApp.js

microsoftTeams.getContext will never call the callback in the example that you provide because the Teams parent window (or Teams App) does not exist and therefore never calls the callback. It also errors out since microsoftTeams.initialize was not called: Error: The library has not yet been initialized..

Following is from https://github.com/OfficeDev/microsoft-teams-library-js/blob/master/src/public/publicAPIs.ts#L159

sendMessageToParent('getContext', (context: Context) => {
if (!context.frameContext) {
// Fallback logic for frameContext properties
context.frameContext = GlobalVars.frameContext;
}
callback(context);
});
Instead of having three states: TEAMS, NOT_TEAMS, and DONT_KNOW_YET, we only currently have two since NOT_TEAMS is unreachable. Here is a code example that explains the problem.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.