如何知道 web 应用程序可在浏览器或团队自定义应用程序上访问

Question

我的 web 应用程序是在 angular 中创建的。 我可以检查是否从浏览器或团队自定义应用程序访问 web 应用程序。

据我所知，此功能可用于在 react 中创建的应用程序。 示例：- 从“msteams-react-base-component”导入 { useTeams }； const [{ inTeams, 主题, 上下文}] = useTeams();

上面的 inTeams 返回 boolean，它告诉应用程序是从浏览器还是自定义应用程序访问。

所以我也在 angular 中得到这个？

Answer 1

您可以从 msteams-react-base-component 获取 function，非常简单：

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;
};

资源

Answer 2

Teams Context object 上有一个名为hostClientType的属性，我认为它是/应该处理这个问题。 它包含诸如“web”和“desktop”之类的值，它曾经在此处记录，但此文档已更新以删除此属性（以及其他属性）。 这是同一文档的旧版本，其中包含更多信息。 该属性仍然存在，并且包含此信息，但我不确定为什么将其从文档中删除（也许该属性已被弃用）。