CognitoのユーザーでQuickSightログインを試してみる

aws-samplesにCognitoユーザーでQuickSightにログインするシステムのサンプルが公開されていたので試してみました。

• aws-samples/aws-cognito-quicksight-auth: A simple JavaScript frontend and SAM template to spin up a serverless backend, federating Cognito User Pools users to QuickSight

やっていることはざっくりいうと、先日ブログに書いたCognitoのユーザーでAWSのマネジメントコンソールにフェデレーションログインしている方法とほぼ同じです。 そのフェデレーションログインしたとき最初に開くページがQuickSightのトップページになっています。

やってみた

GitHubのReadme記載の手順どおりにやっていけば、簡単に試すことができます。

0. Gitリポジトリをcloneする

SAMテンプレートを利用してバックエンドを構築するので、gitリポジトリをcloneしてSAMテンプレートをダウンロードします。

$ git clone https://github.com/aws-samples/aws-cognito-quicksight-auth.git
$ cd aws-cognito-quicksight-auth

1. S3バケットを作成する

デプロイ時にSAMテンプレートの保存場所としてS3バケットが必要になるので、S3バケットを構築します。 すでに構築したS3バケットがあれば、既存のものを利用しても問題ありません。

$ BUCKET_NAME=<bucket-name>
$ aws s3 mb s3://${BUCKET_NAME} --region <AWS Region>

2. バックエンドのデプロイをする

次のコマンドを実行して、SAMテンプレートをS3バケットにパッケージングします。

$ BUCKET_NAME=<bucket-name>
$ aws cloudformation package \
  --template-file quicksight.yaml \
  --output-template-file quicksight-output.yaml \
  --s3-bucket ${BUCKET_NAME}

パッケージングが終わったら、次のコマンドを実行してデプロイします。

$ aws cloudformation deploy \
  --template-file quicksight-output.yaml \
  --stack-name CognitoQuickSight \
  --capabilities CAPABILITY_IAM

デプロイが完了すると、CloudFormationにCognitoQuickSightという名前のスタックができているはずです。

3. 設定ファイルを編集する

次に設定ファイルである auth.js ファイルを編集します。 CloudFormationの出力画面に必要な情報が出力されているので、これを転記します。

appDomain の値だけは、次の章で設定します。

let identityPool = 'us-east-1:XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; //Cognito Identity Pool
let region = 'us-east-1';
let poolId = 'us-east-1_XXXXXXXX'; //Cognito User Pool
let clientId = 'XXXXXXXXXXXXXXXXX'; //Cognito User Pool App
let appDomain = 'XXXXXX.auth.us-east-1.amazoncognito.com';
let endpoint = "https://XXXXXXXXXXX.execute-api.us-east-1.amazonaws.com/prod"; //API Endpoint URL
let authData = {
    ClientId : clientId, 
    AppWebDomain : appDomain,
    TokenScopesArray : ['openid'],
    RedirectUriSignIn : 'https://d12345example.cloudfront.net', //CloudFront Distribution URL
    RedirectUriSignOut : 'https://d12345example.cloudfront.net' //CloudFront Distribution URL
};

4. Cognitoにドメイン名をつける

マネジメントコンソールのCognitoユーザープールの画面から、ドメイン名の設定をします。ドメイン名は、リージョンで一意となる点だけご注意ください。

ドメイン名の設定ができたら、auth.js ファイルの appDomain をそのドメイン名に変更します。

5. Cognitoのアプリクライアントを設定する

Cognitoユーザープールの画面から、アプリクライアントの設定をします。

有効なIDプロバイダにCognito User Poolを選択し、 コールバックURLとサインアウトURLには、CloudFrontのアドレスをhttpsつきで設定します。 許可されているOAuthフローに、Implicit grantを選択し、 許可されているOAuthスコープに、openidを選択します。

6. フロントエンドのファイルをS3にデプロイする

CloudFormationで作られたS3バケット（cognitoquicksight-s3websitexxxxxxxxx）に、 合計４つのJavaScriptとHTMLファイルをアップロードします。

すべてのオブジェクトにパブリック読み取りアクセス権限を付与するのを忘れないようにしてください。 これを忘れるとブラウザからアクセスできません。

7. ログインページにアクセスする

CloudFormationで構築したCloudFrontにアクセスすると、QuickSightのログインページができていることがわかります。

重要な注意点

この環境はCloudFrontのURLを知っていれば、誰でもサインアップしてQuickSightにログインできてしまいます。 検証用のユーザーをサインアップしたら、すぐにCognitoの設定をユーザーの自己サインアップを許可しないように変更してください。

Cognitoユーザープールの画面のポリシーの部分で設定できます。

ログインしてみる

環境が構築できたので、実際にログインしてみます。 トップページのボタンをクリックすると、Cognitoのログイン画面に飛びます。 ユーザーがないので、まずはサインアップします。

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

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

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

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

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

ちなみに、このQuickSightユーザーはIAMロールと紐付いているようです。 このサンプルだとすべてのCognitoユーザーで同じIAMロールを利用する構成となっているため、どのCognitoのユーザーでログインしても同一のQuickSightユーザーを使用してログインすることになります。

Cognitoユーザーごとに異なるQucikSightユーザーでログインしたい場合は、構成の変更や独自ロジックの実装が必要です。

終わりに

CognitoユーザーでQuickSightにログインするサンプルを試してみました。

Cognitoユーザーでログインを一元管理できるので、ログインをCognitoでまとめたい場合は少しQuickSightのログインが楽になると思います。