Skenario Tugas Prasyarat Mendefinisikan Halaman Web Mengkonfigurasi SDK Daftar Album di Bucket Melihat Album

Melihat Foto di Bucket Amazon S3 dari Browser

JavaScript code example that applies to browser execution

Contoh kode skrip browser ini menunjukkan:

Cara membuat album foto di bucket Amazon Simple Storage Service (Amazon S3) Simple Storage S3) dan memungkinkan pengguna yang tidak diautentikasi untuk melihat foto.

Skenario

Dalam contoh ini, halaman HTML sederhana menyediakan aplikasi berbasis browser untuk melihat foto di album foto. Album foto ada dalam ember Amazon S3 tempat foto diunggah.

JavaScript dalam skrip browser menggunakan ember Amazon S3 untuk album foto.

Skrip browser menggunakan SDK JavaScript untuk berinteraksi dengan bucket Amazon S3. Skrip menggunakan listObjectsmetode kelas klien Amazon S3 untuk memungkinkan Anda melihat album foto.

Tugas Prasyarat

Untuk mengatur dan menjalankan contoh ini, pertama-tama selesaikan tugas-tugas ini.

catatan

Dalam contoh ini, Anda harus menggunakan AWS Wilayah yang sama untuk bucket Amazon S3 dan kumpulan identitas Amazon Cognito.

Di konsol Amazon S3, buat bucket Amazon S3 tempat Anda dapat menyimpan album dan foto. Untuk informasi selengkapnya tentang menggunakan konsol untuk membuat bucket S3, lihat Membuat Bucket di Panduan Pengguna Layanan Penyimpanan Sederhana Amazon.

Saat Anda membuat bucket S3, pastikan untuk melakukan hal berikut:

Catat nama bucket sehingga Anda dapat menggunakannya dalam tugas prasyarat berikutnya, Mengonfigurasi Izin Peran.
Pilih AWS Region untuk membuat bucket. Ini harus Wilayah yang sama yang akan Anda gunakan untuk membuat kumpulan identitas Amazon Cognito dalam tugas prasyarat berikutnya, Buat Kumpulan Identitas.
Konfigurasikan izin bucket dengan mengikuti Pengaturan izin untuk akses situs web di Panduan Pengguna Layanan Penyimpanan Sederhana Amazon.

Di konsol Amazon Cognito, buat kumpulan identitas Amazon Cognito, seperti yang dijelaskan Langkah 1: Buat Kolam Identitas Amazon Cognito dalam topik Memulai dalam Skrip Browser.

Saat Anda membuat kumpulan identitas, catat nama kumpulan identitas, serta nama peran untuk identitas yang tidak diautentikasi.

Untuk memungkinkan melihat album dan foto, Anda harus menambahkan izin ke peran IAM dari kumpulan identitas yang baru saja Anda buat. Mulailah dengan membuat kebijakan sebagai berikut.

Buka konsol IAM.
Di panel navigasi di sebelah kiri, pilih Kebijakan, lalu pilih tombol Buat kebijakan.

Pada tab JSON, masukkan definisi JSON berikut, tetapi ganti BUCKET_NAME dengan nama bucket.


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

Pilih tombol Tinjau kebijakan, beri nama kebijakan dan berikan deskripsi (jika Anda mau), lalu pilih tombol Buat kebijakan.

Pastikan untuk mencatat nama sehingga Anda dapat menemukannya dan melampirkannya ke peran IAM nanti.

Setelah kebijakan dibuat, navigasikan kembali ke konsol IAM. Temukan peran IAM untuk identitas tidak terautentikasi yang dibuat Amazon Cognito di tugas prasyarat sebelumnya, Buat Kumpulan Identitas. Anda menggunakan kebijakan yang baru saja dibuat untuk menambahkan izin ke identitas ini.

Meskipun alur kerja untuk tugas ini umumnya sama Langkah 2: Tambahkan Kebijakan ke Peran IAM yang Dibuat dengan topik Memulai dalam Skrip Browser, ada beberapa perbedaan yang perlu diperhatikan:

