この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
先日、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マネジメントコンソールへのフェデレーションログインなので、ロジックさえ理解してしまえば難しい話ではないと思います。
このブログがどなたかの実装の参考になれば幸いです。