從 SharePoint Online 網站或頁面建立 Teams「內部網路入口網站應用程式」Create a Teams 'Intranet Portal app' from a SharePoint Online site or page

請使用本文中的步驟,在連結至組織內部網路網站的 Teams 內部建立獨立且靜態的應用程式。Use the steps in this article to create a standalone and static app inside of Teams that links to the intranet site for your org.

系統會為您的 SharePoint 內部網路網站建立 「Teams 個人版應用程式」,並顯示為 Teams 內部的索引標籤。A Teams Personal App of your SharePoint intranet site is created, and will appear as a tab inside of Teams. 此索引標籤會包含所有 Teams 使用者的重要資訊。This tab can contain information important to all your Teams users. 這種方式既快速又便利,Teams 使用者只要按一下索引標籤就能存取更新。It is a quick and convenient way for Teams users to access updates just a tab click away.

請注意,所顯示的程序 *必須使用***「新式」 SharePoint 網站或頁面才能運作。Be aware that the process shown must use a modern SharePoint site or page to work. 此程序不適用於 「傳統」 網站或頁面。This process is not available for classical sites or pages.

重要

請確定您已為租用戶啟用 Teams 應用程式側載功能。Make certain that side-loading of Teams apps is enabled for your tenant. 視您在 Teams 系統管理入口網站移轉程序中所處的位置而定,您可能要在 [Teams] > [系統管理] 底下啟用此功能;如果是舊版入口網站,則要在 [系統管理] > [設定] > [服務與增益集] > [Microsoft Teams] > [應用程式] > [外部應用程式] 底下啟用。Depending on where you are in the migration process of the Teams Admin portal, you might need to enable it either under Teams > Admin, or under Admin > Settings > Services and Add-ins > Microsoft Teams > Apps > External Apps, in the previous version of the portal!

使用 App Studio 來建立獨立的 SharePoint Online 應用程式Use App Studio to create your standalone SharePoint Online app

開始之前:Before you begin:

  1. 您必須知道 SharePoint Online 新式通訊或 Teams 網站或頁面的 URL。You'll need to know the URL of a SharePoint Online modern Communication or Team site, or page.

    • 這些網站的路徑中一律會有 /teams//sites/These sites will always have either /teams/ or /sites/ in their paths.
  2. 您必須知道租用戶的子網域,以便用於預留位置 {{subdomain}}You'll need to know your tenant's subdomain, which will be used in the placeholder {{subdomain}}.

  3. 本文會使用 {{siteUrl}} 作為預留位置來指出您所選網站或頁面的 URLThis article will use {{siteUrl}} as a placeholder for the URL of the site or page you chose.

    • 範例 URLhttps://contoso.sharepoint.com/teams/ContosoExample URLs: https://contoso.sharepoint.com/teams/Contoso https://contoso.sharepoint.com/sites/Contosoor https://contoso.sharepoint.com/sites/Contoso
  4. 此外,會使用 {{sitePath}} 來表示 URL 的 「路徑」 (例如:/teams/Contoso)。Also, {{sitePath}} will be used to denote the path of the URL (ex: /teams/Contoso).

    • 範例 「路徑」:/teams/Contoso /sites/ContosoExample paths: /teams/Contoso or /sites/Contoso

請遵循下列步驟來開始:Begin by following the steps below:

  1. 移至 Teams Store。Go to the Teams Store.

  2. 安裝或開啟 App Studio。Install or open App Studio.

  3. 按一下 [應用程式] 選項旁的 [開啟]Click Open, next to the App option.

  4. 在 App Studio 已開啟時,按一下 [資訊清單編輯器]With App Studio open, click on Manifest Editor.

  5. 建立新的應用程式Create a new app.

  6. 填寫所有 [應用程式詳細資料]Fill in all App Details.

  7. 按一下 [功能] 底下的 [索引標籤]Click on Tabs under Capabilities.

  8. 按一下 [個人] 索引標籤底下的 [新增]Click Add under Personal Tab.

  9. 填寫 [名稱],然後選擇 [新的唯一實體識別碼]Fill in the Name and choose a new unique Entity ID.

  10. 填寫 contentURL 和網站 URLFill in the contentURL and Website URL.

  • contentUrl:{{siteUrl}}/_layouts/15/teamslogon.aspx?SPFX=true&dest={{sitePath}}contentUrl: {{siteUrl}}/_layouts/15/teamslogon.aspx?SPFX=true&dest={{sitePath}}

  • websiteUrl:{{siteUrl}}websiteUrl: {{siteUrl}}

    範例 contentURLhttps://contoso.sharepoint.com/sites/ContosoHub/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/ContosoHubExample contentURL: https://contoso.sharepoint.com/sites/ContosoHub/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/ContosoHub

  1. 瀏覽至 [網域和權限]Navigate to Domains and Permissions. 請確定有效的網域區段包含了您的 SharePoint Online 網域名稱。Make sure the valid domains section contains your SharePoint online domain name.

    範例:contoso.sharepoint.comExample: contoso.sharepoint.com

  2. 新增下列 Web應用程式 單一登入 屬性:Add the following web app single sign-on properties:

    範例:AAD 應用程式識別碼:00000003-0000-0ff1-ce00-000000000000 Resource Url:{{subdomain}}.sharepoint.comExample: AAD application ID: 00000003-0000-0ff1-ce00-000000000000 Resource Url: {{subdomain}}.sharepoint.com

    含有識別碼和 URL 的 Web 應用程式單一登入。

  3. 儲存 這些屬性,然後瀏覽至 [儲存及散發]Save these properties and then navigate to Test and distribute.

  4. 安裝應用程式以親自測試應用程式。Install the app to test the application personally.

