

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

# 教程：设置基本的 Transfer Family 网络应用程序
<a name="web-app-tutorial"></a>

本教程介绍如何设置 Transfer Family 网络应用程序。Transfer Family 网络应用程序提供了一个简单的界面，用于通过网络浏览器与亚马逊 S3 传输数据和从亚马逊S3传输数据。有关此功能的详细文档，请参阅[Transfer Family 网络应用程序](web-app.md)。

## Web 应用程序教程：先决条件
<a name="web-tutorial-prereq"></a>
+ 创建的账户实例或组织实例 AWS IAM Identity Center。有关更多信息，请参阅 [为 Transfer Family 网络应用程序配置您的身份提供商](webapp-identity-center.md)。

  如果您不使用 IAM Identity Center 作为身份提供商，请[将 Okta 整合为你的 Web 应用程序身份提供商](#web-tutorial-okta)说明如何使用替代身份提供商（在本例中为 Okta）。
+ 你需要一个 Amazon S3 存储桶来与你的 Transfer Family 网络应用程序进行交互。有关详细信息，请参阅 [配置 Amazon S3 存储桶](configure-storage.md#requirements-S3)

**注意**  
本教程假设您使用的是身份提供商的 IAM Identity Center 目录，如果不是这样，请在继续本教程[为 Transfer Family 网络应用程序配置您的身份提供商](webapp-identity-center.md)之前参阅。

完成本教程后，您的用户可以登录并与您创建的 Web 应用程序进行交互。

## 步骤 1：创建必要的支持资源
<a name="web-tutorial-step1"></a>

您需要将用户添加到 IAM 身份中心目录。您还需要两个角色：一个用作您的 Web 应用程序的身份持有者角色，另一个用于配置 Amazon S3 访问授权。在本教程中，我们允许 AWS 服务为我们创建这些角色。

**如何添加用户**

1. 登录 AWS 管理控制台 并打开 AWS IAM Identity Center 控制台，网址为[https://console.aws.amazon.com/singlesignon/](https://console.aws.amazon.com/singlesignon/)。

1. 从左侧导航窗格中选择 “**用户**”。

1. 选择**添加用户**并指定用户详细信息。

   指定用户名、电子邮件地址和其他必填信息。您可以选择向用户发送一封包含密码设置说明的电子邮件，也可以选择生成一次性密码与他们共享。

1. 选择 “**下一步**”，然后选择将新用户分配到一个或多个群组。

1. 选择 “**下一步**” 并查看您的选择。

   如果一切正常，请选择 “**添加用户**” 以使用您指定的详细信息创建新用户。

   **在本教程中，示例用户是 **Bob Stiles、用户名 bob** **stiles** 和电子邮件地址 bobstiles@example.com。**

## 第 2 步：创建 Transfer Family 网络应用程序
<a name="web-tutorial-step2"></a>

**创建 Transfer Family 网络应用程序**

1. 登录 AWS 管理控制台 并打开 AWS Transfer Family 控制台，网址为[https://console.aws.amazon.com/transfer/](https://console.aws.amazon.com/transfer/)。

1. 在左侧导航窗格中，选择 **Web 应用程序**。

1. 选择 “**创建 Web 应用程序**”。

   对于身份验证访问，请注意，该服务会自动找到您设置为先决条件的 AWS IAM Identity Center 实例。

1. 在 “**权限类型**” 窗格中，选择 “**创建并使用新的服务角色**”。该服务为您创建身份持有者角色。身份持有者角色在其会话中包括经过身份验证的用户的身份。

1. 在 **Web 应用程序单位**窗格中，接受默认值 1，或者根据需要调整为更高的值。

1. 添加标签以帮助您整理 Web 应用程序。在本教程中，为密钥输入**名称**，为值输入**教程 Web 应用程序**。
**提示**  
创建 Web 应用程序名称后，您可以直接从 **Web 应用程序**列表页面对其进行编辑。

1. 选择 “**下一步**” 打开 “**设计 Web 应用程序**” 页面。在此屏幕上，提供以下信息。

   您可以选择为 Web 应用程序提供标题。您也可以上传徽标和网站图标的图片文件。
   + 对于页面标题，请自定义用户在连接到 Web 应用程序时看到的浏览器选项卡的标题。如果您没有为页面标题输入任何内容，则默认为 Transfer **Web App**。
   + 要获取徽标，请上传图片文件。徽标图片的最大文件大小为 50 KB。
   + 对于网站图标，请上传图片文件。您的网站图标的最大文件大小为 20 KB。

1. 选择 “**下一步**”，然后选择 “**创建 Web 应用程序**”。

要提供品牌化体验，您可以为用户提供一个自定义网址，让他们访问您的 Transfer Family 网络应用程序。有关更多信息，请参阅 [使用自定义 URL 更新您的访问终端节点](webapp-customize.md)。

## 步骤 3：为您的存储桶配置跨源资源共享 (CORS)
<a name="web-tutorial-step3"></a>

您必须为 Web 应用程序使用的所有存储分区设置跨源资源共享 (CORS)。*CORS 配置*是定义规则的文档，这些规则用于识别您将允许访问存储桶的来源。有关 CORS 的更多信息，请参阅[配置跨域资源共享 (CORS)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html?icmpid=docs_amazons3_console)。

**为您的 Amazon S3 存储桶设置跨源资源共享 (CORS)**

1. 登录 AWS 管理控制台 并打开 Amazon S3 控制台，网址为[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)。

1. 从左侧导航面板中选择 **Buckets**，在搜索对话框中搜索您的存储桶，然后选择**权限**选项卡。

1. 在**跨源资源共享 (CORS)** 中，选择**编辑**并粘贴以下代码。*AccessEndpoint*替换为您的 Web 应用程序的实际访问端点。确保不要在尾部输入斜杠，因为这样做会导致用户尝试登录您的 Web 应用程序时出错。
   + 不正确的例子：`https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws/`
   + 正确的例子：`https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws`

   如果您要将存储桶重复用于多个 Web 应用程序，请将其的 Web 应用程序访问终端节点附加到列表中`AllowedOrigins`。

   ```
   [
     {
       "AllowedHeaders": [
         "*"
       ],
       "AllowedMethods": [
         "GET",
         "PUT",
         "POST",
         "DELETE",
         "HEAD"
       ],
       "AllowedOrigins": [
         "https://AccessEndpoint"
       ],
       "ExposeHeaders": [
         "last-modified",
          "content-length",
         "etag",
         "x-amz-version-id",
         "content-type",
         "x-amz-request-id",
         "x-amz-id-2",
         "date",
         "x-amz-cf-id",
         "x-amz-storage-class",
         "access-control-expose-headers"
        ],
       "MaxAgeSeconds": 3000
     }
   ]
   ```

1.  选择 “**保存更改**” 以更新 CORS。

## 第 4 步：将用户添加到你的 Transfer Family 网络应用程序
<a name="web-tutorial-step4"></a>

添加您之前在 IAM 身份中心创建的用户。

**将用户分配给 Transfer Family 网络应用程序**

1. 导航到您之前创建的 Web 应用程序。

1. 选择**分配用户和组**。  
![\[屏幕显示所选 Web 应用程序的详细信息。\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-transfer-details.png)

1. 要分配您之前在 IAM Identity Center 中创建的用户，请选择**分配现有用户和群组**，然后选择**下一步**。

   1. 按显示名称搜索用户。请注意，在您开始输入搜索条件之前，不会显示任何用户。要添加**Bob Stiles**，请在搜索框中输入 bo **b**。如果您找不到您的用户，请导航到 IAM Identity Center 管理控制台，找到该用户，然后将其显示名称复制并粘贴到此处。

   1. 选择**Bob Stiles**用户，然后选择 “**分配**”。

## 步骤 5：在 Amazon S3 中注册营业地点并创建访问授权
<a name="web-tutorial-step5"></a>

将用户分配给您的 Web 应用程序后，您需要注册存储分区并为该用户创建访问授权。

**注意**  
您必须拥有 S3 访问权限授予实例，然后才能继续。有关详细信息，请参阅 [Amazon *简单存储服务用户指南*中的创建 S3 访问授权实例](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-instance-create.html)。

**注册营业地点并创建访问授权**

1. 登录 AWS 管理控制台 并打开 Amazon S3 控制台，网址为[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)。

1. 从左侧导航窗格中选择 “**访问授权**”。

1. 选择**查看详细信息**以查看您的 S3 访问权限授予实例的详细信息。

1. 选择 “**地点**” 选项卡，然后选择 “**注册地点**”。

1. 提供以下信息：
   + 对于**范围**，请浏览存储桶或输入存储桶的名称以及可选的前缀。请注意，作用域以字符串开头**s3://**。
   + 对于 IAM 角色，选择**创建新角色**让 Amazon S3 创建一个角色。此角色允许 S3 访问权限授予访问您指定的位置范围。  
![\[屏幕显示 Amazon S3 将 S3 存储桶或前缀注册为位置对话框，其中包含默认范围和创建新角色设置。\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-grants-register-new.png)

   选择**注册地点**以继续。

1. 选择 “**授权**” 选项卡，然后选择 “**创建授权**”，并提供以下详细信息。
   + 在 “**位置**” 中，选择 “**浏览地点**”，然后选择您在上一步中注册的位置。
   + 在 S **ubprefix** 中，输入**\$1**表示访问权限授予适用于整个存储桶。
   + 在 “**权限**” 中，选择 “**读取**” 和 “**写入**”。
   + 对于**被授权者类型**，请**从 IAM 身份中心选择目录身份**。
   + 对于 “**目录” 身份类型**，选择 “**用户**”。
   + 在 **IAM Identity Center 用户/ ID** 中，复制并粘贴的用户 ID。**Bob Stiles**此 ID 可在您的 Transfer Family 网络应用程序的 “**用户**” 面板中找到。

1. 选择 “**创建授权**”。

访问权限已创建。

## 第 6 步：以用户身份访问你的 Transfer Family 网络应用程序
<a name="web-tutorial-step6"></a>

现在，我们导航到 Web 应用程序的 URL，并以之前分配的用户身份登录。

**登录 Transfer Family 网络应用程序**

1. 导航到您的 Web 应用程序

1. 从 **Web 应用程序详细信息**窗格中选择**访问端点**。  
![\[屏幕显示了在教程中创建的 Web 应用程序的详细信息。\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-transfer-tutorial-enduser.png)

1. 在登录屏幕上，输入您创建的用户**bobstiles**，然后选择**下一步**。

1. 输入系统在创建时分配给该用户的密码，然后选择**下一步**。

1. 如果您的组织需要多因素身份验证 (MFA)，则需要立即进行设置。如果没有，请直接跳到步骤 6。

   1. 您将看到一个用于注册 MFA 设备的屏幕。选择一个可用选项，然后选择 “**下一步**”。

   1. 执行必要步骤为该用户配置 MFA：这些步骤取决于您选择的 MFA 选项。

   1. 您可能需要为用户设置新密码：如果需要，请立即设置。系统可能还会要求您使用您配置的新 MFA 凭证重新登录。

您的用户应该会看到类似于以下内容的屏幕。请注意，此屏幕截图包括网站图标和徽标的自定义。

![\[Transfer Family 网络应用程序示例，带有自定义标题、网站图标和徽标。\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-tutorial-enduser.png)


## 后续步骤
<a name="web-tutorial-conclusion"></a>

您已成功设置具有标准 S3 存储桶访问权限的基本 Transfer Family 网络应用程序。如果您需要对存储桶权限进行更精细的控制，例如允许用户从一个存储桶下载并上传到另一个存储桶，请参阅[教程：设置具有选择性多存储桶访问权限的 AWS Transfer Family Web 应用程序](webapp-s3-tutorial.md)。

## 将 Okta 整合为你的 Web 应用程序身份提供商
<a name="web-tutorial-okta"></a>

您可以将外部身份提供商与 Transfer Family 网络应用程序集成。本节介绍如何将 Okta 设置为身份提供商。

1. 在 Okta 中，创建用户、组和应用程序。有关如何执行此操作的详细信息，请参阅[使用 Okta 和 IAM 身份中心配置 SAML 和 SCIM](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)。  
![\[用于 Transfer Family 网络应用教程的 Okta 应用程序示例\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-tutorial-okta.png)

1. 连接 Okta 并将用户和群组从 Okta 导入到。 AWS IAM Identity Center按照使用 [Okta 和 IAM 身份中心配置 SAML 和 SCIM 中的步骤 1—4 进行](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)操作。  
![\[IAM 身份中心显示了从 Okta 集成的示例用户\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-tutorial-okta-ic-user.png)  
![\[IAM 身份中心显示了从 Okta 集成的示例群组\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-tutorial-okta-ic-group.png)

1. 确认 IAM 身份中心中的身份源是 SAML 2.0。  
![\[IAM 身份中心显示身份源为 SAML 2.0\]](http://docs.aws.amazon.com/zh_cn/transfer/latest/userguide/images/webapp-tutorial-okta-confirm.png)

1. 分配您的用户和群组，如中所述[第 4 步：将用户添加到你的 Transfer Family 网络应用程序](#web-tutorial-step4)。

1. 为避免让您的用户在登录您的网络应用程序时需要使用 MFA，请在 Okta 中执行以下步骤。

   1. 从 Okta 管理员控制台访问 **[应用程序]-[应用程序]**，然后选择 AWS IAM Identity Center 应用程序。

   1. 在 “**登录” 选项卡上**，选择 **[用户身份验证]-编辑**。

   1. 选择 “**仅限密码**”。

完成本教程的所有其他步骤后，您的用户应该能够通过在网络浏览器中导航到该网络应用程序的访问端点来访问您的 Transfer Family 网络应用程序。