Pendahuluan
QuickSight, layanan AWS BI, memungkinkan Anda untuk menyematkan dasbor Anda ke dalam halaman di situs web eksternal. Dalam artikel ini, saya akan memperkenalkan langkah-langkah yang diperlukan untuk menyematkan dasbor ke dalam situs web.
Siapkan situs web Anda
Untuk menyematkan dasbor ke dalam situs web, diperlukan domain HTTPS. Dalam hal ini, kita akan menyiapkan domain HTTPS dengan melakukan hosting situs web statis di S3, dan selanjutnya, dengan mengonversi ke HTTPS dengan CloudFront.
S3
Pertama, buat ember S3. Hapus centang pada kotak centang "Block all public access".
Berikutnya, buka tab "Properties".
Klik tombol "Edit" di bawah "Hosting Situs Web Statis".
Atur Static website hosting ke Enable, masukkan index.html di Index document dan error.html di Error document dan simpan.
Selanjutnya, buka tab "Permissions" dan klik tombol "Edit" di bawah "Bucket policy".
Tetapkan JSON berikut ke bucket policy
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<YOUR BUCKET NAME>/*"
}
]
}
Buat file HTML seperti berikut ini
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1>QuickSight Dashboard Embedding</h1>
</div>
</body>
</html>
Unggah index.html yang telah dibuat ke S3.
CloudFront
Pergi ke konsol CloudFront dan klik "Create distribution".
Pilih bucket S3 yang Anda buat untuk "Origin domain".
Masukkan index.html dalam bidang "Default root object".
Konfirmasikan tangkapan di atas dan buat Distribusi.
Pengaturan domain QuickSight
Untuk menyematkan dasbor QuikcSight di web, Anda harus mendaftarkan domain HTTPS yang ingin Anda sematkan dengan QuikcSight.
Buka halaman administrasi QuickSight dan tambahkan domain di bagian "Domain dan Embedding". Dalam hal ini, kita akan menambahkan domain CloudFront yang kita buat. Perhatikan bahwa Anda tidak boleh meletakkan / di akhir domain.
Membuat & menerbitkan dasbor
Untuk membuat dan mempublikasikan dasbor, buka konsol QuickSight dan dari bagian "Analisis", pilih Analisis yang disebut "Analisis Tinjauan Bisnis" yang ada secara default. Kemudian klik tombol Bagikan di sudut kanan atas layar.
Beri nama dan publikasikan dasbor.
Menyematkan dasbor
Sumbu berikut tersedia untuk menyematkan dasbor
- Metode penerbitan URL
- Metode penyematan URL
Ada dua jenis metode penerbitan URL.
- Metode sekali klik
Ini adalah metode yang didukung oleh QuickSight Enterprise Edition, di mana kode sematan diperoleh dengan satu klik dari dasbor QuickSight. URL dalam kode adalah URL persisten. Pengguna akhir harus masuk ke QuickSight dari browser untuk mengakses dasbor tertanam. - Metode URL dengan kode autentikasi
Mengeluarkan URL dengan kode autentikasi dari AWS CLI, Python, dll. Pengguna akhir tidak perlu masuk ke QuickSight, karena otentikasi dilakukan di backend.
Ada dua cara untuk menyematkan URL.
- Metode iframe
Sematkan menggunakan tag iframe HTML. - Metode SDK
Sematkan menggunakan SDK.
Tabel berikut ini merangkum kombinasi sumbu.
| Metode penerbitan URL | Metode penyematan URL |
|---|---|
| Metode sekali klik | iframe |
| Metode sekali klik | SDK |
| Metode URL dengan kode autentikasi | iframe |
| Metode URL dengan kode autentikasi | SDK |
Di bawah ini adalah implementasi penyematan dasbor baik dalam metode satu-klik maupun URL dengan metode kode autentikasi. Perhatikan bahwa metode iframe digunakan untuk penyematan URL.
Metode sekali klik
Dengan metode satu-klik, Anda dapat dengan mudah menyematkan dasbor di halaman web.
Pertama, pilih dasbor yang telah Anda publikasikan dari bagian "Dashboard".
Klik tombol Share (Berbagi) di sudut kanan atas layar.
Pilih "Share dashboard."
Klik "Copy embed code" untuk menyalin tag iframe HTML.
Tambahkan tag iframe yang telah disalin ke index.html dan unggah ke S3.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1>QuickSight Dashboard Embedding</h1>
+ <iframe
+ width="960"
+ height="720"
+ src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/123456789123/dashboards/aaaaaaa-aaaa-4444-aaaa-aaaaaaaaaaaa?directory_alias=xxx"
+ >
+ </iframe>
</div>
</body>
</html>
Setelah mengakses CloudFront, layar masuk QuickSight akan muncul. Masukkan nama pengguna dan kata sandi Anda untuk masuk.
Setelah masuk, Anda bisa melihat dasbor yang tertanam.
Kapasitas sesi pembaca
Meskipun pengguna diharuskan masuk ke QuickSight untuk mengakses dasbor tertanam, jika Anda membeli Kapasitas Sesi Pembaca dan membuat dasbor tersedia untuk semua pengguna, semua pengguna akan diperlakukan sebagai pengguna anonim dan pengguna masuk akan menghindari kebutuhan pengguna untuk masuk. Kapasitas Sesi Pembaca adalah pembelian satu kali sesi pembaca (pemirsa).
Kapasitas sesi pembaca berbasis langganan dan memiliki struktur biaya berikut ini
| Jenis | Kapasitas (# sesi) | Harga | Biaya kelebihan biaya per sesi tambahan |
|---|---|---|---|
| Rencana bulanan | 500 / bulan | 250 USD | 0.50 USD |
| Rencana tahunan | 50,000 / tahun | 20,000 USD | 0.40 USD |
| Rencana tahunan | 200,000 / tahun | 57,600 USD | 0.28 USD |
| Rencana tahunan | 400,000 / tahun | 96,000 USD | 0.24 USD |
| Rencana tahunan | 800,000 / tahun | 162,000 USD | 0.20 USD |
| Rencana tahunan | 1,600,000 / tahun | 258,000 USD | 0.16 USD |
| Rencana tahunan | 3,000,000+ / tahun | Kontak | Kontak |
Perhatikan bahwa sesi adalah 30 menit dari waktu pengguna memulai tindakan (login, memuat dasbor, menyegarkan halaman, mengebor ke bawah atau memfilter, dll.). Bahkan jika QuickSight terbuka di latar belakang di jendela atau tab browser, itu bukan sesi aktif sampai pengunjung memulai tindakan pada halaman.
Metode URL dengan kode autentikasi
URL dengan metode Kode Otentikasi mengambil URL dengan kode otentikasi melalui AWS CLI, Python, atau Node.js API. Tidak seperti penyematan satu klik, metode ini menghilangkan kebutuhan untuk memasukkan nama pengguna dan kata sandi. Dalam artikel ini, saya akan menunjukkan kepada Anda cara mendapatkan URL dengan kode otentikasi melalui CLI.
Pertama, klik tombol share di sudut kanan atas layar dasbor yang dipublikasikan.
Pilih "Share dashboard."
Klik "Copy link" untuk menyalin URL dasbor.
Selanjutnya, periksa Arn dengan perintah aws quicksight list-users.
$ aws quicksight list-users --aws-account-id 123456789123 --namespace default --region ap-northeast-1
{
"Status": 200,
"UserList": [
{
"Arn": "arn:aws:quicksight:ap-northeast-1:123456789123:user/default/hoge",
"UserName": "hoge",
"Email": "hoge@example.com",
"Role": "ADMIN",
"IdentityType": "IAM",
"Active": true,
"PrincipalId": "federated/iam/XXXXXXXXXXXXXXXXXXXX"
}
],
"RequestId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}
Kemudian gunakan perintah aws quicksight generate-embed-url-for-registered-user untuk mendapatkan URL yang disematkan. --user-arn adalah Arn yang diperoleh dengan perintah aws quicksight list-users, dan <Dashboard ID> adalah URL dasbor yang Anda salin.
$ aws quicksight generate-embed-url-for-registered-user \
--aws-account-id 123456789123 \
--user-arn "arn:aws:quicksight:ap-northeast-1:123456789123:user/default/hoge" \
--experience-configuration '{"Dashboard": {"InitialDashboardId": "<Dashboard ID>"}}'
{
"Status": 200,
"EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embedding/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/start?code=....",
"RequestId": "aaaaaaaa-0000-44444-aaaa-aaaaaaaaaaaa"
}
Anda telah berhasil mendapatkan URL tertanam (EmbedUrl). Perhatikan bahwa EmbedUrl berlaku selama 5 menit.
Ganti src dari tag iframe di index.html dengan EmbedUrl yang diperoleh dan unggah ke S3.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1>QuickSight Dashboard Embedding</h1>
<iframe
width="960"
height="720"
+ src="https://ap-northeast-1.quicksight.aws.amazon.com/embedding/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/start?code=...."
>
</iframe>
</div>
</body>
</html>
Mengakses CloudFront, Anda dapat memverifikasi bahwa Anda dapat menjelajahi dasbor tanpa masuk.
Tentang perintah generate-embed-url-for-registered-user
Perintah aws quicksight generate-embed-url-for-registered-user dapat memiliki berbagai opsi. Lihat di bawah ini untuk detailnya.
Saya akan memperkenalkan --session-lifetime-in-minutes dan --experience-configuration.
--session-lifetime-in-minutes
--session-lifetime-in-minutes memungkinkan Anda untuk mengatur masa hidup sesi. Waktu kedaluwarsa yang dapat dikonfigurasi berkisar dari 15 hingga 600 menit, dan default ke 600 menit.
URL yang disematkan akan kedaluwarsa dalam 5 menit, tetapi setelah URL yang disematkan diakses, token dipertahankan dalam sesi.
---experience-configuration
--experience-configuration menentukan apa yang akan ditampilkan ketika embedding. Berikut ini dapat ditampilkan.
- Dasbor (
Dashboard) - Konsol QuickSight (
QuickSightConsole) - Visual (
DashboardVisual) - Bilah pencarian QuickSight Q (
QSearchBar)
Sintaksnya adalah sebagai berikut
{
"Dashboard": {
"InitialDashboardId": "string"
},
"QuickSightConsole": {
"InitialPath": "string"
},
"DashboardVisual": {
"InitialDashboardVisualId": {
"DashboardId": "string",
"SheetId": "string",
"VisualId": "string"
}
},
"QSearchBar": {
"InitialTopicId": "string"
}
}
Sebagai contoh, ---experience-configuration '{"QuickSightConsole": {"InitialPath":"/start"}}' dapat digunakan untuk menyematkan konsol QuickSight. InitialPath juga dapat berupa ID dasbor atau ID Analisis.
Namun, karena InitialPath hanya merupakan jalur tampilan awal, maka tidak tetap ke dasbor atau analisis tertentu, tetapi dapat digunakan untuk transisi ke dasbor atau analisis seperti konsol QuickSight.
Referensi
Ryusei Kakujo
Focusing on data science for mobility
Bench Press 100kg!