Detect whether website is being hosted within a teams personal tab

Question

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?

Answer 1

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!

Answer 2

Hi@Matthew Wigley , 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.