Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Sematkan komponen visual Amazon Quick Sight ke dalam aplikasi web dengan menggunakan otomatisasi Amazon Cognito dan IAc
*Ishita Gupta, Saurabh Singh, dan Srishti Wadhwa, Amazon Web Services*
## Ringkasan
Pola ini memberikan pendekatan khusus untuk menyematkan komponen visual Amazon Quick Sight ke dalam aplikasi React dengan menggunakan penyematan pengguna terdaftar dengan otentikasi Amazon Cognito yang efisien. Sumber daya ini kemudian digunakan melalui template infrastruktur sebagai kode (IAc). Tidak seperti penyematan dasbor tradisional, solusi ini mengisolasi bagan dan grafik tertentu untuk integrasi langsung ke dalam aplikasi React, yang secara dramatis meningkatkan kinerja dan pengalaman pengguna.
Arsitektur menetapkan alur otentikasi yang efisien antara manajemen pengguna Amazon Cognito dan izin Quick Sight: Pengguna mengautentikasi melalui Amazon Cognito dan mengakses visualisasi resmi mereka berdasarkan aturan berbagi dasbor di Quick Sight. Pendekatan yang disederhanakan ini menghilangkan kebutuhan akan akses konsol Quick Sight langsung sambil mempertahankan kontrol keamanan yang kuat.
Lingkungan lengkap digunakan melalui satu AWS CloudFormation templat yang menyediakan semua komponen infrastruktur yang diperlukan, termasuk:
+ Backend tanpa server yang menggunakan AWS Lambda dan Amazon API Gateway
+ Hosting frontend aman melalui Amazon CloudFront, Amazon Simple Storage Service (Amazon S3), dan AWS WAF
+ Manajemen identitas dengan menggunakan Amazon Cognito
Semua komponen dikonfigurasi dengan mengikuti praktik terbaik keamanan dengan kebijakan, perlindungan, dan enkripsi dengan hak istimewa paling rendah AWS Identity and Access Management (IAM). AWS WAF end-to-end
Solusi ini sangat ideal untuk tim pengembangan dan organisasi yang ingin mengintegrasikan analitik interaktif yang aman ke dalam aplikasi mereka sambil mempertahankan kontrol halus atas akses pengguna. Solusi ini menggunakan layanan AWS terkelola dan otomatisasi untuk menyederhanakan proses penyematan, meningkatkan keamanan, dan memastikan skalabilitas untuk memenuhi kebutuhan bisnis yang terus berkembang.
Target audiens dan kasus penggunaan:
+ **Pengembang frontend** yang ingin menyematkan analitik ke dalam aplikasi React
+ **Tim produk perangkat lunak sebagai layanan (SaaS)** yang ingin menawarkan visualisasi data per pengguna atau berbasis peran
+ **Arsitek solusi** yang tertarik untuk mengintegrasikan AWS analitik ke dalam portal khusus
+ **Pengembang Business Intelligence (BI)** yang ingin mengekspos visual ke pengguna yang diautentikasi tanpa memerlukan akses dasbor penuh
+ **Tim perusahaan** yang ingin menyematkan bagan Quick Sight interaktif dalam alat internal
## Prasyarat dan batasan
**Prasyarat**
Agar berhasil menerapkan pola ini, pastikan bahwa berikut ini sudah ada:
+ **Aktif Akun AWS** — An Akun AWS dengan izin untuk menerapkan CloudFormation tumpukan dan membuat sumber daya Lambda, API Gateway, Amazon Cognito, CloudFront, dan Amazon S3.
+ Akun **Amazon Quick Sight — Akun** Quick Sight aktif dengan setidaknya satu dasbor yang berisi visual. Untuk petunjuk penyiapan, lihat [Tutorial: Membuat dasbor Amazon Quick Sight menggunakan data sampel](https://docs.aws.amazon.com/quicksuite/latest/userguide/example-analysis.html) dalam dokumentasi Amazon Quick.
+ **Lingkungan pengembangan** yang terdiri dari:
+ Node.js (versi 16 atau yang lebih baru)
+ npm atau benang terpasang
+ Vite sebagai alat build React
+ Bereaksi (versi 19.1.1)
+ **Berbagi dasbor** - Dasbor harus dibagikan di Quick Sight dan pelaksana harus masuk untuk mengakses visual atau dasbor yang disematkan.
**Batasan**
+ Pola ini menggunakan metode embedding pengguna terdaftar, yang mengharuskan pelaksana untuk memiliki akun Quick Sight yang aktif.
+ Akses dibatasi pada dasbor dan visual yang secara eksplisit dibagikan dengan pengguna Quick Sight yang diautentikasi yang menerapkan pola ini. Jika pelaksana tidak memiliki hak akses yang benar, pembuatan URL yang disematkan akan gagal dan visual tidak akan dimuat.
+ CloudFormation Tumpukan harus diterapkan di AWS Region tempat Quick Sight, API Gateway, dan Amazon Cognito didukung. Untuk ketersediaan Wilayah, lihat [Layanan AWS berdasarkan Wilayah](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/).
**Versi produk**
+ [Quick Sight Embedding SDK versi 2.10.1](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)
+ [Bereaksi](https://www.npmjs.com/package/react) versi 19.1.1
+ [Node.js](https://nodejs.org/en/download) versi 16 atau yang lebih baru untuk memastikan kompatibilitas dengan versi React dan Vite terbaru yang digunakan dalam solusi ini
## Arsitektur
**Arsitektur target**
Diagram berikut menunjukkan arsitektur dan alur kerja untuk pola ini.
Dalam alur kerja ini:
1. **Pengguna mengakses aplikasi**. Pengguna membuka aplikasi web React dengan menggunakan browser. Permintaan diarahkan ke CloudFront distribusi, yang bertindak sebagai jaringan pengiriman konten untuk aplikasi.
1. **AWS WAF memfilter permintaan berbahaya**. ****Sebelum permintaan mencapai CloudFront, itu lewat AWS WAF. AWS WAF memeriksa lalu lintas dan memblokir permintaan berbahaya atau mencurigakan berdasarkan aturan keamanan.
1. **Amazon S3 menyajikan file statis**. Jika permintaan bersih, CloudFront ambil aset frontend statis (HTML, JS, CSS) dari bucket S3 pribadi dengan menggunakan kontrol akses asal (OAC) dan mengirimkannya ke browser.
1. **Pengguna masuk**. Setelah aplikasi dimuat, pengguna masuk melalui Amazon Cognito, yang mengautentikasi pengguna dan mengembalikan token web JSON (JWT) yang aman untuk akses API resmi.
1. **Aplikasi membuat permintaan API**. Setelah login, aplikasi React membuat panggilan aman ke `/get-embed-url` titik akhir pada API Gateway, dan meneruskan token JWT di header permintaan untuk otentikasi.
1. **Token divalidasi**. API Gateway memvalidasi token dengan menggunakan otorisasi Amazon Cognito. Jika token valid, permintaan dilanjutkan; jika tidak, ditolak dengan respons 401 (tidak sah).
1. **Permintaan diarahkan ke Lambda untuk diproses**. Permintaan yang divalidasi kemudian diteruskan ke fungsi Lambda backend. Fungsi ini bertanggung jawab untuk menghasilkan URL embed untuk visual Quick Sight yang diminta.
1. **Lambda menghasilkan URL embed dari** Quick Sight. IAM menggunakan peran IAM dengan izin yang sesuai untuk memanggil Quick Sight `GenerateEmbedUrlForRegisteredUser` API untuk menghasilkan URL visual yang aman dan tercakup pengguna.
1. **Lambda mengembalikan URL embed ke API Gateway**. Lambda mengirimkan URL embed yang dihasilkan kembali ke API Gateway sebagai bagian dari respons JSON. Respons ini kemudian disiapkan untuk pengiriman ke frontend.
1. **URL embed dikirim ke browser**. URL embed dikembalikan ke browser sebagai respons API.
1. **Visual ditampilkan kepada pengguna**. ****Aplikasi React menerima respons dan menggunakan Quick Sight Embedding SDK untuk merender visual tertentu kepada pengguna.
**Otomatisasi dan skala**
Penerapan backend dan frontend sepenuhnya otomatis dengan menggunakan CloudFormation, yang menyediakan semua sumber daya yang diperlukan, AWS termasuk Amazon Cognito, Lambda, API Gateway, Amazon S3,,, peran IAM CloudFront AWS WAF, dan Amazon dalam satu penerapan. CloudWatch
Otomatisasi ini memastikan infrastruktur yang konsisten dan berulang di semua lingkungan. Semua komponen menskalakan secara otomatis: Lambda menyesuaikan dengan pemanggilan fungsi, CloudFront menyajikan konten yang di-cache secara global, dan skala API Gateway dengan permintaan yang masuk.
## Alat
**Layanan AWS**
+ [Amazon Quick Sight](https://aws.amazon.com/quicksuite/quicksight/) adalah layanan intelijen bisnis cloud-native yang membantu Anda membuat, mengelola, dan menyematkan dasbor dan visual interaktif.
+ [Amazon API Gateway](https://aws.amazon.com/api-gateway/) mengelola APIs yang bertindak sebagai jembatan antara aplikasi React dan layanan backend.
+ [AWS Lambda](https://aws.amazon.com/lambda/)adalah layanan komputasi tanpa server yang digunakan pola ini untuk menghasilkan penyematan Quick Sight yang aman URLs secara dinamis, dan menskalakan secara otomatis berdasarkan permintaan.
+ [Amazon Cognito](https://aws.amazon.com/cognito/) menyediakan otentikasi dan otorisasi bagi pengguna, dan mengeluarkan token aman untuk akses API.
+ [Amazon S3](https://aws.amazon.com/s3/) menghosting aset frontend statis untuk pola ini, dan menyajikannya dengan aman. CloudFront
+ [Amazon CloudFront ](https://aws.amazon.com/cloudfront/getting-started/) menghadirkan konten frontend secara global dengan latensi rendah dan terintegrasi dengan AWS WAF untuk pemfilteran lalu lintas.
+ [AWS WAF](https://aws.amazon.com/waf/)melindungi aplikasi web dari lalu lintas berbahaya dengan menerapkan aturan keamanan dan pembatasan tarif.
+ [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)mengotomatiskan penyediaan dan konfigurasi semua sumber daya aplikasi dalam satu penerapan.
+ [Amazon CloudWatch](https://aws.amazon.com/cloudwatch/) mengumpulkan log dan metrik dari Lambda, API Gateway, dan AWS WAF untuk pemantauan dan pemecahan masalah.
**Alat pengembangan**
+ [React JS](https://react.dev/) adalah kerangka kerja frontend yang digunakan pola ini untuk membangun aplikasi web dan mengintegrasikan visual Quick Sight yang disematkan.
+ [Vite](https://vite.dev/) adalah alat build yang digunakan untuk pengembangan cepat dan pembuatan produksi aplikasi React yang dioptimalkan.
+ [Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk/v/2.10.1) memfasilitasi penyematan visual Quick Sight ke dalam aplikasi React dan memungkinkan interaksi yang mulus antara aplikasi dan visual.
**Repositori kode**
Kode untuk pola ini tersedia di GitHub [Amazon Quick Sight Visual Embedding di repositori React](https://github.com/aws-samples/sample-quicksight-visual-embedding).
## Praktik terbaik
Pola ini secara otomatis menerapkan praktik terbaik keamanan berikut:
+ Menggunakan kumpulan pengguna Amazon Cognito untuk otentikasi berbasis JWT, dengan otentikasi multi-faktor opsional (MFA).
+ Mengamankan APIs dengan otorisasi Amazon Cognito dan memberlakukan kebijakan IAM dengan hak istimewa terkecil di semua layanan.
+ Menerapkan penyematan pengguna terdaftar Quick Sight dan penyediaan otomatis pengguna dengan peran pembaca.
+ Menerapkan enkripsi dalam perjalanan yang mendukung TLS 1.2 dan versi yang lebih baru melalui CloudFront dan HTTPS.
+ Mengenkripsi data saat istirahat dengan menggunakan AES-256 untuk Amazon S3 dengan versi dan OAC.
+ Mengonfigurasi paket penggunaan API Gateway dengan throttling dan kuota.
+ Mengamankan Lambda dengan konkurensi cadangan dan perlindungan variabel lingkungan.
+ Mengaktifkan pencatatan untuk Amazon S3,, CloudFront Lambda, dan API Gateway; memantau layanan dengan menggunakan. CloudWatch
+ Mengenkripsi log, menerapkan kontrol akses, dan memberlakukan kebijakan penolakan untuk unggahan non-HTTPS atau tidak terenkripsi.
Selain itu, kami merekomendasikan yang berikut:
+ Gunakan CloudFormation untuk mengotomatiskan penerapan dan mempertahankan konfigurasi yang konsisten di seluruh lingkungan.
+ Pastikan setiap pengguna memiliki izin Quick Sight yang benar untuk mengakses visual yang disematkan.
+ Lindungi titik akhir API Gateway dengan otorisasi Amazon Cognito dan terapkan prinsip hak istimewa paling sedikit untuk semua peran IAM.
+ Simpan informasi sensitif seperti Amazon Resource Names (ARNs) dan IDs dalam variabel lingkungan alih-alih melakukan hardcoding.
+ Optimalkan fungsi Lambda dengan mengurangi dependensi dan meningkatkan kinerja cold-start. Untuk informasi lebih lanjut, lihat posting AWS blog [Mengoptimalkan kinerja start dingin AWS Lambda menggunakan strategi priming lanjutan](https://aws.amazon.com/blogs/compute/optimizing-cold-start-performance-of-aws-lambda-using-advanced-priming-strategies-with-snapstart/) dengan. SnapStart
+ Tambahkan CloudFront domain Anda ke daftar izin Quick Sight untuk mengaktifkan penyematan visual yang aman.
+ Pantau kinerja dan keamanan dengan menggunakan CloudWatch dan AWS WAF untuk pencatatan, peringatan, dan perlindungan lalu lintas.
**Praktik terbaik lainnya yang direkomendasikan**
+ Gunakan domain khusus dengan sertifikat SSL AWS Certificate Manager untuk memberikan pengalaman pengguna yang aman dan bermerek.
+ Enkripsi data CloudWatch dan log Amazon S3 dengan menggunakan kunci AWS Key Management Service terkelola pelanggan AWS KMS() untuk kontrol yang lebih besar atas enkripsi.
+ Perluas AWS WAF aturan dengan pemblokiran geografis, injeksi SQL (SQLi), perlindungan skrip lintas situs (XSS), dan filter khusus untuk pencegahan ancaman yang ditingkatkan.
+ Aktifkan CloudWatch alarm, AWS Config, dan AWS CloudTrail untuk pemantauan waktu nyata, audit, dan kepatuhan konfigurasi.
+ Terapkan kebijakan IAM terperinci, terapkan rotasi kunci API, dan izinkan akses lintas akun hanya jika benar-benar diperlukan.
+ Lakukan penilaian keamanan rutin untuk memastikan keselarasan dengan kerangka kepatuhan seperti Kontrol Sistem dan Organisasi 2 (SOC 2), Peraturan Perlindungan Data Umum (GDPR), dan Undang-Undang Portabilitas dan Akuntabilitas Asuransi Kesehatan (HIPAA).
## Epik
### Siapkan lingkungan
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Kloning repositori. | Kloning GitHub repositori untuk solusi ini ke sistem lokal Anda dan arahkan ke direktori proyek:git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git
cd sample-quicksight-visual-embedding
Repositori ini berisi CloudFormation template dan kode sumber React yang diperlukan untuk menyebarkan solusi. | Pengembang aplikasi |
### Menyebarkan tumpukan CloudFormation
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Menyebarkan template. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) Untuk informasi selengkapnya, lihat [Membuat dan mengelola tumpukan](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/stacks.html) dalam CloudFormation dokumentasi. | Administrator AWS |
| Pantau pembuatan tumpukan. | Pantau tumpukan di tab **Peristiwa** hingga statusnya **CREATE\_COMPLETE**. | Administrator AWS |
| Ambil output tumpukan. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Administrator AWS |
### Konfigurasikan lingkungan frontend
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Ambil pengidentifikasi visual Quick Sight. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Administrator Penglihatan Cepat |
| Konfigurasikan lingkungan React lokal Anda. | Untuk menyiapkan lingkungan React lokal Anda dan menautkannya ke AWS sumber daya, buat `.env` file di `my-app/` folder GitHub repositori lokal Anda. Isi file dengan:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Berikut adalah contoh `.env` file:VITE_AWS_REGION=us-east-1
# Cognito Configuration (from CloudFormation outputs)
VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
# API Configuration (from CloudFormation outputs)
VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod
# QuickSight Visual Configuration
VITE_DASHBOARD_ID=your-dashboard-id
VITE_SHEET_ID=your-sheet-id
VITE_VISUAL_ID=your-visual-id
| Pengembang aplikasi |
### Mengatur otentikasi pengguna
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Buat atau Kelola Pengguna di Cognito | Untuk mengaktifkan akses pengguna yang diautentikasi ke visual Quick Sight yang disematkan, Anda terlebih dahulu membuat pengguna di Amazon Cognito:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Administrator AWS |
| Menyediakan akses dasbor Quick Sight | Untuk menyediakan akses ke visual Quick Sight, berikan akses izin Viewer ke pengguna yang diautentikasi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Setiap pengguna akan menerima email dengan tautan ke dasbor. Anda dapat mengubah izin kapan saja melalui menu **Bagikan**.
Untuk informasi selengkapnya, lihat [Memberikan akses kepada pengguna dan grup Amazon Quick Sight individual ke dasbor di Amazon Quick Sight](https://docs.aws.amazon.com/quicksuite/latest/userguide/share-a-dashboard-grant-access-users.html) di dokumentasi Amazon Quick. | Administrator Penglihatan Cepat |
### Membangun dan menerapkan frontend React
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Instal dependensi dan bangun proyek. | Di direktori aplikasi React, jalankan perintah berikut untuk menghasilkan file produksi yang dioptimalkan:cd my-app
npm install
npm run build
| Pengembang aplikasi |
| Unggah file build ke Amazon S3. | Unggah semua file dari `my-app/dist/` direktori ke bucket S3 yang disediakan oleh CloudFormation (jangan unggah folder itu sendiri). | Pengembang aplikasi |
| Buat CloudFront pembatalan. | Di [CloudFront konsol](https://console.aws.amazon.com/cloudfront/v4/home), buat pembatalan jalur `/*` untuk menyegarkan konten yang di-cache setelah penerapan. Untuk petunjuk, lihat [Membatalkan file](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation_Requests.html) dalam dokumentasi. CloudFront | Administrator AWS |
### Konfigurasikan daftar yang diizinkan Quick Sight
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Tambahkan CloudFront domain ke daftar yang diizinkan Quick Sight. | Untuk mengaktifkan CloudFront domain Anda menyematkan visual Quick Sight dengan aman:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Administrator Penglihatan Cepat |
### Akses aplikasi dan verifikasi fungsionalitas
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Buka aplikasi React. | Gunakan **CloudFront domain** (dari CloudFormation output) untuk membuka aplikasi web React yang digunakan di browser. | Pemilik aplikasi |
| Verifikasi otentikasi. | Masuk ke aplikasi menggunakan kredenal Amazon Cognito untuk memverifikasi alur otentikasi dan validasi JWT melalui API Gateway. | Pemilik aplikasi |
| Verifikasi visual yang disematkan. | Konfirmasikan bahwa visual Quick Sight dimuat dengan benar di dalam aplikasi berdasarkan izin akses khusus pengguna. | Pemilik aplikasi |
| Validasi konektivitas API dan Lambda. | Konfirmasikan bahwa aplikasi dapat berhasil memanggil `/get-embed-url` API dan mengambil sematan Quick Sight yang valid URLs tanpa kesalahan. | Pemilik aplikasi |
### Memantau dan memelihara aplikasi
| Tugas | Deskripsi | Keterampilan yang dibutuhkan |
| --- | --- | --- |
| Monitor dengan menggunakan CloudWatch. | Anda dapat menggunakan alat AWS observabilitas untuk memantau aplikasi dan untuk mempertahankan kinerja yang aman dan terukur dalam produksi.
Tinjau log Lambda, metrik API Gateway, dan peristiwa autentikasi Amazon Cognito CloudWatch untuk memastikan kesehatan aplikasi dan mendeteksi anomali. | Administrator AWS |
| Lacak AWS WAF dan CloudFront log. | Periksa AWS WAF log untuk permintaan yang diblokir atau mencurigakan dan log CloudFront akses untuk metrik kinerja dan caching. | Administrator AWS |
## Pemecahan masalah
| Isu | Solusi |
| --- | --- |
| Kesalahan “Domain tidak diizinkan” | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) |
| Kesalahan autentikasi | Kemungkinan penyebab:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Solusi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) |
| Kesalahan API Gateway | Kemungkinan penyebab:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Solusi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) |
| Visual Quick Sight tidak dimuat | Kemungkinan penyebab:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Solusi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) |
| Kesalahan “Pengguna tidak memiliki akses” | Kemungkinan penyebab:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)
Solusi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) |
## Sumber daya terkait
** AWS dokumentasi**
+ [Mendaftar untuk berlangganan Amazon Quick](https://docs.aws.amazon.com/quicksight/latest/user/signing-up.html)
+ [Analitik tertanam untuk Amazon Quick Sight](https://docs.aws.amazon.com/quicksuite/latest/userguide/embedded-analytics.html)
+ [Referensi API Quick Sight - GenerateEmbedUrlForRegisteredUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html)
+ [Kumpulan pengguna Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
+ [AWS Lambda Panduan Pengembang](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)
+ [Panduan Pengembang Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html)
+ [Pemantauan dasar dan pemantauan terperinci di CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/cloudwatch-metrics-basic-detailed.html)
+ [AWS CloudFormation Panduan Pengguna](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)
+ [Panduan CloudFront Pengembang Amazon](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)
+ [AWS WAF Panduan Pengembang](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html)
**Tutorial dan video**
+ [Analitik tertanam untuk Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics.html)
+ [ YouTube Tutorial Penglihatan Cepat Amazon](https://www.youtube.com/results?search_query=amazon+quicksight+embedding)