

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-Web-App einrichten
<a name="web-app-tutorial"></a>

In diesem Tutorial erfahren Sie, wie Sie eine Transfer Family-Web-App einrichten. Die Transfer Family-Web-Apps ermöglichen eine einfache Oberfläche für die Übertragung von Daten zu und von Amazon S3 über einen Webbrowser. Eine ausführliche Dokumentation zu dieser Funktion finden Sie unter[Web-Apps für Familien ü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-Web-Apps](webapp-identity-center.md).

  Wenn Sie IAM Identity Center nicht als Identitätsanbieter verwenden, wird hier [Integrieren Sie Okta als Ihren Identitätsanbieter für Web-Apps](#web-tutorial-okta) veranschaulicht, wie Sie einen alternativen Identitätsanbieter (in diesem Fall Okta) verwenden.
+ Sie benötigen einen Amazon S3-Bucket, den Sie für die Interaktion mit Ihrer Transfer Family-Web-App verwenden können. Details hierzu finden Sie unter [Konfigurieren Sie einen Amazon S3-Bucket](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. Wenn dies nicht der Fall ist, lesen Sie nach, [Konfigurieren Sie Ihren Identitätsanbieter für Transfer 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. Außerdem benötigen Sie zwei Rollen: eine, die Sie als Identitätsträger für Ihre Web-App verwenden können, und eine zweite, um eine Amazon S3-Zugriffsgewährung zu konfigurieren. Für das Tutorial erlauben wir 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 möchten, oder Sie können ein Einmalpasswort generieren, das Sie mit ihm teilen können.

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-Web-App
<a name="web-tutorial-step2"></a>

**Um eine Transfer Family-Web-App zu erstellen**

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 Zugriff auf die Authentifizierung, dass der Service automatisch die AWS IAM Identity Center Instanz findet, die Sie als Voraussetzung eingerichtet haben.

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äger-Rolle beinhaltet die Identität eines authentifizierten Benutzers in ihren Sitzungen.

1. Akzeptieren Sie im ** Bereich ** Web-App-Einheiten den Standardwert 1 oder passen Sie ihn bei Bedarf an 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 den ** Namen ** für den Schlüssel und ** Tutorial-Web-App ** für den Wert ein.
**Tipp**  
Sie können den Namen der Web-App direkt auf der ** ** Web-Apps-Listenseite bearbeiten, nachdem Sie ihn erstellt haben.

1. Wählen Sie ** Weiter**, um die ** Seite ** Web-App-Design 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 Web App ** ** übertragen 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 dann Web-App ** ** erstellen.

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

## Schritt 3: Konfiguriere Cross-origin Resource Sharing (CORS) für deinen 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 den Zugriff auf Ihren Bucket gestatten. Weitere Informationen zu CORS finden Sie unter [ Configuring Cross-Origin Resource Sharing (CORS). ](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html?icmpid=docs_amazons3_console)

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

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

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

1. Wählen Sie in ** Cross-origin Resource Sharing (CORS) ** die Option ** Bearbeiten aus ** und fügen Sie den folgenden Code ein. {{AccessEndpoint}}Ersetzen Sie ihn 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 Endpunkte für den Web-App-Zugriff 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-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.

**Um Benutzer einer Transfer Family-Web-App zuzuweisen**

1. Navigiere zu der Web-App, die du zuvor erstellt hast.

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

1. Um den Benutzer zuzuweisen, den Sie zuvor im IAM Identity Center erstellt haben, wählen Sie Bestehende 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 Management Console, suchen Sie den Benutzer, kopieren Sie dann seinen Anzeigenamen und fügen Sie ihn hier ein.

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

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

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

**Anmerkung**  
Sie benötigen eine S3 Access Grants-Instanz, 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 Zugriffsgewährung zu erstellen**

1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die Amazon 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 die ** Registerkarte ** 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, auf dem das Amazon S3-Dialogfeld „S3-Buckets oder -Präfixe als Standorte registrieren“ mit den Standardeinstellungen „Umfang“ und „Neue Rolle erstellen“ angezeigt wird.](https://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 den ** Tab „**Zuschüsse“ und dann „Zuschuss ** erstellen“ ** und geben Sie die folgenden Informationen ein.
   + Wählen Sie ** unter Standort ** die Option Standorte ** durchsuchen aus ** und wählen Sie den Standort aus, den Sie im vorherigen Schritt registriert haben.
   + Geben Sie für ** Subprefix den Wert ein**, **\*** 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 für den Typ ** des Stipendiaten ** die Option ** Verzeichnisidentität aus dem IAM Identity Center aus. **
   + Wählen Sie als ** Verzeichnisidentitätstyp 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-Web-App verfügbar.

1. Wählen Sie ** Create Grant aus**.

Die Zugriffsgewährung wird erstellt.

## Schritt 6: Greifen Sie als Benutzer auf Ihre Transfer 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.

**Um sich bei der Transfer Family-Web-App anzumelden**

1. Navigiere zu deiner 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.](https://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**.

1. Wenn Ihre Organisation eine Multifaktor-Authentifizierung (MFA) benötigt, müssen Sie sie 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 erneut mit den neuen MFA-Anmeldeinformationen anmelden, die Sie konfiguriert haben.

Ihr Benutzer sollte einen Bildschirm sehen, der dem folgenden ähnelt. Beachten Sie, dass dieser Screenshot Anpassungen für das Favicon und das Logo beinhaltet.

![Ein Beispiel für eine Transfer Family-Web-App mit benutzerdefiniertem Titel, Favicon und Logo.](https://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 einfache Transfer Family-Web-App mit standardmäßigem S3-Bucket-Zugriff eingerichtet. Wenn Sie eine detailliertere Kontrolle über Bucket-Berechtigungen benötigen, z. B. Benutzern das Herunterladen von einem Bucket und das Hochladen in einen anderen ermöglichen, finden Sie 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-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 [ Konfigurieren von SAML und SCIM mit Okta und IAM Identity Center. ](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)   
![Eine Okta-Beispielanwendung zur Verwendung mit dem Tutorial zur Transfer Family-Web-App](https://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta.png)

1. Verbinde Okta und importiere Benutzer und Gruppen 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)  
![IAM Identity Center zeigt ein Beispiel für einen Benutzer, der von Okta aus integriert wurde](https://docs.aws.amazon.com/de_de/transfer/latest/userguide/images/webapp-tutorial-okta-ic-user.png)  
![IAM Identity Center zeigt eine Beispielgruppe, die von Okta integriert wurde](https://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](https://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-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 aus.

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

   1. Wählen ** Sie auf der ** Registerkarte Anmelden ** [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 auf Ihre Transfer Family-Web-App zugreifen können, indem er in einem Webbrowser zum Zugriffsendpunkt der Web-App navigiert.