如何知道 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”之類的值，它曾經在此處記錄，但此文檔已更新以刪除此屬性（以及其他屬性）。 這是同一文檔的舊版本，其中包含更多信息。 該屬性仍然存在，並且包含此信息，但我不確定為什么將其從文檔中刪除（也許該屬性已被棄用）。