Gunakan kebijakan baru yang baru saja Anda buat, bukan kebijakan untuk Amazon Polly.
Pada halaman Lampirkan Izin, untuk menemukan kebijakan baru dengan cepat, buka daftar Filter kebijakan dan pilih Pelanggan yang dikelola.

Untuk informasi tambahan tentang membuat peran IAM, lihat Membuat Peran untuk Mendelegasikan Izin ke AWS Layanan di Panduan Pengguna IAM.

Sebelum skrip browser dapat mengakses bucket Amazon S3, Anda harus mengatur konfigurasi CORS-nya sebagai berikut.

penting

Pada konsol S3 baru, konfigurasi CORS harus JSON.

Karena contoh ini hanya memungkinkan pengguna untuk melihat foto yang sudah ada di ember, Anda perlu membuat beberapa album di ember dan mengunggah foto ke mereka.

catatan

Untuk contoh ini, nama file file foto harus dimulai dengan satu garis bawah (“_”). Karakter ini penting nanti untuk penyaringan. Selain itu, pastikan untuk menghormati hak cipta pemilik foto.

Di konsol Amazon S3, buka bucket yang Anda buat sebelumnya.
Pada tab Ikhtisar, pilih tombol Buat folder untuk membuat folder. Untuk contoh ini, beri nama folder “album1", “album2", dan “album3".
Untuk album1 dan kemudian album2, pilih folder dan kemudian unggah foto ke dalamnya sebagai berikut:
1. Pilih tombol Unggah.
2. Seret atau pilih file foto yang ingin Anda gunakan, lalu pilih Berikutnya.
3. Di bawah Kelola izin publik, pilih Berikan akses baca publik ke objek ini.
4. Pilih tombol Upload (di pojok kiri bawah).
Biarkan album3 kosong.

Mendefinisikan Halaman Web

HTML untuk aplikasi melihat foto terdiri dari <div> elemen di mana skrip browser membuat antarmuka tampilan. <script>Elemen pertama menambahkan SDK ke skrip browser. <script>Elemen kedua menambahkan JavaScript file eksternal yang memegang kode skrip browser.

Untuk contoh ini, file tersebut diberi namaPhotoViewer.js, dan terletak di folder yang sama dengan file HTML. Untuk menemukan SDK_VERSION_NUMBER saat ini, lihat Referensi API untuk SDK untuk Panduan Referensi 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>

Mengkonfigurasi SDK

Dapatkan kredensional yang Anda perlukan untuk mengonfigurasi SDK dengan memanggil metode. CognitoIdentityCredentials Anda harus memberikan ID kumpulan identitas Amazon Cognito. Kemudian buat objek AWS.S3 layanan.


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

Sisa kode dalam contoh ini mendefinisikan fungsi-fungsi berikut untuk mengumpulkan dan menyajikan informasi tentang album dan foto dalam ember.

listAlbums
viewAlbum

Daftar Album di Bucket

Untuk mencantumkan semua album yang ada di bucket, listAlbums fungsi aplikasi memanggil listObjects metode objek AWS.S3 layanan. Fungsi ini menggunakan CommonPrefixes properti sehingga panggilan hanya mengembalikan objek yang digunakan sebagai album (yaitu, folder).

Sisa fungsi mengambil daftar album dari bucket Amazon S3 dan menghasilkan HTML yang diperlukan untuk menampilkan daftar album di halaman 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);
    }
  });
}

Melihat Album

Untuk menampilkan konten album di bucket Amazon S3, viewAlbum fungsi aplikasi mengambil nama album dan membuat kunci Amazon S3 untuk album itu. Fungsi kemudian memanggil listObjects metode objek AWS.S3 layanan untuk mendapatkan daftar semua objek (foto) dalam album.

Sisa fungsi mengambil daftar objek yang ada di album dan menghasilkan HTML yang diperlukan untuk menampilkan foto di halaman 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;");
  });
}

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Contoh Browser Amazon S3

Melihat Foto di Bucket Amazon S3: Kode Lengkap