本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 步骤 4：配置您的网站以便与 Amazon WorkSpaces 应用程序集成
<a name="configure-website-for-integration"></a>

以下各节提供有关如何配置您的网页以托管嵌入式 WorkSpaces 应用程序流式传输会话的信息。

**Topics**
+ [导入 appstream 嵌 JavaScript 入文件](#import-embed-javascript-file)
+ [初始化和配置 `AppStream.Embed` 接口对象](#initialize-configure-embed-interface-object)
+ [在 WorkSpaces 应用程序用户界面中隐藏项目的示例](#examples-hiding-user-interface-items)

## 导入 appstream 嵌 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>

要在中初始化`AppStream.Embed`接口对象 JavaScript，必须添加用于创建包含直播网址和用户界面配置选项的`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);
```

在代码中，*userInterfaceConfig*用您自己的值替换*sessionURL*和。

**注意**  
为指定的值会*userInterfaceConfig*隐藏整个 “ WorkSpaces 应用程序” 工具栏。示例中包含的此值可选。

***sessionUrl***  
您使用 WorkSpaces 应用程序控制台、URL API 操作或 [create-streaming-url](https://docs.aws.amazon.com/cli/latest/reference/appstream/create-streaming-url.html) AWS CLI 命令创建的直播[CreateStreaming网](https://docs.aws.amazon.com/appstream2/latest/APIReference/API_CreateStreamingURL.html)址。此参数区分大小写。  
**类型**：字符串  
**是否必需**：是

***userInterfaceConfig***  
生成用户界面元素初始状态的配置。该配置是一个键值对。  
密钥指定了初始化嵌入式 WorkSpaces 应用程序流式传输会话时最初隐藏的用户界面对象。`AppStream.Embed.Options.HIDDEN_ELEMENTS`以后，您可以使用 `getInterfaceState` 参数返回隐藏和可见对象。  
该值是常量数组（工具栏按钮）。有关可以使用的常量列表，请参阅 [使用 `HIDDEN_ELEMENTS`](constants-functions-events-embedded-sessions.md#constants-hidden-elements)。  
**类型**：地图 (*key*:*value*)  
**必需**：否

## 在 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]}
 };
```