翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 匿名 (未登録) ユーザー向けの Amazon Quick Sight ダッシュボードの埋め込み
<a name="embedded-analytics-dashboards-for-everyone"></a>

**重要**  
Amazon Quick Sight には、分析を埋め込むための新しい API オペレーション `GenerateEmbedUrlForAnonymousUser`と があります`GenerateEmbedUrlForRegisteredUser`。  
`GetDashboardEmbedUrl` および `GetSessionEmbedUrl` API オペレーションを使用してダッシュボードと Amazon Quick Sight コンソールを埋め込むことはできますが、最新の埋め込み機能は含まれていません。古い API オペレーションを使用した埋め込みの詳細については、「 [GetDashboardEmbedURLおよび GetSessionEmbedURL API オペレーションを使用した分析の埋め込み](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-deprecated.html)」を参照してください。


|  | 
| --- |
|  適用対象: Enterprise Edition  | 


|  | 
| --- |
|    対象者:  Amazon Quick デベロッパー  | 

以下のセクションでは、匿名 (未登録) ユーザーの埋め込み Amazon Quick Sight ダッシュボードを設定する方法について詳しく説明します。

**Topics**
+ [ステップ 1: 許可をセットアップする](#embedded-analytics-dashboards-with-anonymous-users-step-1)
+ [ステップ 2: 認証コードがアタッチされた URL を生成する](#embedded-analytics-dashboards-with-anonymous-users-step-2)
+ [ステップ 3: ダッシュボード URL を埋め込む](#embedded-analytics-dashboards-with-anonymous-users-step-3)

## ステップ 1: 許可をセットアップする
<a name="embedded-analytics-dashboards-with-anonymous-users-step-1"></a>


|  | 
| --- |
|  適用対象: Enterprise Edition  | 


|  | 
| --- |
|    対象者:  Amazon Quick デベロッパー  | 

次のセクションでは、バックエンドアプリケーションまたはウェブサーバーのアクセス許可を設定する方法について説明します。このタスクには IAM への管理者アクセス権が必要です。

ダッシュボードにアクセスする各ユーザーは、Amazon Quick Sight にダッシュボードへのアクセスとアクセス許可を付与するロールを引き受けます。これを可能にするには、 で IAM ロールを作成します AWS アカウント。IAM ポリシーをロールに関連付けて、それを引き受けるすべてのユーザーにアクセス許可を付与します。

IAM ポリシーで条件を作成し、デベロッパーが `GenerateEmbedUrlForAnonymousUser` API オペレーションの `AllowedDomains` パラメータにリストできるドメインを制限できます。`AllowedDomains` パラメータはオプションのパラメータです。これにより、**Amazon Quick Sight の管理**メニューで設定された静的ドメインを上書きするオプションが開発者として付与されます。代わりに、生成された URL へのアクセスが可能な、ドメインもしくはサブドメインを、最大 3 つまでリストアップすることもできます。この URL は、作成した Web サイトに埋め込むことが可能です。パラメータにリストされているドメインのみが、埋め込みダッシュボードにアクセスできます。この状態にしていない場合、インターネット上の任意のドメインを `AllowedDomains` パラメータにリストできてしまいます。

デベロッパーがこのパラメータで使用できるドメインを制限するには、`AllowedEmbeddingDomains` 条件を IAM ポリシーに追加します。`AllowedDomains` パラメータの詳細については、*Amazon Quick Sight API リファレンス*の[GenerateEmbedUrlForAnonymousUser](https://docs.aws.amazon.com//quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html)」を参照してください。

**IAM 条件演算子のセキュリティのベストプラクティス**  
正しく設定されていない IAM 条件演算子は、URL のバリエーションを通じて埋め込み Quick リソースへの不正アクセスを許可できます。IAM ポリシーで `quicksight:AllowedEmbeddingDomains` 条件キーを使用する場合は、特定のドメインを許可するか、特に許可されていないすべてのドメインを拒否する条件演算子を使用します。IAM 条件演算子の詳細については、IAM [ユーザーガイドの「IAM JSON ポリシー要素: 条件演算子](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements_condition_operators.html)」を参照してください。  
多くの異なる URL バリエーションが同じリソースを指す場合があります。たとえば、次の URLsはすべて同じコンテンツに解決されます。  
`https://example.com`
`https://example.com/`
`https://Example.com`
ポリシーでこれらの URL バリエーションを考慮しない演算子を使用している場合、攻撃者は同等の URL バリエーションを提供することで制限を回避できます。  
IAM ポリシーが適切な条件演算子を使用してバイパスの脆弱性を防ぎ、目的のドメインのみが埋め込みリソースにアクセスできることを確認する必要があります。

次のサンプルポリシーで、`GenerateEmbedUrlForAnonymousUser` で使用するこれらの許可が付与されます。このアプローチを機能させるには、 AWS アカウントでセッションパックまたはセッションキャパシティーの料金が必要となります。これがないと、ユーザーがダッシュボードにアクセスする際に、エラー `UnsupportedPricingPlanException` が返されます。

作成したロールへのアクセスを許可するには、アプリケーションの IAM ID に関連付けられた信頼ポリシーが必要です。つまり、ユーザーがアプリケーションにアクセスすると、アプリケーションはユーザーに代わってロールを引き受け、ダッシュボードを開きます。次の例は、サンプルの信頼ポリシーを示しています。

------
#### [ 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"
    }
]
}
```

------

信頼ポリシーの詳細については、「IAM ユーザーガイド」の「[IAM の一時的な認証情報](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html)」を参照してください。

## ステップ 2: 認証コードがアタッチされた URL を生成する
<a name="embedded-analytics-dashboards-with-anonymous-users-step-2"></a>


|  | 
| --- |
|  適用対象: Enterprise Edition  | 


|  | 
| --- |
|    対象者:  Amazon Quick デベロッパー  | 

次のセクションでは、匿名の訪問者に代わって認証を取得する方法とアプリケーションサーバー上の埋め込みダッシュボードの URL の取得方法について説明します。

ユーザーがアプリケーションにアクセスすると、アプリケーションはユーザーに代わって IAM ロールを引き受けます。次に、そのユーザーがまだ存在しない場合、Amazon Quick Sight にユーザーを追加します。次に、一意のロールセッション ID として識別子を渡します。

次の例では、ユーザーに代わって IAM 認証を実行します。一意のロールセッション ID として識別子を渡します。このコードはアプリケーションサーバー上で実行されます。

### 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>

次の例は、埋め込みダッシュボードの URL を生成するためにアプリケーションサーバーで使用できる JavaScript (Node.js) を示しています。ダッシュボードを表示するには、ウェブサイトまたはアプリでこの URL を使用します。

**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>

次の例は、埋め込みダッシュボードの URL を生成するためにアプリケーションサーバーで使用できる .NET/C\# コードを示しています。ダッシュボードを表示するには、ウェブサイトまたはアプリでこの URL を使用します。

**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>

ロールを引き受けるには、次のいずれかの AWS Security Token Service (AWS STS) API オペレーションを選択します。
+ [AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html) – ロールを引き受けるために IAM ID を使用している場合は、このオペレーションを使用します。
+ [AssumeRoleWithWebIdentity](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html) – ユーザーの認証にウェブ ID プロバイダーを使用している場合は、このオペレーションを使用します。
+ [AssumeRoleWithSaml](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithSAML.html) – ユーザーの認証に Security Assertion Markup Language (SAML) を使用している場合は、このオペレーションを使用します。

次の例は、IAM ロールを設定するための CLI コマンドを示しています。ロールは、`quicksight:GenerateEmbedUrlForAnonymousUser` を有効にする許可を取得する必要があります。

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

`assume-role` オペレーションは、アクセスキー、シークレットキー、およびセッショントークンの 3 つの出力パラメータを返します。

**注記**  
`AssumeRole` オペレーションを呼び出すときに `ExpiredToken` エラーが発生した場合は、以前の `SESSION TOKEN` がまだ環境変数に残っている可能性があります。以下の変数を設定することで、これをオフにします。  
*AWS\_ACCESS\_KEY\_ID* 
*AWS\_SECRET\_ACCESS\_KEY* 
*AWS\_SESSION\_TOKEN* 

次の例は、CLI でこれら 3 つのパラメータを設定する方法を示しています。Microsoft Windows マシンを使用している場合は、`export` の代わりに `set` を使用します。

```
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}}"
```

これらのコマンドを実行すると、ウェブサイトにアクセスしているユーザーのロールセッション ID が `embedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy` に設定されます。ロールセッション ID は、`role-arn` の役割名と `role-session-name` 値で構成されています。各ユーザーに一意のロールセッション ID を使用すると、各訪問ユーザーに適切なアクセス許可が設定されます。また、各セッションを別個に保ちます。ロードバランシングなどのウェブサーバーの配列を使用していて、セッションが別のサーバーに再接続されると、新しいセッションが開始されます。

ダッシュボードの署名付き URL を取得するには、アプリケーションサーバーから `generate-embed-url-for-anynymous-user` を呼び出します。これは埋め込み可能なダッシュボードの URL を返します。次の例は、ウェブポータルまたはアプリケーションに匿名で訪問するユーザーのサーバーサイド呼び出しを使用して、埋め込みダッシュボードの URL を生成する方法を説明しています。

```
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}}}}'
```

このオペレーションの使用に関する詳細については、[https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html) を参照してください。これと他の API オペレーションは、独自のコードで使用できます。

## ステップ 3: ダッシュボード URL を埋め込む
<a name="embedded-analytics-dashboards-with-anonymous-users-step-3"></a>


|  | 
| --- |
|  適用対象: Enterprise Edition  | 


|  | 
| --- |
|    対象者:  Amazon Quick デベロッパー  | 

次のセクションでは、[Amazon Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) を使用して、ステップ 2 のダッシュボード URL をウェブサイトまたはアプリケーションページに埋め込む方法について説明します。SDK を使用すると、次のことを実行できます。
+ ダッシュボードを HTML ページに配置します。
+ ダッシュボードにパラメータを渡します。
+ アプリケーションに合わせてカスタマイズされたメッセージでエラー状態を処理します。

`GenerateEmbedUrlForAnynymousUser` API オペレーションを呼び出して URL を生成し、アプリケーションに埋め込みます。この URL は 5 分間有効で、得られたセッションは 10 時間有効です。API オペレーションは、シングルサインオンセッションを有効にする `auth_code` の URL を提供します。

以下に、`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"
        }
