Scénario Tâches prérequises Définition de la page Web Configuration du kit SDK Liste des albums dans le compartiment Affichage d'un album

Affichage de photos dans un compartiment Amazon S3 à partir d'un navigateur

JavaScript code example that applies to browser execution

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

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.

Le script de navigateur utilise le SDK JavaScript pour interagir avec un compartiment Amazon S3. Le script utilise la listObjectsméthode de la classe client Amazon S3 pour vous permettre de visualiser les albums photos.

Tâches prérequises

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.

Dans la console Amazon 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 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 dans le guide de l'utilisateur d'Amazon Simple Storage Service.

Dans la console Amazon Cognito, créez un pool d'identités Amazon Cognito, comme décrit Étape 1 : créer un pool d'identités Amazon Cognito 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.

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.

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

Dans l'onglet JSON, entrez la définition JSON suivante en remplaçant BUCKET_NAME par le nom de votre compartiment.


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

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. 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éé 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 dans le Guide de l'utilisateur IAM.

Avant que le script du navigateur puisse accéder au compartiment Amazon S3, vous devez configurer sa configuration CORS comme suit.

Important

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

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 (« _ ») unique. Ce caractère sera important ultérieurement pour le filtrage. Veillez également à respecter les droits d'auteur des propriétaires des photos.

Dans la console Amazon S3, ouvrez le compartiment que vous avez créé précédemment.
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 ».
Pour album1 puis album2, sélectionnez le dossier et chargez des photos comme suit :
1. Choisissez le bouton Upload (Charger).
2. Faites glisser ou choisissez les fichiers photos que vous souhaitez utiliser, puis choisissez Next (Suivant).
3. 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).
4. Choisissez le bouton Upload (Charger)(dans le coin inférieur gauche).
Laissez album3 vide.

Définition de la page Web

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_VERSION_NUMBER actuel, consultez la référence d'API du SDK pour le guide de référence des API. JavaScript AWS SDK for JavaScript


<!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

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

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

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

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Exemples de navigateurs Amazon S3

Affichage de photos dans un compartiment Amazon S3 : code complet