本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 步驟 4. 設定您的網站以與 Amazon WorkSpaces 應用程式整合
<a name="configure-website-for-integration"></a>

下列各節提供如何設定網頁以託管內嵌 WorkSpaces 應用程式串流工作階段的相關資訊。

**Topics**
+ [匯入 appstream-embed JavaScript 檔案](#import-embed-javascript-file)
+ [初始化和設定 `AppStream.Embed` 界面物件](#initialize-configure-embed-interface-object)
+ [WorkSpaces 應用程式使用者介面中的隱藏項目範例](#examples-hiding-user-interface-items)

## 匯入 appstream-embed JavaScript 檔案
<a name="import-embed-javascript-file"></a>

1. 在您計劃嵌入 WorkSpaces 應用程式串流工作階段的網頁上，新增下列程式碼，將 **appstream-embed.js** 檔案匯入網頁：

   ```
   <script type="text/javascript" src="./appstream_embed.js"> </script>
   ```

1. 接下來，建立一個空白的容器 div。您設定的 div ID 會傳遞至 WorkSpaces 應用程式內嵌建構函數。之後此就會用於注入 iframe 以供串流工作階段使用。若要建立 div，請加入下列程式碼：

   ```
   <div id="appstream-container"> </div>
   ```

## 初始化和設定 `AppStream.Embed` 界面物件
<a name="initialize-configure-embed-interface-object"></a>

若要在 JavaScript 中初始化 `AppStream.Embed` 界面物件，您必須使用串流 URL 和使用者介面組態的選項建立 `AppStream.Embed` 物件。這些選項，以及您建立的 div ID 都會儲存在名稱為 `appstreamOptions` 的物件中。

以下範例程式碼將說明如何初始化 `AppStream.Embed` 界面物件。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
 appstreamEmbed = new AppStream.Embed("appstream-container", appstreamOptions);
```

在程式碼中，用您自己的值取代 *sessionURL* 和 *userInterfaceConfig*。

**注意**  
為 *userInterfaceConfig* 指定的值會隱藏整個 WorkSpaces 應用程式工具列。此值 (加入為範例) 為選擇性。

***sessionUrl***  
您使用 WorkSpaces 應用程式主控台、[CreateStreamingURL](https://docs.aws.amazon.com/appstream2/latest/APIReference/API_CreateStreamingURL.html) API 動作或 [create-streaming-url](https://docs.aws.amazon.com/cli/latest/reference/appstream/create-streaming-url.html) AWS CLI 命令建立的串流 URL。此參數有大小寫之分。  
**類型：**字串  
**必要**：是

***userInterfaceConfig***  
產生使用者界面元素初始狀態的組態。組態為金鑰值配對。  
金鑰 `AppStream.Embed.Options.HIDDEN_ELEMENTS`指定初始化內嵌 WorkSpaces 應用程式串流工作階段時最初隱藏的使用者介面物件。之後您可以使用 `getInterfaceState` 參數還原隱藏和顯示的物件。  
此值是常數陣列 (工具列按鈕)。如需可以使用的常數清單，請參閱 [使用 `HIDDEN_ELEMENTS`](constants-functions-events-embedded-sessions.md#constants-hidden-elements)。  
**類型**：對應 (*金鑰：**值*)  
**必要**：否

## WorkSpaces 應用程式使用者介面中的隱藏項目範例
<a name="examples-hiding-user-interface-items"></a>

本節中的範例示範如何在使用者的內嵌 WorkSpaces 應用程式串流工作階段期間隱藏 WorkSpaces 應用程式使用者介面中的項目。

**Topics**
+ [範例 1：隱藏整個 WorkSpaces 應用程式工具列](#example-hide-the-entire-tooolbar)
+ [範例 2：隱藏 WorkSpaces 應用程式工具列上的特定按鈕](#example-hide-a-specific-toolbar-button)
+ [範例 3：在 WorkSpaces 應用程式工具列上隱藏多個按鈕](#example-hide-multiple-toolbar-buttons)

### 範例 1：隱藏整個 WorkSpaces 應用程式工具列
<a name="example-hide-the-entire-tooolbar"></a>

若要防止使用者在內嵌串流工作階段期間存取 WorkSpaces 應用程式工具列上的任何按鈕，請使用 `AppStream.Embed.Elements.TOOLBAR` 常數。此常數可讓您隱藏所有 WorkSpaces 應用程式工具列按鈕。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
```

### 範例 2：隱藏 WorkSpaces 應用程式工具列上的特定按鈕
<a name="example-hide-a-specific-toolbar-button"></a>

您可以顯示 WorkSpaces 應用程式工具列，同時防止使用者在內嵌串流工作階段期間存取特定工具列按鈕。若要執行此操作，請為您要隱藏的按鈕指定常數。以下程式碼會使用 `AppStream.Embed.Elements.FILES_BUTTON` 常數來隱藏 **My Files** (我的檔案) 按鈕。這可阻止使用者在嵌入串流工作階段期間存取永久性儲存選項。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.FILES_BUTTON]}
 };
```

### 範例 3：在 WorkSpaces 應用程式工具列上隱藏多個按鈕
<a name="example-hide-multiple-toolbar-buttons"></a>

您可以顯示 WorkSpaces 應用程式工具列，同時防止使用者在內嵌串流工作階段期間存取多個工具列按鈕。若要執行此操作，請指定您要隱藏的按鈕常數。以下程式碼會使用 `AppStream.Embed.Elements.END_SESSION_BUTTON` 和 `AppStream.Embed.Elements.FULLSCREEN_BUTTON` 常數來隱藏 **End Session (結束工作階段)** 和 **Fullscreen (全螢幕)** 按鈕。

**注意**  
以逗號分隔每個常數，前後沒有空格。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode... (https://appstream2.region.aws.amazon.com/#/)',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.END_SESSION_BUTTON,AppStream.Embed.Elements.FULLSCREEN_BUTTON]}
 };
```