

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Tutorial: Eine einfache Transfer Family Family-Web-App einrichten
<a name="web-app-tutorial"></a>

In diesem Tutorial erfahren Sie, wie Sie eine Transfer Family Family-Web-App einrichten. Transfer Family Family-Web-Apps bieten eine einfache Schnittstelle für die Übertragung von Daten zu und von Amazon S3 über einen Webbrowser. Eine ausführliche Dokumentation zu dieser Funktion finden Sie unter[Familien-Web-Apps übertragen](web-app.md).

## Web-App-Tutorial: Voraussetzungen
<a name="web-tutorial-prereq"></a>
+ Erstellen Sie entweder eine Kontoinstanz oder eine Organisationsinstanz von AWS IAM Identity Center. Details hierzu finden Sie unter [Konfigurieren Sie Ihren Identitätsanbieter für Transfer Family Family-Web-Apps](webapp-identity-center.md).

  Falls Sie IAM Identity Center nicht als Identitätsanbieter verwenden, [Integrieren Sie Okta als Ihren Identitätsanbieter für Web-Apps](#web-tutorial-okta) wird veranschaulicht, wie Sie einen alternativen Identitätsanbieter (in diesem Fall Okta) verwenden.
+ Sie benötigen einen Amazon S3 S3-Bucket, den Sie für die Interaktion mit Ihrer Transfer Family Family-Web-App verwenden können. Details hierzu finden Sie unter [Einen Amazon S3 S3-Bucket konfigurieren](configure-storage.md#requirements-S3)

**Anmerkung**  
In diesem Tutorial wird davon ausgegangen, dass Sie das IAM Identity Center-Verzeichnis für Ihren Identitätsanbieter verwenden. Ist dies nicht der Fall, lesen Sie nach, [Konfigurieren Sie Ihren Identitätsanbieter für Transfer Family Family-Web-Apps](webapp-identity-center.md) bevor Sie mit diesem Tutorial fortfahren.

Nachdem Sie das Tutorial abgeschlossen haben, kann sich Ihr Benutzer anmelden und mit der von Ihnen erstellten Web-App interagieren.

## Schritt 1: Erstellen Sie die erforderlichen unterstützenden Ressourcen
<a name="web-tutorial-step1"></a>

Sie müssen Ihrem IAM Identity Center-Verzeichnis einen Benutzer hinzufügen. Sie benötigen außerdem zwei Rollen: eine, die als Identitätsträgerrolle für Ihre Web-App verwendet wird, und eine zweite, die für die Konfiguration einer Amazon S3 S3-Zugriffsgewährung verwendet wird. Für das Tutorial ermöglichen wir es den AWS Diensten, diese Rollen für uns zu erstellen.

**So fügen Sie einen Benutzer hinzu**

1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die AWS IAM Identity Center Konsole unter [https://console.aws.amazon.com/singlesignon/](https://console.aws.amazon.com/singlesignon/).

1. Wählen Sie im linken Navigationsbereich **Benutzer** aus.

1. Wählen Sie **Benutzer hinzufügen** und geben Sie die Benutzerdetails an.

   Geben Sie einen Benutzernamen, eine E-Mail-Adresse und andere erforderliche Informationen an. Sie können wählen, ob Sie dem Benutzer entweder eine E-Mail mit Anweisungen zur Einrichtung seines Passworts senden oder ein Einmalpasswort generieren, um es mit ihm zu teilen.

1. Wählen Sie **Weiter** und weisen Sie den neuen Benutzer optional einer oder mehreren Gruppen zu.

1. Wählen Sie **Weiter** und überprüfen Sie Ihre Auswahl.

   Wenn alles gut aussieht, wählen Sie **Benutzer hinzufügen**, um den neuen Benutzer mit den von Ihnen angegebenen Details zu erstellen.

   **Für das Tutorial ist der Beispielbenutzer **Bob Stiles**, der Benutzername **bobstiles** und die E-Mail-Adresse bobstiles@example.com.**

## Schritt 2: Erstellen Sie eine Transfer Family Family-Web-App
<a name="web-tutorial-step2"></a>

**So erstellen Sie eine Transfer Family Family-Web-App**

1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die AWS Transfer Family Konsole unter [https://console.aws.amazon.com/transfer/](https://console.aws.amazon.com/transfer/).

1. Wählen Sie im linken Navigationsbereich **Web-Apps** aus.

1. Wählen Sie **Web-App erstellen aus**.

   Beachten Sie beim Authentifizierungszugriff, dass der Dienst die AWS IAM Identity Center Instanz, die Sie als Voraussetzung eingerichtet haben, automatisch findet.

1. Wählen Sie im Bereich **Berechtigungstyp** die Option **Neue Servicerolle erstellen und verwenden** aus. Der Dienst erstellt die Rolle des Identitätsträgers für Sie. Eine Identitätsträgerrolle umfasst die Identität eines authentifizierten Benutzers in seinen Sitzungen.

1. Akzeptieren Sie im Bereich **Web-App-Einheiten** den Standardwert 1, oder passen Sie ihn bei Bedarf auf einen höheren Wert an.

1. Fügen Sie ein Tag hinzu, das Ihnen bei der Organisation Ihrer Web-Apps hilft. Geben Sie für das Tutorial **Name** für den Schlüssel und **Tutorial web app** als Wert ein.
**Tipp**  
Sie können den Namen der Web-App direkt auf der Listenseite der **Web-Apps** bearbeiten, nachdem Sie sie erstellt haben.

1. Wählen Sie **Weiter**, um die Seite **Web-App entwerfen** zu öffnen. Geben Sie auf diesem Bildschirm die folgenden Informationen ein.

   Sie können optional einen Titel für Ihre Web-App angeben. Sie können auch Bilddateien für Ihr Logo und Favicon hochladen.
   + Passen Sie für den Seitentitel den Titel für den Browser-Tab an, den Ihre Benutzer sehen, wenn sie eine Verbindung zur Web-App herstellen. Wenn Sie nichts für den Seitentitel eingeben, wird standardmäßig **Transfer Web App** verwendet.
   + Laden Sie für das Logo eine Bilddatei hoch. Die maximale Dateigröße für Ihr Logobild beträgt 50 KB.
   + Laden Sie für das Favicon eine Bilddatei hoch. Die maximale Dateigröße für Ihr Favicon beträgt 20 KB.

1. Wählen Sie **Weiter** und anschließend **Web-App erstellen**.

Um ein Markenerlebnis zu bieten, können Sie Ihren Benutzern eine benutzerdefinierte URL für den Zugriff auf Ihre Transfer Family Family-Web-App bereitstellen. Details hierzu finden Sie unter [Aktualisieren Sie Ihren Zugriffsendpunkt mit einer benutzerdefinierten URL](webapp-customize.md).

## Schritt 3: Konfigurieren Sie Cross-Origin Resource Sharing (CORS) für Ihren Bucket
<a name="web-tutorial-step3"></a>

Sie müssen Cross-Origin Resource Sharing (CORS) für alle Buckets einrichten, die von Ihrer Web-App verwendet werden. Eine *CORS-Konfiguration* ist ein Dokument, das Regeln definiert, die die Ursprünge identifizieren, denen Sie Zugriff auf Ihren Bucket gewähren. Weitere Informationen zu CORS finden Sie unter [Konfiguration von Cross-Origin Resource Sharing (](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html?icmpid=docs_amazons3_console)CORS).

**So richten Sie Cross-Origin Resource Sharing (CORS) für Ihren Amazon S3 S3-Bucket ein**

1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die Amazon S3 S3-Konsole unter [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/).

1. Wählen Sie im linken Navigationsbereich **Buckets** aus, suchen Sie im Suchdialogfeld nach Ihrem Bucket und wählen Sie dann den Tab **Permissions**.

1. Wählen Sie **unter Cross-Origin Resource Sharing (CORS)** die Option **Bearbeiten** aus und fügen Sie den folgenden Code ein. *AccessEndpoint*Ersetzen Sie es durch den tatsächlichen Zugriffsendpunkt für Ihre Web-App. Achten Sie darauf, keine abschließenden Schrägstriche einzugeben, da dies zu Fehlern führt, wenn Benutzer versuchen, sich bei Ihrer Web-App anzumelden.
   + Falsches Beispiel: `https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws/`
   + Richtiges Beispiel: `https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws`

   Wenn Sie einen Bucket für mehrere Web-Apps wiederverwenden, fügen Sie deren Web-App-Zugriffsendpunkte an die Liste an. `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.  Wählen Sie **Änderungen speichern**, um das CORS zu aktualisieren.

## Schritt 4: Fügen Sie Ihrer Transfer Family Family-Web-App einen Benutzer hinzu
<a name="web-tutorial-step4"></a>

Fügen Sie den Benutzer hinzu, den Sie zuvor in IAM Identity Center erstellt haben.

**So weisen Sie Benutzer einer Transfer Family Family-Web-App zu**

1. Navigieren Sie zu der Web-App, die Sie zuvor erstellt haben.

1. Wählen Sie **Benutzer und Gruppen zuweisen** aus.  
![\[Bildschirm mit den Details für eine ausgewählte Web-App.\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-transfer-details.png)

1. Um den Benutzer zuzuweisen, den Sie zuvor in IAM Identity Center erstellt haben, wählen Sie **Vorhandene Benutzer und Gruppen zuweisen** und **dann Weiter** aus.

   1. Suchen Sie anhand des Anzeigenamens nach dem Benutzer. Beachten Sie, dass keine Benutzer angezeigt werden, bis Sie mit der Eingabe Ihrer Suchkriterien beginnen. Um etwas hinzuzufügen**Bob Stiles**, geben Sie **Bob** in das Suchfeld ein. Wenn Sie Ihren Benutzer nicht finden können, navigieren Sie zur IAM Identity Center-Managementkonsole, suchen Sie den Benutzer, kopieren Sie seinen Anzeigenamen und fügen Sie ihn hier ein.

   1. Wählen Sie den **Bob Stiles** Benutzer aus und klicken Sie dann auf **Zuweisen**.

## Schritt 5: Registrieren Sie einen Standort in Amazon S3 und erstellen Sie eine Zugriffsberechtigung
<a name="web-tutorial-step5"></a>

Nachdem Sie Ihrer Web-App einen Benutzer zugewiesen haben, müssen Sie einen Bucket registrieren und eine Zugriffsberechtigung für diesen Benutzer erstellen.

**Anmerkung**  
Sie müssen über eine S3 Access Grants-Instanz verfügen, bevor Sie fortfahren können. Einzelheiten finden Sie unter [Erstellen einer S3 Access Grants-Instance](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-instance-create.html) im *Amazon Simple Storage Service-Benutzerhandbuch*.

**Um einen Standort zu registrieren und eine Zugriffsberechtigung zu erstellen**

1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die Amazon S3 S3-Konsole unter [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/).

1. Wählen Sie im linken Navigationsbereich **Access Grants** aus.

1. Wählen Sie **Details anzeigen**, um die Details für Ihre S3 Access Grants-Instanz anzuzeigen.

1. Wählen Sie den Tab **Standorte** und dann **Standort registrieren** aus.

1. Geben Sie die folgenden Informationen ein: 
   + Suchen Sie für den **Bereich** nach einem Bucket oder geben Sie den Namen Ihres Buckets und optional ein Präfix ein. Beachten Sie, dass der Bereich mit der Zeichenfolge beginnt**s3://**.
   + Wählen Sie für die IAM-Rolle **Create new role** aus, damit Amazon S3 eine Rolle erstellt. Diese Rolle ermöglicht S3 Access Grants den Zugriff auf Ihren angegebenen Standortbereich.  
![\[Bildschirm mit dem Amazon S3 S3-Dialogfeld „S3-Buckets oder -Präfixe als Standorte registrieren“ mit den Standardeinstellungen „Umfang“ und „Neue Rolle erstellen“.\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-grants-register-new.png)

   Wählen Sie **Standort registrieren, um fortzufahren**.

1. Wählen Sie die Registerkarte „**Zuschüsse**“ und dann „**Zuschuss erstellen**“ und geben Sie die folgenden Informationen ein.
   + Wählen Sie **unter Standort** die Option **Standorte durchsuchen** und wählen Sie den Standort aus, den Sie im vorherigen Schritt registriert haben.
   + Geben Sie im Feld **Subprefix** ein, **\$1** um anzugeben, dass die Zugriffsgewährung für den gesamten Bucket gilt.
   + Wählen Sie für **Berechtigungen** die Option **Lesen** und **Schreiben** aus.
   + Wählen Sie als **Grantee-Typ** die Option **Verzeichnisidentität aus IAM Identity Center** aus.
   + **Wählen Sie als **Identitätstyp des Verzeichnisses** die Option Benutzer aus.**
   + Kopieren Sie in **IAM Identity Center Benutzer/ID** die Benutzer-ID für und fügen Sie sie ein. **Bob Stiles** Diese ID ist im Bereich **Benutzer** in Ihrer Transfer Family Family-Web-App verfügbar.

1. Wählen Sie „**Zuschuss erstellen**“.

Die Zugriffsgewährung wird erstellt.

## Schritt 6: Greifen Sie als Benutzer auf Ihre Transfer Family Family-Web-App zu
<a name="web-tutorial-step6"></a>

Jetzt navigieren wir zur URL der Web-App und melden uns als der Benutzer an, den wir zuvor zugewiesen haben.

**So melden Sie sich bei der Transfer Family Family-Web-App an**

1. Navigieren Sie zu Ihrer Web-App

1. Wählen Sie im **Detailbereich der Web-App** den **Access-Endpunkt** aus.  
![\[Bildschirm mit den Details für die Web-App, die während des Tutorials erstellt wurde.\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-transfer-tutorial-enduser.png)

1. Geben Sie auf dem Anmeldebildschirm den Benutzer ein, den Sie erstellt haben**bobstiles**, und wählen Sie dann **Weiter** aus.

1. Geben Sie das Passwort ein, das das System diesem Benutzer bei der Erstellung zugewiesen hat, und wählen Sie **Weiter** aus.

1. Wenn Ihr Unternehmen eine Multi-Faktor-Authentifizierung (MFA) benötigt, müssen Sie diese jetzt einrichten. Wenn nicht, fahren Sie mit Schritt 6 fort.

   1. Es wird ein Bildschirm angezeigt, auf dem Sie Ihr MFA-Gerät registrieren können. Wählen Sie eine der verfügbaren Optionen und klicken Sie auf **Weiter**.

   1. Führen Sie die erforderlichen Schritte aus, um MFA für diesen Benutzer zu konfigurieren. Die Schritte hängen von der ausgewählten MFA-Option ab.

   1. Möglicherweise müssen Sie ein neues Passwort für Ihren Benutzer festlegen. Falls erforderlich, tun Sie dies jetzt. Das System verlangt möglicherweise auch, dass Sie sich mit den neuen MFA-Anmeldeinformationen, die Sie konfiguriert haben, erneut anmelden.

Ihrem Benutzer sollte ein Bildschirm ähnlich dem folgenden angezeigt werden. Beachten Sie, dass dieser Screenshot Anpassungen für das Favicon und das Logo enthält.

![\[Ein Beispiel für eine Transfer Family Family-Web-App mit benutzerdefiniertem Titel, Favicon und Logo.\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-enduser.png)


## Nächste Schritte
<a name="web-tutorial-conclusion"></a>

Sie haben erfolgreich eine grundlegende Transfer Family Family-Web-App mit standardmäßigem S3-Bucket-Zugriff eingerichtet. Wenn Sie eine genauere Kontrolle über Bucket-Berechtigungen benötigen, z. B. Benutzern das Herunterladen von einem Bucket und das Hochladen in einen anderen ermöglichen möchten, finden Sie weitere Informationen unter[Tutorial: AWS Transfer Family Web-App mit selektivem Multi-Bucket-Zugriff einrichten](webapp-s3-tutorial.md).

## Integrieren Sie Okta als Ihren Identitätsanbieter für Web-Apps
<a name="web-tutorial-okta"></a>

Sie können einen externen Identitätsanbieter in die Transfer Family Family-Web-Apps integrieren. In diesem Abschnitt wird beschrieben, wie Sie Okta als Ihren Identitätsanbieter einrichten.

1. Erstellen Sie in Okta einen Benutzer, eine Gruppe und eine Anwendung. Einzelheiten dazu finden Sie unter [Konfiguration von SAML und SCIM mit Okta und](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html) IAM Identity Center.   
![\[Eine Okta-Beispielanwendung zur Verwendung mit dem Tutorial zur Transfer Family Family-Web-App\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta.png)

1. Connect Okta und importieren Sie Benutzer und Gruppe von Okta nach. AWS IAM Identity Center Folgen Sie den Schritten 1—4 [unter SAML und SCIM mit Okta und IAM Identity Center konfigurieren](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html).  
![\[Das IAM Identity Center zeigt ein Beispiel für einen aus Okta integrierten Benutzer\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta-ic-user.png)  
![\[IAM Identity Center zeigt eine Beispielgruppe, die aus Okta integriert wurde\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta-ic-group.png)

1. Vergewissern Sie sich, dass die Identitätsquelle in IAM Identity Center SAML 2.0 ist.  
![\[IAM Identity Center zeigt an, dass es sich bei der Identitätsquelle um SAML 2.0 handelt\]](http://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta-confirm.png)

1. Weisen Sie Ihren Benutzer und Ihre Gruppe zu, wie unter beschrieben. [Schritt 4: Fügen Sie Ihrer Transfer Family Family-Web-App einen Benutzer hinzu](#web-tutorial-step4)

1. Um zu vermeiden, dass Ihre Benutzer MFA verwenden müssen, wenn sie sich bei Ihrer Web-App anmelden, führen Sie die folgenden Schritte in Okta durch.

   1. Rufen Sie in der Okta-Administrationskonsole **[Anwendungen] — [Anwendungen]** auf und wählen Sie die Anwendung aus. AWS IAM Identity Center 

   1. Wählen Sie auf der Registerkarte **Anmelden** die Option **[Benutzerauthentifizierung] — Bearbeiten** aus.

   1. Wählen Sie **Nur Passwort** aus.

Nachdem Sie alle anderen Schritte für das Tutorial ausgeführt haben, sollte Ihr Benutzer in der Lage sein, auf Ihre Transfer Family Family-Web-App zuzugreifen, indem er in einem Webbrowser zum Zugriffsendpunkt der Web-App navigiert.