```

[Amazon Quick Sight Embedding SDK を使用する](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)か、この URL を iframe に追加して、このダッシュボードをウェブページに埋め込みます。固定の高さと幅の数値 (ピクセル単位) を設定した場合、Amazon Quick Sight はそれらを使用し、ウィンドウのサイズ変更に伴ってビジュアルを変更しません。相対的な高さと幅の割合を設定すると、Amazon Quick Sight はウィンドウサイズの変化に応じて変化するレスポンシブレイアウトを提供します。Amazon Quick Sight Embedding SDK を使用すると、ダッシュボード内のパラメータを制御し、ページロードの完了とエラーの観点からコールバックを受信することもできます。

埋め込みダッシュボードをホストするドメインは、許可リスト ( Quick サブスクリプションで承認されたドメインのリスト) に登録されている必要があります。この要件は、未承認のドメインが埋め込みダッシュボードをホストしないようにすることでデータを保護します。埋め込みダッシュボードのドメインの追加の詳細については、[「Amazon Quick Sight API を使用して実行時にドメインを一覧表示するの](https://docs.aws.amazon.com/quicksight/latest/user/embedding-run-time.html)を許可する」を参照してください。

次の例は生成された URL の使用方法を示しています。このコードはアプリケーションサーバーにあります。

### 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>
```

この例では、Amazon Quick Sight Embedding SDK を使用して、JavaScript を使用してウェブサイトに埋め込みダッシュボードをロードします。コピーを取得するには、次のいずれかを実行します。
+ GitHub [から Amazon Quick Sight Embedding SDK](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) をダウンロードします。このリポジトリは、Amazon Quick Sight 開発者のグループによって管理されます。
+ [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) から最新の Amazon Quick Sight Embedding SDK バージョンをダウンロードします。
+ JavaScript の依存関係の `npm` を使用する場合、次のコマンドを実行してダウンロードおよびインストールします。

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