CODEWITHSUNDEEP
angularjsmicrosoft-graph-apimicrosoft-teams
Parth Agrawal
Parth Agrawal

Reputation: 73

How to know that web app is access on browser or from teams custom app

My web application is created in angular. Can I check whether web application is accessed from browser or Teams custom apps.

As I know this features is available for app which are created in react. example :- import { useTeams } from "msteams-react-base-component"; const [{ inTeams, theme, context }] = useTeams();

Above inTeams return boolean, which tells whether app is accessed from browser or custom app.

So I get this in angular as well?

Upvotes: 2

Views: 2263

Answers (2)

Hilton Giesenow
Hilton Giesenow

Reputation: 10804

There is a property on the Teams Context object called hostClientType, which I think is/was meant to deal with this. It contains values like 'web' and 'desktop', and it used to be documented here but this doc has been updated to remove this property (amongst others). Here is an older version of the same doc which contains more info. The property still exists, and it holds this info, but I'm not sure why it was removed from the documents (perhaps the property has been deprecated).

Upvotes: 1

eniel.rod
eniel.rod

Reputation: 855

You can take the function from msteams-react-base-component, it's very simple:

import * as microsoftTeams from "@microsoft/teams-js";

export const checkInTeams = (): boolean => {
    // eslint-disable-next-line dot-notation
    const microsoftTeamsLib = microsoftTeams || window["microsoftTeams"];

    if (!microsoftTeamsLib) {
        return false; // the Microsoft Teams library is for some reason not loaded
    }

    if ((window.parent === window.self && (window as any).nativeInterface) ||
        window.name === "embedded-page-container" ||
        window.name === "extension-tab-frame") {
        return true;
    }
    return false;
};

Source

Upvotes: 4

Related Questions