AWS AmplifyとAngular8を使ってCognitoでQuickSightにログインするページを作ってみる

ブラウザで動かせるCognitoユーザープールのユーザーでQuickSightにログインするページのサンプルプログラムを作ったので紹介します。ついでに、Cognitoユーザーごとに異なるQuickSightユーザーでログインする例も紹介します。

#Federation

#Amazon QuickSight

#AWS Amplify

#Amazon Cognito

#AWS

Kitano Yuichi

2020.05.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

先日、aws-samplesで公開されていたCognitoのユーザーでQuickSightにログインするサンプルを紹介するブログを書きました。

また、AmplifyとAngular8を使ってCognitoでAWSマネジメントコンソールにログインするページを作るブログも書きました。

今回のブログではこの２つのブログをがっちゃんと合わせて、ブラウザで動かせるCognitoユーザープールのユーザーでQuickSightにログインするページを作ります。ついでに、Cognitoユーザーごとに異なるQuickSightユーザーでログインできるような構成例を紹介します。

2023/03/15追記
Cognitoを使ってQuickSightにアクセスする場合、QuickSightの埋め込み機能を利用することが推奨されます。
まずはQuickSightの埋め込みで対応可能かご検討ください。
詳しくは、次の資料のP.79を御覧ください。

Amazon QuickSight におけるシングルサインオンの設計と実装 - AWS Black Belt Online Seminar

ゴール

次のことができるサイトを作ることがゴールです。

ログイン、ログアウトができる
ログインした際に、QucikSightへフェデレーションログインができる

こちらが完成イメージです。

構成概要図

AWS Amplifyでざっくりこんな感じのAWS環境を作ります。

QuickSightへのログインは、要するにAWSマネジメントコンソールへのフェデレーションログインと同じです。ですので先日書いた、AWS AmplifyとAngular8を使ってCognitoでAWS Management Consoleにログインするページを作るブログとやっていることはほとんど変わらないです。

異なる点は、QuickSightの場合、初回ログイン時にQuickSight用ユーザーが別途作られることです。

前提条件

Angular CLI（Version 8）のコマンドが使えるようにしておいてください。

$ ng version
Angular CLI: 8.3.26
Node: 12.16.2
OS: darwin x64
Angular: 8.2.14

無ければインストールしてください。

$ npm install -g @angular/cli@v8-lts

Amplify CLIのコマンドが使えるようにしておいてください。

$ amplify -v
4.20.0

無ければインストールしてください。

$ npm install -g @aws-amplify/cli

サンプルプログラム置き場

今回作成したプログラムはGitHubで公開しています。実際に動かしてみたい方はこちらから git clone してください。

rednes/amplify-angular-quicksight-sso-sample

Amplify CLIを使ったAWS環境の構築

まずは git clone して環境一式をGitHubから取ってきます。

$ git clone https://github.com/rednes/amplify-angular-quicksight-sso-sample.git
$ cd amplify-angular-quicksight-sso-sample

次に amplify init コマンドを実行してバックエンドのセットアップをします。環境名（今回はlocalという名前にします）やデフォルトエディタ、使用するAWSプロファイル名を質問に沿って入力していきます。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the environment: local
? Choose your default editor: IntelliJ IDEA
? Do you want to use an AWS profile?: Yes
? Please choose the profile you want to use: <<YourProfile>>

次に amplify push コマンドを実行して、バックエンドの環境をAWSに構築します。

$ amplify push

Current Environment: local

| Category | Resource name            | Operation | Provider plugin   |
| -------- | ------------------------ | --------- | ----------------- |
| Auth     | amplifyangularqs6212f3a5 | Create    | awscloudformation |
| Auth     | userPoolGroups           | Create    | awscloudformation |
| Function | GetSigninTokenQSLambda   | Create    | awscloudformation |
| Api      | GetSigninTokenQSApi      | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

このコマンドを実行することで、認証のCognito部分とAPIとなるAPI Gateway部分とAPIのロジックとなるLambda部分を自動で構築してくれます。

Amplify CLIを使って作ったAWS環境は、Amplify Consoleに登録されています。マネジメントコンソールからAmplifyのページを開いてみてください。

そうすると、新しく AmplifyAngularQS というアプリケーションができていることが確認できます。

そこでBackend environmentsを確認してみると、 local という名前の環境が登録されており、AWS環境が構築できていることがわかります。

新規ユーザーの登録

サーバー側のリソースが構築できたので、次のコマンドを実行してローカルでAngularを動かして動作確認をしてみます。

$ npm i
$ ng serve --open

そうすると、こんな感じのログイン画面が表示されます。ログインしようにもアカウントが無いので、まずはサインアップします。

Cognitoユーザーごとに異なるQuickSightユーザーへログインできるようにしたいので、次の２つのユーザーを作っておきます。

quicksight-author
quicksight-reader

次の画面の情報を適当に入力して、アカウントを作ります。 E-mailアドレス宛に検証コードが届くので、必ず自分で受信可能なE-mailアドレスを入力してください。

次の画面でE-mailアドレスに届いた検証コードを入力すれば、サインアップは完了です。

Cognitoユーザーを新規登録はできましたが、このままだとQuickSightにログインする権限がありません。各ユーザーにQuickSightへログインする権限を設定する必要があります。

Cognitoユーザーに権限を付与する

マネジメントコンソールのCognitoユーザープールの画面を見ると、先ほど新規登録した２つのユーザーを確認できます。

グループの方も見てみると次の２つのグループができていることが確認できます。

QuickSightAuthor
QuickSightReader

QuickSightAuthorグループのクリックして詳細を見てみます。

そうするとこのグループに実際どのIAM Roleが紐付いているか確認できます。このグループに紐付いているIAM RoleのARNは、後ほど使うのでメモしておいてください。各グループにそれぞれ次のユーザーを追加します。

QuickSightAuthorグループ → quicksight-authorユーザー
QuickSightReaderグループ → quicksight-readerユーザー

これでそれぞれのCognitoユーザーに対して別々のIAM Role権限をもたせることができました。

次はIAM Roleを編集して、QuickSightにログインできる権限をつけます。先ほどメモしておいたQuickSightAuthorグループに紐付いているIAM Roleの編集画面を開いてインラインポリシーを追加します。

ポリシーのJSONに次のポリシーをコピー&ペーストしてポリシーを作成します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "quicksight:CreateUser",
            "Resource": "*"
        }
    ]
}

これでAuthor権限のQuickSightユーザーを追加する権限を付与できます。権限についての詳細は公式ドキュメントをご覧ください。

Amazon QuickSight 用のユーザーのプロビジョニング - Amazon QuickSight

QuickSightReaderグループに紐付いているIAM Roleには次のポリシーをインラインポリシーに追加します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "quicksight:CreateReader",
            "Resource": "*"
        }
    ]
}

これでReader権限のQuickSightユーザーを追加する権限を付与できます。