Kami mengumumkan
Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Melihat Foto di Bucket Amazon S3 dari Browser
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.](images/s3-photo-album-example.png)
Skrip browser menggunakan SDK JavaScript untuk berinteraksi dengan bucket Amazon S3. Skrip menggunakan listObjects
metode 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
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
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
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:
-
Pilih tombol Unggah.
-
Seret atau pilih file foto yang ingin Anda gunakan, lalu pilih Berikutnya.
-
Di bawah Kelola izin publik, pilih Berikan akses baca publik ke objek ini.
-
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;"); }); }