Die AWS SDK für JavaScript Version 2 ist erreicht end-of-support. Wir empfehlen Ihnen, auf [AWS SDK für JavaScript Version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) zu migrieren. Weitere Einzelheiten und Informationen zur Migration finden Sie in dieser [Ankündigung](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

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.

# Anzeigen von Fotos in einem Amazon S3-Bucket aus einem Browser heraus
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Dieses Beispiel eines Browser-Skriptcodes veranschaulicht:**
+ So erstellen Sie ein Fotoalbum in einem Amazon Simple Storage Service (Amazon S3) -Bucket und ermöglichen es nicht authentifizierten Benutzern, die Fotos anzusehen.

## Das Szenario
<a name="s3-example-photos-view-scenario"></a>

In diesem Beispiel bietet eine einfache HTML-Seite eine Browser-basierte Anwendung zum Anzeigen der Fotos in einem Fotoalbum. Das Fotoalbum befindet sich in einem Amazon S3 S3-Bucket, in den Fotos hochgeladen werden.

![\[JavaScript in einem Browserskript, das Amazon S3 S3-Buckets für Fotoalben verwendet.\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


Das Browser-Skript verwendet das SDK für JavaScript die Interaktion mit einem Amazon S3 S3-Bucket. Das Skript verwendet die [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)Methode der Amazon S3 S3-Clientklasse, um Ihnen das Anzeigen der Fotoalben zu ermöglichen.

## Erforderliche Aufgaben
<a name="s3-example-photos-view-scenario-prerequisites"></a>

Zum Einrichten und Ausführen dieses Beispiels schließen Sie zunächst diese Aufgaben ab.

**Anmerkung**  
In diesem Beispiel müssen Sie dieselbe AWS Region sowohl für den Amazon S3-Bucket als auch für den Amazon Cognito Cognito-Identitätspool verwenden.

### Erstellen des Buckets
<a name="s3-example-photos-view-prereq-bucket"></a>

Erstellen Sie in der [Amazon S3 S3-Konsole](https://console.aws.amazon.com/s3/) einen Amazon S3 S3-Bucket, in dem Sie Alben und Fotos speichern können. Weitere Informationen zur Verwendung der Konsole zum Erstellen eines S3-Buckets finden Sie unter [Creating a Bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) im *Amazon Simple Storage Service-Benutzerhandbuch*.

Wenn Sie den S3-Bucket erstellen, führen Sie unbedingt die folgenden Schritte aus:
+ Notieren Sie sich den Bucket-Namen, damit Sie ihn in der nachfolgenden erforderlichen Aufgabe „Konfigurieren von Rollenberechtigungen“ verwenden können.
+ Wählen Sie eine AWS Region aus, in der der Bucket erstellt werden soll. Dies muss dieselbe Region sein, die Sie verwenden werden, um einen Amazon Cognito Cognito-Identitätspool in einer nachfolgenden vorausgesetzten Aufgabe, Create an Identity Pool, zu erstellen.
+ Konfigurieren Sie Bucket-Berechtigungen, indem Sie den [Abschnitt Berechtigungen für den Zugriff auf Websites einrichten](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html) im *Amazon Simple Storage Service-Benutzerhandbuch befolgen*.

### Erstellen eines -Identitäten-Pools
<a name="s3-example-photos-view-prereq-idpool"></a>

Erstellen Sie in der [Amazon Cognito Cognito-Konsole](https://console.aws.amazon.com/cognito/) einen Amazon Cognito Cognito-Identitätspool, wie im [Schritt 1: Erstellen Sie einen Amazon Cognito Cognito-Identitätspool](getting-started-browser.md#getting-started-browser-create-identity-pool) Thema *Erste Schritte in einem Browserskript* beschrieben.

Notieren Sie sich beim Erstellen des Identitätspools den Namen des Identitätspools sowie den Rollennamen für die **nicht** authentifizierte Identität.

### Konfigurieren der Rollenberechtigungen
<a name="s3-example-photos-view-prereq-perms"></a>

Um das Ansehen von Alben und Fotos zu ermöglichen, müssen Sie einer IAM-Rolle des Identitätspools, den Sie gerade erstellt haben, Berechtigungen hinzufügen. Beginnen Sie mit der Erstellung einer Richtlinie wie folgt.

1. Öffnen Sie die [IAM-Konsole](https://console.aws.amazon.com/iam/).

1. Wählen Sie im Navigationsbereich linken **Policies (Richtlinien)** und dann **Create Policy (Richtlinie erstellen)** aus.

1. Geben Sie auf der Registerkarte **JSON** die folgende JSON-Definition ein. Ersetzen Sie dabei aber *BUCKET\$1NAME* durch den Namen des Buckets.

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "s3:ListBucket"
            ],
            "Resource": [
               "arn:aws:s3:::BUCKET_NAME"
            ]
         }
      ]
   }
   ```

------

1. Wählen Sie die Schaltfläche **Review policy (Richtlinie überprüfen)** aus, benennen Sie die Richtlinie und stellen Sie (falls gewünscht) eine Beschreibung bereit. Wählen Sie anschließend die Schaltfläche **Create policy (Richtlinie erstellen)** aus.

   Notieren Sie sich unbedingt den Namen, damit Sie ihn finden und der IAM-Rolle später zuordnen können.

Nachdem die Richtlinie erstellt wurde, kehren Sie zur [IAM-Konsole](https://console.aws.amazon.com/iam/) zurück. Suchen Sie die IAM-Rolle für die **nicht authentifizierte** Identität, die Amazon Cognito in der vorherigen vorausgesetzten Aufgabe Create an Identity Pool erstellt hat. Fügen Sie dieser Identität mit der soeben erstellten Richtlinie Berechtigungen hinzu.

Obwohl der Workflow für diese Aufgabe generell dem von [Schritt 2: Fügen Sie der erstellten IAM-Rolle eine Richtlinie hinzu](getting-started-browser.md#getting-started-browser-iam-role) im Thema *Erste Schritte in einem Browser Script* entspricht, sind dennoch einige Unterschiede zu beachten:
+ Verwenden Sie die neue Richtlinie, die Sie gerade erstellt haben, keine Richtlinie für Amazon Polly.
+ Öffnen auf der Seite **Attach Permissions (Berechtigungen zuweisen)** die Liste **Filter policies (Richtlinien filtern)**, um die neue Richtlinie schnell zu finden, und wählen Sie **Customer managed (Vom Kunden verwaltet)** aus.

Weitere Informationen zum Erstellen einer IAM-Rolle finden Sie unter [Creating a Role to Delegate Permissions to an AWS Service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) im *IAM-Benutzerhandbuch*.

### Konfigurieren von CORS
<a name="s3-example-photos-view-cors-configuration"></a>

Bevor das Browserskript auf den Amazon S3 S3-Bucket zugreifen kann, müssen Sie seine [CORS-Konfiguration](cors.md#configuring-cors-s3-bucket) wie folgt einrichten.

**Wichtig**  
In der neuen S3-Konsole muss die CORS-Konfiguration JSON sein.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

------

### Erstellen von Alben und Hochladen von Fotos
<a name="s3-example-photos-view-create-albums"></a>

Da die Benutzer in diesem Beispiel nur die Fotos anzeigen können, die bereits sich bereits im Bucket befinden, müssen Sie einige Alben im Bucket erstellen und Fotos zu ihnen hochladen.

**Anmerkung**  
Die Dateinamen für dieses Beispiel müssen mit einem einzelnen Unterstrich ("\$1") beginnen. Dieses Zeichen ist für die spätere Filterung wichtig. Stellen Sie außerdem sicher, dass die Urheberrechte der Eigentümer des Fotos beachtet werden.

1. Öffnen Sie in der [Amazon S3 S3-Konsole](https://console.aws.amazon.com/s3/) den Bucket, den Sie zuvor erstellt haben.

1. Wählen Sie auf der Registerkarte **Overview (Übersicht)** die Schaltfläche **Create folder (Ordner erstellen)** aus, um Ordner zu erstellen. Nennen Sie die Ordner in diesem Beispiel „album1“, „album2“ und „album3“.

1. Wählen Sie für **album1** und dann **album2** den Ordner aus laden Sie anschließend die Fotos wie folgt hoch:

   1. Wählen Sie die Schaltfläche **Upload (Hochladen)** aus.

   1. Ziehen Sie die zu verwendenden Fotodateien oder wählen Sie sie aus, und klicken Sie auf **Next (Weiter)**.

   1. Wählen Sie unter **Manage public permissions (Öffentliche Berechtigungen verwalten)** die Option **Grant public read access to this object(s) (Diesen Objekten öffentlichen Lesezugriff gewähren)** aus.

   1. Wählen Sie die Schaltfläche **Hochladen** (in der linken unteren Ecke) aus.

1. Lassen Sie **album3** leer.

## Definieren der Webseite
<a name="s3-example-photos-view-html"></a>

Der HTML-Code für das Foto-Anzeigeprogramm besteht aus einem `<div>`-Element, in dem das Browser-Skript die Anzeigeschnittstelle erstellt. Das erste `<script>`-Element fügt das SDK dem Browser-Skript hinzu. Das zweite `<script>` Element fügt die externe JavaScript Datei hinzu, die den Browser-Skriptcode enthält. 

In diesem Beispiel hat die Datei den Namen `PhotoViewer.js`. Sie befindet sich im selben Ordner wie die HTML-Datei. [Die aktuelle SDK\$1VERSION\$1NUMBER finden Sie in der API-Referenz für das SDK im API-Referenzhandbuch. JavaScript AWS SDK für JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

```
<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>
```



## Konfigurieren des SDKs
<a name="s3-example-photos-view-config"></a>

Sie erhalten die erforderlichen Anmeldeinformationen zum Konfigurieren des SDK, indem Sie die `CognitoIdentityCredentials`-Methode aufrufen. Sie müssen die Amazon Cognito Cognito-Identitätspool-ID angeben. Erstellen Sie als nächstes ein `AWS.S3`-Serviceobjekt.

```
// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}
```

Der Rest des Codes in diesem Beispiel definiert die folgenden Funktionen zum Sammeln und Präsentieren der Informationen über die Alben und Fotos im Bucket.
+ `listAlbums`
+ `viewAlbum`

## Auflisten von Alben im Bucket
<a name="s3-example-photos-view-list-albums"></a>

Wenn Sie alle vorhandenen Alben im Bucket aufführen möchten, ruft die `listAlbums`-Funktion der Anwendung die `listObjects`-Methode des `AWS.S3`-Service-Objekts auf. Die Funktion verwendet die `CommonPrefixes`-Eigenschaft, damit der Aufruf nur Objekte zurückgibt, die als Alben verwendet werden (d. h. die Ordner).

Der Rest der Funktion nimmt die Liste der Alben aus dem Amazon S3 S3-Bucket und generiert den HTML-Code, der für die Anzeige der Albumliste auf der Webseite benötigt wird.

```
// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}
```

## Anzeigen eines Albums
<a name="s3-example-photos-view-viewing-album"></a>

Um den Inhalt eines Albums im Amazon S3 S3-Bucket anzuzeigen, verwendet die `viewAlbum` Funktion der Anwendung einen Albumnamen und erstellt den Amazon S3 S3-Schlüssel für dieses Album. Im Anschluss daran ruft die Funktion die `listObjects`-Methode des `AWS.S3`-Serviceobjekts auf, um eine Liste aller Objekte (Fotos) im Album zu erhalten.

Der Rest der Funktion übernimmt die Liste der Objekte, die sich im Album befinden, und generiert den erforderlichen HTML-Code für die Darstellung der Fotos auf der Webseite.

```
// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}
```