本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 教學課程：設定基本 Transfer Family Web 應用程式
本教學課程會逐步解說如何設定 Transfer Family Web 應用程式。Transfer Family Web 應用程式可啟用簡單的界面，透過 Web 瀏覽器在 Amazon S3 之間來回傳輸資料。如需此功能的詳細文件，請參閱 [Transfer Family Web 應用程式](web-app.md)。
## Web 應用程式教學課程：先決條件
+ 建立 的帳戶執行個體或組織執行個體 AWS IAM Identity Center。如需詳細資訊，請參閱[為 Transfer Family Web 應用程式設定您的身分提供者](webapp-identity-center.md)。
如果您不是使用 IAM Identity Center 做為身分提供者， 會[將 Okta 整合為 Web 應用程式的身分提供者](#web-tutorial-okta)說明如何使用替代 （在此案例中為 Okta) 身分提供者。
+ 您需要使用 Amazon S3 儲存貯體來與 Transfer Family Web 應用程式互動。如需詳細資訊，請參閱[設定 Amazon S3 儲存貯體](configure-storage.md#requirements-S3)
**注意**
本教學假設您使用身分提供者的 IAM Identity Center 目錄，如果不是這種情況，請在繼續本教學課程[為 Transfer Family Web 應用程式設定您的身分提供者](webapp-identity-center.md)之前參閱 。
完成教學課程後，您的使用者可以登入並與您建立的 Web 應用程式互動。
## 步驟 1：建立必要的支援資源
您需要將使用者新增至 IAM Identity Center 目錄。您也需要兩個角色：一個用於做為 Web 應用程式的身分持有者角色，第二個用於設定 Amazon S3 存取授權。在本教學課程中，我們允許 AWS 服務為我們建立這些角色。
**若要新增使用者**
1. 登入 AWS 管理主控台 並在 https：//[https://console.aws.amazon.com/singlesignon/](https://console.aws.amazon.com/singlesignon/) 開啟 AWS IAM Identity Center 主控台。
1. 從左側導覽窗格中，選擇**使用者**。
1. 選擇**新增使用者**並指定使用者詳細資訊。
指定使用者名稱、電子郵件地址和其他必要資訊。您可以選擇向使用者傳送電子郵件，其中包含設定其密碼的指示，也可以產生一次性密碼來與他們共用。
1. 選擇**下一步**，並選擇性地將新使用者指派給一或多個群組。
1. 選擇**下一步**並檢閱您的選擇。
如果一切看起來都不錯，請選擇**新增使用者**，使用您指定的詳細資訊建立新使用者。
在本教學課程中，範例使用者為 **Bob Stiles**、使用者名稱**公告**和電子郵件地址 **bobstiles@example.com**。
## 步驟 2：建立 Transfer Family Web 應用程式
**建立 Transfer Family Web 應用程式**
1. 登入 AWS 管理主控台 並在 https：//[https://console.aws.amazon.com/transfer/](https://console.aws.amazon.com/transfer/) 開啟 AWS Transfer Family 主控台。
1. 在左側導覽窗格中，選擇 **Web 應用程式**。
1. 選擇**建立 Web 應用程式**。
對於身分驗證存取，請注意，服務會自動尋找您設定為先決條件的 AWS IAM Identity Center 執行個體。
1. 在**許可類型**窗格中，選取**建立並使用新的服務角色**。服務會為您建立身分承載角色。身分承載角色在其工作階段中包含已驗證使用者的身分。
1. 在 **Web 應用程式單位**窗格中，接受預設值 1，或視需要調整為較高的值。
1. 新增標籤以協助您組織 Web 應用程式。在教學課程中，輸入金鑰**的名稱**，並為值輸入**教學課程 Web 應用程式**的名稱。
**提示**
您可以在建立 Web 應用程式清單頁面直接編輯 **Web 應用程式**名稱。
1. 選擇**下一步**以開啟**設計 Web 應用程式**頁面。在此畫面上，提供下列資訊。
您可以選擇性地為您的 Web 應用程式提供標題。您也可以上傳標誌和 favicon 的影像檔案。
+ 針對頁面標題，自訂使用者連線至 Web 應用程式時看到的瀏覽器索引標籤標題。如果您未輸入頁面標題的任何內容，則預設為 **Transfer Web App**。
+ 對於標誌，請上傳映像檔案。標誌影像的檔案大小上限為 50 KB。
+ 針對 favicon，上傳映像檔案。Favicon 的檔案大小上限為 20 KB。
1. 選擇**下一步**，然後選擇**建立 Web 應用程式**。
若要提供品牌體驗，您可以為使用者提供自訂 URL，以存取 Transfer Family Web 應用程式。如需詳細資訊，請參閱[使用自訂 URL 更新您的存取端點](webapp-customize.md)。
## 步驟 3：設定儲存貯體的跨來源資源共用 (CORS)
您必須為 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 管理主控台 ，並在 [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)：// 開啟 Amazon S3 主控台。
1. 從左側導覽面板中選擇**儲存貯**體，然後在搜尋對話方塊中搜尋儲存貯體，然後選擇**許可**索引標籤。
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 Web 應用程式
新增您先前在 IAM Identity Center 中建立的使用者。
**將使用者指派給 Transfer Family Web 應用程式**
1. 導覽至您先前建立的 Web 應用程式。
1. 選擇**指派使用者和群組**。
![\[顯示所選 Web 應用程式詳細資訊的畫面。\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-transfer-details.png)
1. 若要指派您先前在 IAM Identity Center 中建立的使用者，請選取**指派現有的使用者和群組**，然後選取**下一步**。
1. 依顯示名稱搜尋使用者。請注意，在您開始輸入搜尋條件之前，不會顯示任何使用者。若要新增 **Bob Stiles**，請在搜尋方塊中輸入 **bob**。如果您找不到您的使用者，請導覽至 IAM Identity Center 管理主控台、尋找使用者，然後在此處複製並貼上其顯示名稱。
1. 選擇**Bob Stiles**使用者，然後選擇**指派**。
## 步驟 5：在 Amazon S3 中註冊位置並建立存取授權
將使用者指派給 Web 應用程式後，您需要註冊儲存貯體並為該使用者建立存取授權。
**注意**
您必須先擁有 S3 Access Grants 執行個體，才能繼續。如需詳細資訊，請參閱《*Amazon Simple Storage Service 使用者指南*》中的[建立 S3 存取授權執行個體](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-instance-create.html)。
**註冊位置並建立存取授權**
1. 登入 AWS 管理主控台 ，並在 [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)：// 開啟 Amazon S3 主控台。
1. 從左側導覽窗格中選擇**存取授權**。
1. 選擇**檢視詳細資訊**，以查看 S3 Access Grants 執行個體的詳細資訊。
1. 選取**位置**索引標籤，然後選擇**註冊位置**。
1. 請提供下列資訊。
+ 對於**範圍**，瀏覽儲存貯體或輸入儲存貯體的名稱，並選擇性地輸入字首。請注意，範圍開頭為字串 **s3://**。
+ 針對 IAM 角色，選擇**建立新角色**，讓 Amazon S3 建立角色。此角色允許 S3 Access Grants 存取您指定的位置範圍。
![\[顯示具有預設範圍和建立新角色設定的 Amazon S3 註冊 S3 儲存貯體或字首做為位置對話方塊的畫面。\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-grants-register-new.png)
選擇**註冊位置**以繼續。
1. 選取**授予**索引標籤，然後選擇**建立授予**，並提供下列詳細資訊。
+ 針對**位置**，選取**瀏覽位置**，然後選擇您在上一個步驟中註冊的位置。
+ 對於 **Subprefix**，輸入 **\$1** 以指出存取授權會套用至整個儲存貯體。
+ 針對**許可**，選取**讀取**和**寫入**。
+ 針對**承授者類型**，從 **IAM Identity Center 選擇目錄身分**。
+ 針對**目錄身分類型**，選取**使用者**。
+ 在 **IAM Identity Center 使用者/ID** 中，複製並貼上 的使用者 ID**Bob Stiles**。此 ID 可在 Transfer Family Web 應用程式**的使用者**窗格中取得。
1. 選擇**建立授予**。
存取授權已建立。
## 步驟 6：以使用者身分存取 Transfer Family Web 應用程式
現在，我們會導覽至 Web 應用程式的 URL，並以先前指派的使用者身分登入。
**登入 Transfer Family Web 應用程式**
1. 導覽至您的 Web 應用程式
1. 從 **Web 應用程式詳細資訊**窗格中選擇**存取端點**。
![\[畫面顯示教學課程期間所建立 Web 應用程式的詳細資訊。\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-transfer-tutorial-enduser.png)
1. 在登入畫面上，輸入您建立的使用者 **bobstiles**，然後選取**下一步**。
1. 輸入系統在建立時指派給此使用者的密碼，然後選取**下一步**。
1. 如果您的組織需要多重要素驗證 (MFA)，則需要立即設定。如果沒有，請跳到步驟 6。
1. 您會收到註冊 MFA 裝置的畫面。選擇其中一個可用的選項，然後選取**下一步**。
1. 執行為此使用者設定 MFA 的必要步驟：這些步驟取決於您選擇的 MFA 選項。
1. 您可能需要為使用者設定新密碼：如果需要，請現在執行此操作。系統也可能要求您使用設定的新 MFA 登入資料再次登入。
您的使用應該會看到類似以下的畫面。請注意，此螢幕擷取畫面包含 favicon 和標誌的自訂。
![\[Transfer Family Web 應用程式範例，具有自訂標題、favicon 和標誌。\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-tutorial-enduser.png)
## 後續步驟
您已成功設定具有標準 S3 儲存貯體存取的基本 Transfer Family Web 應用程式。如果您需要更精細地控制儲存貯體許可，例如允許使用者從一個儲存貯體下載並上傳到另一個儲存貯體，請參閱 [教學課程：設定具有選擇性多儲存貯體存取權的 AWS Transfer Family Web 應用程式](webapp-s3-tutorial.md)。
## 將 Okta 整合為 Web 應用程式的身分提供者
您可以將外部身分提供者與 Transfer Family Web 應用程式整合。本節說明如何將 Okta 設定為您的身分提供者。
1. 在 Okta 中，建立使用者、群組和應用程式。如需如何執行此操作的詳細資訊，請參閱[使用 Okta 和 IAM Identity Center 設定 SAML 和 SCIM](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)。
![\[用於 Transfer Family Web 應用程式教學課程的範例 Okta 應用程式\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-tutorial-okta.png)
1. 連接 Okta 並從 Okta 匯入使用者和群組 AWS IAM Identity Center。請遵循[使用 Okta 和 IAM Identity Center 設定 SAML 和 SCIM 中的步驟 ](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)1–4。
![\[IAM Identity Center 顯示從 Okta 整合的範例使用者\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-tutorial-okta-ic-user.png)
![\[IAM Identity Center 顯示從 Okta 整合的範例群組\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-tutorial-okta-ic-group.png)
1. 確認 IAM Identity Center 中的身分來源是 SAML 2.0。
![\[IAM Identity Center 顯示身分來源為 SAML 2.0\]](http://docs.aws.amazon.com/zh_tw/transfer/latest/userguide/images/webapp-tutorial-okta-confirm.png)
1. 指派您的使用者和群組，如中所述[步驟 4：將使用者新增至 Transfer Family Web 應用程式](#web-tutorial-step4)。
1. 若要避免您的使用者在登入 Web 應用程式時需要使用 MFA，請在 Okta 中執行下列步驟。
1. 從 Okta 管理員主控台存取 **【應用程式】 - 【應用程式】**，然後選取 AWS IAM Identity Center 應用程式。
1. 在**登入**索引標籤上，選取 **【使用者身分驗證】 - 編輯**。
1. **僅選取密碼**。
在您執行教學課程的所有其他步驟之後，您的使用者應該可以透過在 Web 瀏覽器中導覽至 Web 應用程式的存取端點來存取 Transfer Family Web 應用程式。