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

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

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

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

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

ゴール

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

  • ログイン、ログアウトができる
  • ログインした際に、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 してください。

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ユーザーへログインできるようにしたいので、次の2つのユーザーを作っておきます。

  • quicksight-author
  • quicksight-reader

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

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

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

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

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

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

  • 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ユーザーを追加する権限を付与できます。 権限についての詳細は公式ドキュメントをご覧ください。

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

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

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

QuickSightにログインする

CognitoユーザーにQuickSightへログインする権限を付与できたので、次のコマンドを再度実行してローカルでAngularを動かし、QuickSightへのログインを確認してみます。

$ npm i
$ ng serve --open

ログイン画面が開くので、ユーザー名とパスワードを入力してログインします。

ログインするとこんな風にQuickSightへフェデレーションログイン可能なURLが表示されます。

URLをクリックするとQuickSightにリダイレクトされて、E-mailアドレスを入力してQuickSightのユーザーを作るように促されます。

E-mailアドレスを入力すると、Author権限で問題なくQuickSightにログインできました。

quicksight-readerユーザーでログインすると、Reader権限でQuickSightにログインできます。

別途、QuiciSightの管理者権限(ADMIN)ユーザーでQuickSightのユーザー一覧を見てみると、E-mailアドレスを入力したタイミングで各QuickSightのユーザーが追加されていることがわかります。

プログラムの解説

このシステムで肝となるロジックは、 src/app/app.component.ts に書いています。

ロジックはこのブログとほぼ同じですので、こちらの解説を参照してください。

終わりに

CognitoユーザーでQuickSightにログインしたい場合、このブログで作成したプログラムが参考になると思います。

やっている事自体はAWSマネジメントコンソールへのフェデレーションログインなので、ロジックさえ理解してしまえば難しい話ではないと思います。

このブログがどなたかの実装の参考になれば幸いです。