Amazon QuickSightの埋め込み手順

# はじめに
[クラスメソッドさんの記事](https://dev.classmethod.jp/cloud/aws/amazon-quicksight-supports-embed-dashboard/)を見ながらやったら思いの外ハマりにハマった話。

# 前提条件

- QuickSightのプランがエンタープライズであること

確認は、QuickSightの画面の右上の人のマークをクリック、「QuickSightの管理」をクリックすれば左上の画面に出てくる。
<img width="906" alt="スクリーンショット 2019-10-24 16.36.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/95d2b711-1324-992b-b024-577f9a258a4d.png">

# ハマった点

## aws cliから挑んだところこんな感じのエラー
記事通りaws cliを使って試してみました。

```
arata.honda@hoge:$ aws quicksight get-dashboard-embed-url   --aws-account-id [AWSプロジェクトアカウント]   --dashboard-id [ダッシュボードID]   --identity-type IAM --session-lifetime-in-minutes 15

An error occurred (AccessDeniedException) when calling the GetDashboardEmbedUrl operation: User: arn:aws:iam::[AWSプロジェクトアカウント]:user/honda is not authorized to perform: quicksight:GetDashboardEmbedUrl on resource: arn:aws:quicksight:ap-northeast-1:[AWSプロジェクトアカウント]:dashboard/[ダッシュボードID]
```

ちなみにダッシュボードIDは公開したダッシュボードのURLについてます。(下図黒塗り)
<img width="742" alt="スクリーンショット 2019-10-24 16.40.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/0706cdaa-ccf4-4b6c-bb00-6bec816d789c.png">


## ポリシーアタッチで既にハマった
まぁAccessDeniedExeptionだから、ポリシーとかRoleなんだろうなと思い。公式を見ました。
https://aws.amazon.com/jp/blogs/news/embed-interactive-dashboards-in-your-application-with-amazon-quicksight/

みたところ上記エラーのポリシーを作ってロールでアタッチしているようでした。

なので、

```quicksight-policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:RegisterUser",
            "Resource": "*",
            "Effect": "Allow"
        },
        {
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "arn:aws:quicksight:ap-northeast-1:[AWSプロジェクトアカウント]:dashboard/*",
            "Effect": "Allow"
        }
    ]
}
```
としてみました。変えたのはResourceのところで、
`arn:aws:quicksight:ap-northeast-1:[AWSプロジェクトアカウント]:dashboard/*`

ここは、どのダッシュボードでも埋め込みできるようにワイルドカードである"※"をつけております。また公式ドキュメントはus-eastにresionがなっているのでap-northeastにしています。

これを作ってまずcreate-policyしました。

```bash

arata.honda@hoge:~$ aws iam create-policy --policy-name quicksight-embed-policy(任意でつけた) --policy-document file://quicksight-policy.json
{
    "Policy": {
        "PolicyName": "quicksight-embed-policy",
        "PolicyId": "英数字の羅列",
        "Arn": "arn:aws:iam::[AWSプロジェクトアカウント]:policy/quicksight-embed-policy",
        "Path": "/",
        "DefaultVersionId": "v1",
        "AttachmentCount": 0,
        "PermissionsBoundaryUsageCount": 0,
        "IsAttachable": true,
        "CreateDate": "2019-10-24T03:02:50Z",
        "UpdateDate": "2019-10-24T03:02:50Z"
    }
}
```

この時 "file://quicksight-policy.json"の"file://"がないと

```bash
An error occurred (MalformedPolicyDocument) when calling the CreateRole operation: This policy contains invalid Json
```
怒られます。(ここで一回ハマりました。)

次に、公式通り、このポリシーを一時的に信頼するAssumeRolePolicyも作っておきました。

```quicksight-role-trust-policy.json
{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "sts:AssumeRole",
        "Resource": "arn:aws:iam::[AWSプロジェクトアカウント]:role/quicksight-embed-policy"
    }
}
```

ここのResourceはさっきつくった"quicksight-policy"を書いておきましょう。(公式のコピペは絶対に動きません)
AssumeRolePolicyなので、それ用のコマンドをうつと怒られました。

```bash
aws iam create-role --role-name quicksight-embed-role --assume-role-policy-document file://quicksight-role-trust-policy.json

An error occurred (MalformedPolicyDocument) when calling the CreateRole operation: Has prohibited field Resource
```

[ここ](https://qiita.com/sot528/items/2263fab0dbb55d6ce032)をみるどうやらResourceは定義できないとのこと。
なので諦めて普通にポリシーとして登録しました。(偉い人がいれば教えて下さい)
ここでもハマりました。上と同様にアタッチすると普通に通りました。

```bash
aws iam create-policy --policy-name quicksight-embed-trust-policy --policy-document file://quicksight-role-trust-policy.json
{
    "Policy": {
        "PolicyName": "quicksight-embed-trust-policy",
        "PolicyId": "英数字の羅列",
        "Arn": "arn:aws:iam::[AWSプロジェクトアカウント]:policy/quicksight-embed-trust-policy",
        "Path": "/",
        "DefaultVersionId": "v1",
        "AttachmentCount": 0,
        "PermissionsBoundaryUsageCount": 0,
        "IsAttachable": true,
        "CreateDate": "2019-10-24T03:26:19Z",
        "UpdateDate": "2019-10-24T03:26:19Z"
    }
}
```

## ユーザーおるやん編
作ったら次にawsコマンドをうっているユーザに2つのポリシーをアタッチしました。
<img width="500" alt="スクリーンショット 2019-10-24 12.27.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/1f3e7c40-bb7b-4eb3-06af-26defc0e3049.png">
<img width="500" alt="スクリーンショット 2019-10-24 12.27.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/1c9c0dcd-101d-2059-b975-ea94a414af44.png">

2つのポリシーをアタッチして再度aws cliでgetEmbdedコマンドをうってみました。

```bash
arata.honda@hoge:~$ aws quicksight get-dashboard-embed-url  --aws-account-id [AWSプロジェクトアカウト] --dashboard-id [ダッシュボードID]  --identity-type IAM  --session-lifetime-in-minutes 15

An error occurred (QuickSightUserNotFoundException) when calling the GetDashboardEmbedUrl operation: Could not find user information in QuickSight
訳：ユーザーおらんやで
```

ユーザーおるやんってずっとおもってまたハマりました。
実は、QuickSightのユーザーはエンタープライズになるとIAMでつくったユーザも管理できるようで、追加する必要がありました。
<img width="500" alt="スクリーンショット 2019-10-24 15.10.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/e511c9c1-164d-2747-580f-dfa7ec4ec06c.png">

追加して、コマンドを打つと、

```bash
arata.honda@hoge:~$ aws quicksight get-dashboard-embed-url  --aws-account-id [AWSプロジェクトアカウント] --dashboard-id [ダッシュボードID]  --identity-type IAM  --session-lifetime-in-minutes 15
{
    "Status": 200,
    "EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embed/cf1d3e05c8da41728eacd08653d58921/dashboards/[ダッシュボードID]?isauthcode=true&identityprovider=quicksight&code=英字の羅列",
    "RequestId": "26ffa865-bbbc-47a8-8dc3-efedea981d47"
}
```
やっときました。

## 見れへんで編

このEmbedUrlをクリックして早速確認しました。

<img width="500" alt="スクリーンショット 2019-10-24 17.17.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/facbd9d4-c578-b78e-3c0e-a3d56dd6a722.png">

しらこい画面しやがって！！！！！！！キーーーーーーって癇癪起こしそうになってしばらくハマってました。

実はまだあって、公開したダッシュボードで共有しないとまだ見れないです。
<img width="267" alt="スクリーンショット 2019-10-24 17.19.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/703118b8-c132-1a0f-6539-8d31515dc5c4.png">
「ダッシュボードの共有」を押し、
<img width="748" alt="スクリーンショット 2019-10-24 17.19.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/b5d3688b-16e7-7a17-1b47-04e8086a8a23.png">
追加しましょう。

見れました！！
<img width="680" alt="スクリーンショット 2019-10-24 17.57.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211139/26a93ce1-451a-e7d0-e549-d6dc376b7990.png">


# おわりに
公式もみるのは大事だし、基本的なことがあまりわかってないのがわかりました。(小並感

# 参考

- [Cloudformationでエラー: Has prohibited field Resource](https://qiita.com/sot528/items/2263fab0dbb55d6ce032)
- [【AWS】IAM ロールのパスをルート(/)以外にする](https://qiita.com/d_desuyon/items/4fba127ce566e909985d)
- [Amazon QuickSightのダッシュボードが外部サイトに埋め込めるようになりました #reinvent](https://dev.classmethod.jp/cloud/aws/amazon-quicksight-supports-embed-dashboard/)
- [公式](https://aws.amazon.com/jp/blogs/news/embed-interactive-dashboards-in-your-application-with-amazon-quicksight/)