La AWS SDK pour JavaScript v2 est arrivée end-of-support. Nous vous recommandons de migrer vers la [AWS SDK pour JavaScript version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Pour plus de détails et d'informations sur la façon de migrer, veuillez consulter cette [annonce](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Affichage de photos dans un compartiment Amazon S3 à partir d'un navigateur
<a name="s3-example-photos-view"></a>

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

**Cet exemple de code de script de navigateur illustre :**
+ Comment créer un album photo dans un compartiment Amazon Simple Storage Service (Amazon S3) et autoriser les utilisateurs non authentifiés à voir les photos.

## Scénario
<a name="s3-example-photos-view-scenario"></a>

Dans cet exemple, une simple page HTML fournit une application basée sur un navigateur pour afficher des photos dans un album photo. L'album photo se trouve dans un compartiment Amazon S3 dans lequel les photos sont téléchargées.

![\[JavaScript dans un script de navigateur utilisant des compartiments Amazon S3 pour les albums photos.\]](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


Le script de navigateur utilise le SDK JavaScript pour interagir avec un compartiment Amazon S3. Le script utilise la [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)méthode de la classe client Amazon S3 pour vous permettre de visualiser les albums photos.

## Tâches prérequises
<a name="s3-example-photos-view-scenario-prerequisites"></a>

Pour configurer et exécuter cet exemple, réalisez tout d'abord les tâches ci-après.

**Note**  
Dans cet exemple, vous devez utiliser la même AWS région pour le compartiment Amazon S3 et le pool d'identités Amazon Cognito.

### Créer le compartiment
<a name="s3-example-photos-view-prereq-bucket"></a>

Dans la [console Amazon S3](https://console.aws.amazon.com/s3/), créez un compartiment Amazon S3 dans lequel vous pouvez stocker des albums et des photos. Pour plus d'informations sur l'utilisation de la console pour créer un compartiment S3, consultez la section [Création d'un compartiment](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) dans le *guide de l'utilisateur d'Amazon Simple Storage Service*.

Lorsque vous créez le compartiment S3, veillez à :
+ Noter le nom du compartiment afin de pouvoir l'utiliser ultérieurement dans la tâche prérequise Configurer des autorisations de rôle.
+ Choisissez une AWS région dans laquelle créer le compartiment. Il doit s'agir de la même région que celle que vous utiliserez pour créer un pool d'identités Amazon Cognito lors d'une tâche préalable ultérieure, Créer un pool d'identités.
+ Configurez les autorisations du bucket en suivant la procédure de [définition des autorisations pour l'accès au site Web](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html) dans le *guide de l'utilisateur d'Amazon Simple Storage Service*.

### Créer un groupe d'identités
<a name="s3-example-photos-view-prereq-idpool"></a>

Dans la [console Amazon Cognito](https://console.aws.amazon.com/cognito/), créez un pool d'identités Amazon Cognito, comme décrit [Étape 1 : créer un pool d'identités Amazon Cognito](getting-started-browser.md#getting-started-browser-create-identity-pool) dans *la rubrique Getting Started in a Browser Script*.

Lorsque vous créez le pool d'identités, notez le nom du pool d'identités, ainsi que le nom du rôle de l'identité **non authentifiée.**

### Configurer les autorisations de rôle
<a name="s3-example-photos-view-prereq-perms"></a>

Pour autoriser l'affichage d'albums et de photos, vous devez ajouter des autorisations à un rôle IAM du pool d'identités que vous venez de créer. Commencez par créer une stratégie comme suit.

1. Ouvrez la [console IAM](https://console.aws.amazon.com/iam/).

1. Dans le volet de navigation de gauche, choisissez **Policies (Stratégies)**, puis le bouton **Create policy (Créer une stratégie)**.

1. Dans l'onglet **JSON**, entrez la définition JSON suivante en remplaçant *BUCKET\$1NAME* par le nom de votre compartiment.

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

****  

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

------

1. Choisissez le bouton **Review policy (Vérifier la stratégie)**, nommez la stratégie et fournissez une description (si vous le souhaitez), puis choisissez le bouton **Create policy (Créer la stratégie)**.

   N'oubliez pas de noter le nom afin de pouvoir le retrouver et de l'associer ultérieurement au rôle IAM.

Une fois la politique créée, revenez à la [console IAM.](https://console.aws.amazon.com/iam/) Recherchez le rôle IAM pour l'identité **non authentifiée** créée par Amazon Cognito dans la tâche préalable précédente, Créer un pool d'identités. Utilisez la stratégie que vous venez de créer pour ajouter des autorisations à cette identité.

Bien que le flux de travail pour cette tâche soit généralement le même que celui de [Étape 2 : ajouter une politique au rôle IAM créé](getting-started-browser.md#getting-started-browser-iam-role) de la rubrique *Démarrage dans un script de navigateur*, quelques différences doivent être notées :
+ Utilisez la nouvelle politique que vous venez de créer, et non une politique pour Amazon Polly.
+ Sur la page **Attach Permissions (Attacher des autorisations)**, pour retrouver rapidement la nouvelle stratégie, ouvrez la liste **Filter policies (Filtrer les stratégies)** et choisissez **Customer managed (Gérées par l’utilisateur)**.

Pour plus d'informations sur la création d'un rôle IAM, consultez la section [Création d'un rôle pour déléguer des autorisations à un AWS service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) dans le Guide de l'*utilisateur IAM*.

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

Avant que le script du navigateur puisse accéder au compartiment Amazon S3, vous devez configurer sa [configuration CORS](cors.md#configuring-cors-s3-bucket) comme suit.

**Important**  
Dans la nouvelle console S3, la configuration CORS doit être de type JSON.

------
#### [ 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>
```

------

### Créer des albums et charge des photos
<a name="s3-example-photos-view-create-albums"></a>

Cet exemple permettant uniquement aux utilisateurs d'afficher les photos qui sont déjà dans le compartiment, vous devez créer des albums dans le compartiment et y charger des photos.

**Note**  
Dans cet exemple, les noms de fichier photo doivent commencer par un trait de soulignement (« \$1 ») unique. Ce caractère sera important ultérieurement pour le filtrage. Veillez également à respecter les droits d'auteur des propriétaires des photos.

1. Dans la [console Amazon S3](https://console.aws.amazon.com/s3/), ouvrez le compartiment que vous avez créé précédemment.

1. Dans l'onglet **Overview (Présentation)**, cliquez sur le bouton **Create folder (Créer un dossier)** pour créer des dossiers. Pour cet exemple, nommez les dossiers « album1 », « album2 » et « album3 ».

1. Pour **album1** puis **album2**, sélectionnez le dossier et chargez des photos comme suit :

   1. Choisissez le bouton **Upload (Charger)**.

   1. Faites glisser ou choisissez les fichiers photos que vous souhaitez utiliser, puis choisissez **Next (Suivant)**.

   1. Sous **Manage public permissions Gérer les autorisations publiques)**, choisissez **Grant public read access to this object(s) (Octroyer un accès en lecture public à ces objets)**.

   1. Choisissez le bouton **Upload (Charger)**(dans le coin inférieur gauche).

1. Laissez **album3** vide.

## Définition de la page Web
<a name="s3-example-photos-view-html"></a>

Le code HTML pour l’application d’affichage de photos se compose d'un élément `<div>` dans lequel le script de navigateur crée l'interface d'affichage. Le premier élément `<script>` ajoute le kit SDK au script de navigateur. Le deuxième `<script>` élément ajoute le JavaScript fichier externe qui contient le code du script du navigateur. 

Pour cet exemple, le fichier est nommé `PhotoViewer.js`, et se trouve dans le même dossier que le fichier HTML. [Pour trouver le SDK\$1VERSION\$1NUMBER actuel, consultez la référence d'API du SDK pour le guide de référence des API. JavaScript AWS SDK pour 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>
```



## Configuration du kit SDK
<a name="s3-example-photos-view-config"></a>

Obtenez les informations d'identification dont vous avez besoin pour configurer le kit SDK en appelant la méthode `CognitoIdentityCredentials`. Vous devez fournir l'ID du pool d'identités Amazon Cognito. Ensuite, créez un objet de service `AWS.S3`.

```
// **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");
}
```

Dans cet exemple, le reste du code définit les fonctions suivantes pour collecter et présenter des informations sur les albums et les photos du compartiment.
+ `listAlbums`
+ `viewAlbum`

## Liste des albums dans le compartiment
<a name="s3-example-photos-view-list-albums"></a>

Pour répertorier tous les albums existants dans le compartiment, la fonction `listAlbums` de l'application appelle la méthode `listObjects` de l'objet de service `AWS.S3`. La fonction utilise la propriété `CommonPrefixes` de sorte que l'appel renvoie uniquement les objets utilisés en tant qu’albums (c'est-à-dire, les dossiers).

Le reste de la fonction prend la liste des albums du compartiment Amazon S3 et génère le code HTML nécessaire pour afficher la liste des albums sur la page Web.

```
// 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);
    }
  });
}
```

## Affichage d'un album
<a name="s3-example-photos-view-viewing-album"></a>

Pour afficher le contenu d'un album dans le compartiment Amazon S3, la `viewAlbum` fonction de l'application prend un nom d'album et crée la clé Amazon S3 pour cet album. Ensuite, la fonction appelle la méthode `listObjects` de l'objet de service `AWS.S3` pour obtenir une liste de tous les objets (les photos) de l'album.

Le reste de la fonction prend la liste des objets (photos) de l'album et génère le code HTML nécessaire à l'affichage des photos dans la page web.

```
// 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;");
  });
}
```