重要

如果您使用的不是 Teams App Studio,則必須先將剛才建立的 manifest.JSON 檔案壓縮成 Zip 檔、瀏覽至 Teams 中的 App Store,然後按一下 [上傳自訂應用程式] 連結 (位於 App Store 右下角)。If you aren't using Teams App Studio, you will have to .zip the manifest.JSON file you just created, navigate to the App Store in Teams, and click upload custom app link (at the bottom right of the App Store). 這會讓您可以使用應用程式。This will make the app available to you.

  1. 現在,應用程式便能以靜態索引標籤的形式供您在 Teams 中載入和檢視。Now the app is available as a static tab for you to load and view in Teams.

測試和檢視新的靜態索引標籤Test and view your new static tab

若要檢視 Teams 桌面上的新索引標籤,請瀏覽至應用程式列左側的省略號 (...)。To view the new tab on the Teams desktop, navigate to the ellipses () in the left-hand side of your app bar. 尋找您的新應用程式、加以載入,然後在 Teams 中測試您的獨立應用程式。Find your new app, load it, and test your standalone application in Teams.

如果您想讓新的應用程式出現在左側功能表中的較高位置,則必須使用應用程式原則設定來進行。If you want to make the new app available in the left menu at a higher position, you must use an app policy setting for this. 您可以在 [Teams 管理員] 區段 > [應用程式原則] > [新增釘選的應用程式] 底下找到此設定。This setting can be found under the Team admin section > app policy > add a pinned application. 當您指派原則給使用者以進行測試時,此變更會在數小時後才顯示。When you assign the policy to a user for testing, the change will appear a few hours later. 在了解這一點的情況下,請盡早決定應用程式的顯示位置以免造成延遲。With this in mind, please decide where the app should appear at your earliest convenience to help avoid delays.

若要在行動裝置上檢視並測試新的應用程式,請點選畫面底部附近索引標籤列上方的>形箭號 (^),以開啟應用程式選單。To view and test the new app on a mobile device, open the app drawer by tapping on the chevron (^) above the tab bar near the bottom of your screen. 尋找您的應用程式,並在您的行動裝置上瀏覽至該應用程式。Find your app and navigate to it on your mobile device.

警告

目前已在開發人員預覽中支援行動裝置。Mobile support is currently in Developer Preview. 若要啟用「開發人員預覽」,請瀏覽至 [設定] > [關於],然後啟用 [開發人員預覽] 模式。To enable Developer Preview, navigate to Settings > About and then enable Developer Preview mode.

範例 Manifest.JSON 檔案A Sample Manifest.JSON file

您所產生的 JSON 檔案會如下所示。The JSON file you generate will look something like the one below.

{

    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",

    "manifestVersion": "1.5",

    "version": "1.0.0",

    "id": "33ebded3-931c-4333-b0c5-b51dd8738873",

    "packageName": "com.contoso.teams.devapp",

    "developer": {

        "name": "Contoso", ''

        "websiteUrl": "https://www.contoso.com",

        "privacyUrl": "https://www.contoso.com/privacy",

        "termsOfUseUrl": "https://www.contoso.com/terms"

    },

    "icons": {

        "color": "color.png",

        "outline": "outline.png"

    },

    "name": {

        "short": "Contoso Intranet", '

        "full": "Intranet Portal for Contoso"

    },

    "des    ription": {

        "short": "Intranet portal for Contoso",

        "full": "This app is to demonstrate the capabilities of hosting a SharePoint communication and team site as a standalone app in Teams"

    },

    "accentColor": "#FFFFFF",

    "staticTabs": [

        {

                     "       nti        Id":       "com    unicat    onSi    eTab",

            "name": "Contoso Net",

            "contentUrl": "https://contoso.sharepoint.com/sites/ContosoNet/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/ContosoNet/",

            "websiteUrl": "https://contoso.sharepoint.com/sites/ContosoNet",

            "scopes": [

                "personal"

            ]

        },

        {

            "entityId": "teamSiteTab",

            "name": "Team Contoso",

            "contentUrl": "https://contoso.sharepoint.com/teams/TeamContoso/_layouts/15/teamslogon.aspx?SPFX=true&dest=/teams/TeamContoso/",

            "websiteUrl": "https://contoso.sharepoint.com/teams/TeamContoso",

            "scopes": [

                "personal"

            ]

        }

    ],

    "permissions": [

        "identity",

        "messageTeamMembers"

    ],

    "validDomains": [

        "contoso.sharepoint.com"

    ],

    "webApplicationInfo": {

        "id": "00000003-0000-0ff1-ce00-000000000000",

        "resource": "https://contoso.sharepoint.com"

    }

}