Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Menyematkan dasbor Amazon Quick Sight untuk pengguna anonim (tidak terdaftar)
<a name="embedded-analytics-dashboards-for-everyone"></a>

**penting**  
Amazon Quick Sight memiliki operasi API baru untuk menyematkan analitik: `GenerateEmbedUrlForAnonymousUser` dan`GenerateEmbedUrlForRegisteredUser`.  
Anda masih dapat menggunakan operasi `GetSessionEmbedUrl` API `GetDashboardEmbedUrl` dan untuk menyematkan dasbor dan konsol Amazon Quick Sight, tetapi tidak berisi kemampuan penyematan terbaru. Untuk informasi selengkapnya tentang penyematan menggunakan operasi API lama, lihat [Menyematkan analitik menggunakan operasi GetDashboardEmbedURL dan GetSessionEmbedURL API](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-deprecated.html).


|  | 
| --- |
|  Berlaku untuk: Enterprise Edition  | 


|  | 
| --- |
|    Pemirsa yang dituju: Pengembang Amazon Quick  | 

Di bagian berikut, Anda dapat menemukan informasi terperinci tentang cara mengatur dasbor Amazon Quick Sight yang disematkan untuk pengguna anonim (tidak terdaftar).

**Topics**
+ [Langkah 1: Siapkan izin](#embedded-analytics-dashboards-with-anonymous-users-step-1)
+ [Langkah 2: Hasilkan URL dengan kode otentikasi terlampir](#embedded-analytics-dashboards-with-anonymous-users-step-2)
+ [Langkah 3: Sematkan URL dasbor](#embedded-analytics-dashboards-with-anonymous-users-step-3)

## Langkah 1: Siapkan izin
<a name="embedded-analytics-dashboards-with-anonymous-users-step-1"></a>


|  | 
| --- |
|  Berlaku untuk: Enterprise Edition  | 


|  | 
| --- |
|    Pemirsa yang dituju: Pengembang Amazon Quick  | 

Di bagian berikut, Anda dapat mengetahui cara mengatur izin untuk aplikasi backend atau server web. Tugas ini membutuhkan akses administratif ke IAM.

Setiap pengguna yang mengakses dasbor mengambil peran yang memberi mereka akses dan izin Amazon Quick Sight ke dasbor. Untuk memungkinkan ini, buat peran IAM di Anda Akun AWS. Kaitkan kebijakan IAM dengan peran untuk memberikan izin kepada pengguna mana pun yang mengasumsikannya.

Anda dapat membuat kondisi dalam kebijakan IAM yang membatasi domain yang dapat dicantumkan developer dalam `AllowedDomains` parameter operasi `GenerateEmbedUrlForAnonymousUser` API. `AllowedDomains`Parameter adalah parameter opsional. Ini memberi Anda sebagai pengembang opsi untuk mengganti domain statis yang dikonfigurasi di menu Kelola Penglihatan **Cepat Amazon**. Sebagai gantinya, Anda dapat mencantumkan hingga tiga domain atau subdomain yang dapat mengakses URL yang dihasilkan. URL ini kemudian disematkan di situs web yang Anda buat. Hanya domain yang tercantum dalam parameter yang dapat mengakses dasbor yang disematkan. Tanpa kondisi ini, Anda dapat membuat daftar domain apa pun di internet dalam `AllowedDomains` parameter. 

Untuk membatasi domain yang dapat digunakan pengembang dengan parameter ini, tambahkan `AllowedEmbeddingDomains` kondisi ke kebijakan IAM Anda. Untuk informasi selengkapnya tentang `AllowedDomains` parameter, lihat [GenerateEmbedUrlForAnonymousUser](https://docs.aws.amazon.com//quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html)di *Referensi API Amazon Quick Sight*.

**Praktik terbaik keamanan untuk operator kondisi IAM**  
Operator kondisi IAM yang tidak dikonfigurasi dengan benar dapat mengizinkan akses tidak sah ke sumber daya Cepat yang disematkan Anda melalui variasi URL. Saat menggunakan kunci `quicksight:AllowedEmbeddingDomains` kondisi dalam kebijakan IAM Anda, gunakan operator kondisi yang mengizinkan domain tertentu atau menolak semua domain yang tidak diizinkan secara khusus. Untuk informasi selengkapnya tentang operator kondisi IAM, lihat [elemen kebijakan IAM JSON: Operator kondisi di Panduan](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements_condition_operators.html) Pengguna IAM.  
Banyak variasi URL yang berbeda dapat menunjuk ke sumber daya yang sama. Misalnya, semua URL berikut diselesaikan ke konten yang sama:  
`https://example.com`
`https://example.com/`
`https://Example.com`
Jika kebijakan Anda menggunakan operator yang tidak memperhitungkan variasi URL ini, penyerang dapat melewati batasan Anda dengan memberikan variasi URL yang setara.  
Anda harus memvalidasi bahwa kebijakan IAM Anda menggunakan operator kondisi yang sesuai untuk mencegah kerentanan bypass dan memastikan bahwa hanya domain yang Anda inginkan yang dapat mengakses sumber daya yang disematkan.

Kebijakan contoh berikut memberikan izin ini untuk digunakan dengan`GenerateEmbedUrlForAnonymousUser`. Agar pendekatan ini berhasil, Anda juga memerlukan paket sesi, atau harga kapasitas sesi, untuk Anda Akun AWS. Jika tidak, ketika pengguna mencoba mengakses dasbor, kesalahan `UnsupportedPricingPlanException` dikembalikan. 

Identitas IAM aplikasi Anda harus memiliki kebijakan kepercayaan yang terkait dengannya untuk memungkinkan akses ke peran yang baru saja Anda buat. Ini berarti bahwa ketika pengguna mengakses aplikasi Anda, aplikasi Anda dapat mengambil peran atas nama pengguna untuk membuka dasbor. Contoh berikut menunjukkan contoh kebijakan kepercayaan.

------
#### [ JSON ]

****  

```
{
"Version":"2012-10-17",		 	 	 
"Statement": [
    {
        "Sid": "AllowLambdaFunctionsToAssumeThisRole",
        "Effect": "Allow",
        "Principal": {
            "Service": "lambda.amazonaws.com"
        },
        "Action": "sts:AssumeRole"
    },
    {
        "Sid": "AllowEC2InstancesToAssumeThisRole",
        "Effect": "Allow",
        "Principal": {
            "Service": "ec2.amazonaws.com"
        },
        "Action": "sts:AssumeRole"
    }
]
}
```

------

Untuk informasi selengkapnya mengenai kebijakan kepercayaan, lihat [Kredensil keamanan sementara di IAM di Panduan](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) Pengguna *IAM*.

## Langkah 2: Hasilkan URL dengan kode otentikasi terlampir
<a name="embedded-analytics-dashboards-with-anonymous-users-step-2"></a>


|  | 
| --- |
|  Berlaku untuk: Enterprise Edition  | 


|  | 
| --- |
|    Pemirsa yang dituju: Pengembang Amazon Quick  | 

Di bagian berikut, Anda dapat menemukan cara mengautentikasi atas nama pengunjung anonim dan mendapatkan URL dasbor yang dapat disematkan di server aplikasi Anda. 

Saat pengguna mengakses aplikasi Anda, aplikasi akan mengambil peran IAM atas nama pengguna. Kemudian menambahkan pengguna ke Amazon Quick Sight, jika pengguna itu belum ada. Selanjutnya, ia melewati pengenal sebagai ID sesi peran unik. 

Contoh berikut melakukan otentikasi IAM atas nama pengguna. Ini melewati pengenal sebagai ID sesi peran unik. Kode ini berjalan di server aplikasi Anda.

### Java
<a name="embedded-analytics-dashboards-with-anonymous-users-java"></a>

```
import java.util.List;
    import com.amazonaws.auth.AWSCredentials;
    import com.amazonaws.auth.AWSCredentialsProvider;
    import com.amazonaws.auth.BasicAWSCredentials;
    import com.amazonaws.regions.Regions;
    import com.amazonaws.services.quicksight.AmazonQuickSight;
    import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
    import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration;
    import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
    import com.amazonaws.services.quicksight.model.SessionTag;


    /**
    * Class to call QuickSight AWS SDK to generate embed url for anonymous user.
    */
    public class GenerateEmbedUrlForAnonymousUserExample {

        private final AmazonQuickSight quickSightClient;

        public GenerateEmbedUrlForAnonymousUserExample() {
            quickSightClient = AmazonQuickSightClientBuilder
                .standard()
                .withRegion(Regions.US_EAST_1.getName())
                .withCredentials(new AWSCredentialsProvider() {
                        @Override
                        public AWSCredentials getCredentials() {
                            // provide actual IAM access key and secret key here
                            return new BasicAWSCredentials("access-key", "secret-key");
                        }

                        @Override
                        public void refresh() {
                        }
                    }
                )
                .build();
        }

        public String GenerateEmbedUrlForAnonymousUser(
            final String accountId, // YOUR AWS ACCOUNT ID
            final String initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS.
            final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL
            final List<String> authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
            final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
            final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY
        ) throws Exception {
            AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration();
            AnonymousUserDashboardEmbeddingConfiguration dashboardConfiguration = new AnonymousUserDashboardEmbeddingConfiguration();
            dashboardConfiguration.setInitialDashboardId(initialDashboardId);
            experienceConfiguration.setDashboard(dashboardConfiguration);

            GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest()
                .withAwsAccountId(accountId)
                .withNamespace(namespace)
                .withAuthorizedResourceArns(authorizedResourceArns)
                .withExperienceConfiguration(experienceConfiguration)
                .withSessionTags(sessionTags)
                .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600
                .withAllowedDomains(allowedDomains);

            GenerateEmbedUrlForAnonymousUserResult dashboardEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);

            return dashboardEmbedUrl.getEmbedUrl();
        }

    }
```

### JavaScript
<a name="embedded-analytics-dashboards-with-anonymous-users-js"></a>

```
global.fetch = require('node-fetch');
const AWS = require('aws-sdk');

function generateEmbedUrlForAnonymousUser(
accountId, // YOUR AWS ACCOUNT ID
initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY
generateEmbedUrlForAnonymousUserCallback, // GENERATEEMBEDURLFORANONYMOUSUSER SUCCESS CALLBACK METHOD
errorCallback // GENERATEEMBEDURLFORANONYMOUSUSER ERROR CALLBACK METHOD
) {
const experienceConfiguration = {
    "DashboardVisual": {
        "InitialDashboardVisualId": {
            "DashboardId": "dashboard_id",
            "SheetId": "sheet_id",
            "VisualId": "visual_id"
        }
    }
};

const generateEmbedUrlForAnonymousUserParams = {
    "AwsAccountId": accountId,
    "Namespace": quicksightNamespace,
    "AuthorizedResourceArns": authorizedResourceArns,
    "AllowedDomains": allowedDomains,
    "ExperienceConfiguration": experienceConfiguration,
    "SessionTags": sessionTags,
    "SessionLifetimeInMinutes": 600
};

const quicksightClient = new AWS.QuickSight({
    region: process.env.AWS_REGION,
    credentials: {
        accessKeyId: AccessKeyId,
        secretAccessKey: SecretAccessKey,
        sessionToken: SessionToken,
        expiration: Expiration
    }
});

quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) {
    if (err) {
        console.log(err, err.stack);
        errorCallback(err);
    } else {
        const result = {
            "statusCode": 200,
            "headers": {
                "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API
                "Access-Control-Allow-Headers": "Content-Type"
            },
            "body": JSON.stringify(data),
            "isBase64Encoded": false
        }
        generateEmbedUrlForAnonymousUserCallback(result);
    }
});
}
```

### Python3
<a name="embedded-analytics-dashboards-with-anonymous-users-py"></a>

```
import json
import boto3
from botocore.exceptions import ClientError
import time

# Create QuickSight and STS clients
quicksightClient = boto3.client('quicksight',region_name='us-west-2')
sts = boto3.client('sts')

# Function to generate embedded URL for anonymous user
# accountId: YOUR AWS ACCOUNT ID
# quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
# authorizedResourceArns: DASHBOARD ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# dashboardId: DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, dashboardId, sessionTags):
try:
    response = quicksightClient.generate_embed_url_for_anonymous_user(
        AwsAccountId = accountId,
        Namespace = quicksightNamespace,
        AuthorizedResourceArns = authorizedResourceArns,
        AllowedDomains = allowedDomains,
            ExperienceConfiguration = {
                "Dashboard": {
                    "InitialDashboardId": dashboardId
                }
            },
        SessionTags = sessionTags,
        SessionLifetimeInMinutes = 600
    )
        
    return {
        'statusCode': 200,
        'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
        'body': json.dumps(response),
        'isBase64Encoded':  bool('false')
    }
except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)
```

### Node.js
<a name="embedded-analytics-dashboards-with-anonymous-users-node"></a>

Contoh berikut menunjukkan JavaScript (Node.js) yang dapat Anda gunakan di server aplikasi untuk membuat URL dasbor yang disematkan. Anda dapat menggunakan URL ini di situs web atau aplikasi Anda untuk menampilkan dasbor. 

**Example**  

```
const AWS = require('aws-sdk');
    const https = require('https');

    var quicksightClient = new AWS.Service({
        apiConfig: require('./quicksight-2018-04-01.min.json'),
        region: 'us-east-1',
    });

    quicksightClient.generateEmbedUrlForAnonymousUser({
        'AwsAccountId': '111122223333',
        'Namespace' : 'default',
        'AuthorizedResourceArns': authorizedResourceArns,
        'AllowedDomains': allowedDomains,
        'ExperienceConfiguration': experienceConfiguration,
        'SessionTags': sessionTags,
        'SessionLifetimeInMinutes': 600

    }, function(err, data) {
        console.log('Errors: ');
        console.log(err);
        console.log('Response: ');
        console.log(data);
    });
```

**Example**  

```
//The URL returned is over 900 characters. For this example, we've shortened the string for
    //readability and added ellipsis to indicate that it's incomplete.
        { 
            Status: 200,
            EmbedUrl: 'https://{{quicksightdomain}}/embed/12345/dashboards/67890..',
            RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' 
        }
```

### .NET/C\#
<a name="embedded-analytics-dashboards-with-anonymous-users-cs"></a>

Contoh berikut menunjukkan. NET/C\# kode yang dapat Anda gunakan di server aplikasi untuk menghasilkan URL untuk dasbor tertanam. Anda dapat menggunakan URL ini di situs web atau aplikasi Anda untuk menampilkan dasbor. 

**Example**  

```
using System;
    using Amazon.QuickSight;
    using Amazon.QuickSight.Model;

    var quicksightClient = new AmazonQuickSightClient(
        AccessKey,
        SecretAccessKey,
        sessionToken,
        Amazon.RegionEndpoint.USEast1);
        
    try
    {
        Console.WriteLine(
            quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
            {
                AwsAccountId = "111122223333",
                Namespace = default,
                AuthorizedResourceArns = authorizedResourceArns,
                AllowedDomains = allowedDomains,
                ExperienceConfiguration = experienceConfiguration,
                SessionTags = sessionTags,
                SessionLifetimeInMinutes = 600,
            }).Result.EmbedUrl
        );
    } catch (Exception ex) {
        Console.WriteLine(ex.Message);
    }
```

### AWS CLI
<a name="embedded-analytics-dashboards-with-anonymous-users-cli"></a>

Untuk mengambil peran, pilih salah satu operasi API AWS Security Token Service (AWS STS) berikut:
+ [AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html)— Gunakan operasi ini ketika Anda menggunakan identitas IAM untuk mengambil peran.
+ [AssumeRoleWithWebIdentity](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html)— Gunakan operasi ini saat Anda menggunakan penyedia identitas web untuk mengautentikasi pengguna Anda. 
+ [AssumeRoleWithSaml](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithSAML.html)— Gunakan operasi ini saat Anda menggunakan Security Assertion Markup Language (SALL) untuk mengautentikasi pengguna Anda.

Contoh berikut menunjukkan perintah CLI untuk mengatur peran IAM. Peran harus mengaktifkan izin untuk`quicksight:GenerateEmbedUrlForAnonymousUser`. 

```
aws sts assume-role \
    --role-arn "{{arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy}}" \
    --role-session-name {{anonymous caller}}
```

`assume-role`Operasi mengembalikan tiga parameter output: kunci akses, kunci rahasia, dan token sesi. 

**catatan**  
Jika Anda mendapatkan `ExpiredToken` kesalahan saat memanggil `AssumeRole` operasi, ini mungkin karena sebelumnya `SESSION TOKEN` masih dalam variabel lingkungan. Hapus ini dengan mengatur variabel berikut:  
*AWS\_ACCESS\_KEY\_ID* 
*AWS\_SECRET\_ACCESS\_KEY* 
*AWS\_SESSION\_TOKEN* 

Contoh berikut menunjukkan cara mengatur ketiga parameter ini di CLI. Jika Anda menggunakan mesin Microsoft Windows, gunakan `set` sebagai gantinya`export`.

```
export AWS_ACCESS_KEY_ID     = "{{access_key_from_assume_role}}"
    export AWS_SECRET_ACCESS_KEY = "{{secret_key_from_assume_role}}"
    export AWS_SESSION_TOKEN     = "{{session_token_from_assume_role}}"
```

Menjalankan perintah ini akan menetapkan ID sesi peran pengguna yang mengunjungi situs web Anda`embedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy`. ID sesi peran terdiri dari nama peran dari `role-arn` dan `role-session-name` nilainya. Menggunakan ID sesi peran unik untuk setiap pengguna memastikan bahwa izin yang sesuai ditetapkan untuk setiap pengguna yang berkunjung. Itu juga membuat setiap sesi terpisah dan berbeda. Jika Anda menggunakan array server web, misalnya untuk load balancing, dan sesi terhubung kembali ke server yang berbeda, sesi baru dimulai.

Untuk mendapatkan URL yang ditandatangani untuk dasbor, panggil `generate-embed-url-for-anynymous-user` dari server aplikasi. Ini mengembalikan URL dasbor yang dapat disematkan. Contoh berikut menunjukkan cara membuat URL untuk dasbor tertanam menggunakan panggilan sisi server untuk pengguna yang melakukan kunjungan anonim ke portal web atau aplikasi Anda.

```
aws quicksight generate-embed-url-for-anonymous-user \
--aws-account-id {{111122223333}} \
--namespace {{default-or-something-else}} \
--session-lifetime-in-minutes 15 \
--authorized-resource-arns '["{{dashboard-arn-1}}","{{dashboard-arn-2}}"]' \
--allowed-domains '["{{domain1}}","{{domain2}}"]' \
--session-tags '["Key": {{tag-key-1}},"Value": {{tag-value-1}},{"Key": {{tag-key-1}},"Value": {{tag-value-1}}}]' \
--experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId={{dashboard_id}},SheetId={{sheet_id}},VisualId={{visual_id}}}}'
```

Untuk informasi lebih lanjut tentang penggunaan operasi ini, lihat [https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html). Anda dapat menggunakan ini dan operasi API lainnya dalam kode Anda sendiri. 

## Langkah 3: Sematkan URL dasbor
<a name="embedded-analytics-dashboards-with-anonymous-users-step-3"></a>


|  | 
| --- |
|  Berlaku untuk: Enterprise Edition  | 


|  | 
| --- |
|    Pemirsa yang dituju: Pengembang Amazon Quick  | 

Di bagian berikut, Anda dapat mengetahui bagaimana Anda dapat menggunakan [Amazon Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) untuk menyematkan URL dasbor dari langkah 2 di situs web atau halaman aplikasi Anda. Dengan SDK, Anda dapat melakukan hal berikut: 
+ Tempatkan dasbor pada halaman HTML.
+ Masukkan parameter ke dasbor.
+ Menangani status kesalahan dengan pesan yang disesuaikan dengan aplikasi Anda.

Panggil operasi `GenerateEmbedUrlForAnynymousUser` API untuk menghasilkan URL yang dapat disematkan di aplikasi. URL ini berlaku selama 5 menit, dan sesi yang dihasilkan berlaku selama 10 jam. Operasi API menyediakan URL dengan sebuah `auth_code` yang memungkinkan sesi masuk tunggal. 

Berikut ini menunjukkan contoh respons dari`generate-embed-url-for-anynymous-user`.

```
//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
        {
            "Status": "200",
            "EmbedUrl": "https://{{quicksightdomain}}/embed/12345/dashboards/67890..",
            "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
        }
```

Sematkan dasbor ini di halaman web Anda dengan menggunakan [Amazon Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) atau dengan menambahkan URL ini ke dalam iframe. Jika Anda menetapkan nomor tinggi dan lebar tetap (dalam piksel), Amazon Quick Sight menggunakannya dan tidak mengubah visual Anda saat jendela Anda berubah ukuran. Jika Anda menetapkan tinggi dan lebar persen relatif, Amazon Quick Sight menyediakan tata letak responsif yang dimodifikasi saat ukuran jendela Anda berubah. Dengan menggunakan Amazon Quick Sight Embedding SDK, Anda juga dapat mengontrol parameter dalam dasbor dan menerima panggilan balik dalam hal penyelesaian dan kesalahan pemuatan halaman. 

Domain yang akan menjadi tuan rumah dasbor tertanam harus ada di *daftar izinkan*, daftar domain yang disetujui untuk langganan Anda Quick . Persyaratan ini melindungi data Anda dengan menjaga domain yang tidak disetujui dari hosting dasbor tertanam. Untuk informasi selengkapnya tentang menambahkan domain untuk dasbor yang disematkan, lihat [Mengizinkan domain daftar saat runtime dengan Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/user/embedding-run-time.html) API.

Contoh berikut menunjukkan cara menggunakan URL yang dihasilkan. Kode ini berada di server aplikasi Anda.

### SDK 2.0
<a name="embedded-analytics-dashboards-with-anonymous-users-sdkv2"></a>

```
<!DOCTYPE html>
<html>

<head>
    <title>Dashboard Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedDashboard = async() => {
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: '<YOUR_EMBED_URL>',
                container: '#experience-container',
                height: "700px",
                width: "1000px",
                onChange: (changeEvent, metadata) => {
                    switch (changeEvent.eventName) {
                        case 'FRAME_MOUNTED': {
                            console.log("Do something when the experience frame is mounted.");
                            break;
                        }
                        case 'FRAME_LOADED': {
                            console.log("Do something when the experience frame is loaded.");
                            break;
                        }
                    }
                },
            };

            const contentOptions = {
                parameters: [
                    {
                        Name: 'country',
                        Values: [
                            'United States'
                        ],
                    },
                    {
                        Name: 'states',
                        Values: [
                            'California',
                            'Washington'
                        ]
                    }
                ],
                locale: "en-US",
                sheetOptions: {
                    initialSheetId: '<YOUR_SHEETID>',
                    singleSheet: false,                        
                    emitSizeChangedEventOnSheetChange: false,
                },
                toolbarOptions: {
                    export: false,
                    undoRedo: false,
                    reset: false
                },
                attributionOptions: {
                    overlayContent: false,
                },
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'CONTENT_LOADED': {
                            console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode);
                            break;
                        }
                        case 'PARAMETERS_CHANGED': {
                            console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
                            break;
                        }
                        case 'SELECTED_SHEET_CHANGED': {
                            console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet);
                            break;
                        }
                        case 'SIZE_CHANGED': {
                            console.log("Size changed. New dimensions:", messageEvent.message);
                            break;
                        }
                        case 'MODAL_OPENED': {
                            window.scrollTo({
                                top: 0 // iframe top position
                            });
                            break;
                        }
                    }
                },
            };
            const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);

            const selectCountryElement = document.getElementById('country');
            selectCountryElement.addEventListener('change', (event) => {
                embeddedDashboardExperience.setParameters([
                    {
                        Name: 'country',
                        Values: event.target.value
                    }
                ]);
            });
        };
    </script>
</head>

<body onload="embedDashboard()">
    <span>
        <label for="country">Country</label>
        <select id="country" name="country">
            <option value="United States">United States</option>
            <option value="Mexico">Mexico</option>
            <option value="Canada">Canada</option>
        </select>
    </span>
    <div id="experience-container"></div>
</body>

</html>
```

### SDK 1.0
<a name="embedded-analytics-dashboards-with-anonymous-users-sdkv1"></a>

```
<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        var dashboard
        function onDashboardLoad(payload) {
            console.log("Do something when the dashboard is fully loaded.");
        }

        function onError(payload) {
            console.log("Do something when the dashboard fails loading");
        }

        function embedDashboard() {
            var containerDiv = document.getElementById("embeddingContainer");
            var options = {
                // replace this dummy url with the one generated via embedding API
                url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",
                container: containerDiv,
                parameters: {
                    country: "United States"
                },
                scrolling: "no",
                height: "700px",
                width: "1000px",
                locale: "en-US",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
            dashboard.on("error", onError);
            dashboard.on("load", onDashboardLoad);
        }

        function onCountryChange(obj) {
            dashboard.setParameters({country: obj.value});
        }
    </script>
</head>

<body onload="embedDashboard()">
    <span>
        <label for="country">Country</label>
        <select id="country" name="country" onchange="onCountryChange(this)">
            <option value="United States">United States</option>
            <option value="Mexico">Mexico</option>
            <option value="Canada">Canada</option>
        </select>
    </span>
    <div id="embeddingContainer"></div>
</body>

</html>
```

Agar contoh ini berfungsi, pastikan untuk menggunakan Amazon Quick Sight Embedding SDK untuk memuat dasbor yang disematkan di situs web Anda menggunakan. JavaScript Untuk mendapatkan salinan Anda, lakukan salah satu hal berikut:
+ Unduh [Amazon Quick Sight Embedding SDK](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) dari. GitHub Repositori ini dikelola oleh sekelompok pengembang Amazon Quick Sight.
+ Unduh versi Amazon Quick Sight Embedding SDK terbaru dari. [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)
+ Jika Anda menggunakan `npm` untuk JavaScript dependensi, unduh dan instal dengan menjalankan perintah berikut.

  ```
  npm install amazon-quicksight-embedding-sdk
  ```