AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

AWS Cognitoでは認証画面は提供していません。(でも提供していたらどなたか教えてください)
認証画面を自作します。ちょっと凝ったことをしたいのでCloudFrontで配信し、S3にWebコンテンツを配置します。
使用するサービスは、ACM,CroudFront,Route53,Cognito,S3,APIGatewayです。

上記の記事で独自ドメイン + SSL化が完了したら、Cognitoでユーザープールを作成してください。

S3にWebコンテンツを置いてCloudFrontで配信する

Webコンテンツを配置するS3のバケットを作成します。
適当に「web」というバケットを作成してみます。すると「バケット名はすでに存在しています」と怒られます。
どうもバケット名はそのリージョンで?もしくは全世界で?ユニークでないといけないようです。
バケット名なんて何でも良いので適当に命名して作成します。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

CloudFrontで配信するので、S3のウェブサイトのホスティングは無効にしておいてください。

今回の大事な要件として、「複数オリジンを一つのドメインで管理する」という要件があります。その一つであるS3のフォルダ構成を以下のようにします。

このバケットにindex.htmlなどのWebコンテンツを配置します。

API Gatewayを作成してデプロイする

まず認可の為にオーソライザーを作成します。

名前は任意です。タイプは「Cognito」、Cognitoユーザープールは先に作成しておいたユーザープールを選択します。

トークンのソースは「Authorization」固定です。トークンの検証は空白で「作成」を押します。

これで、オーソライザーの作成は完了です。

次に、サインインした後にjQueryで実行したいAPI Gatewayを作成します。ここでは「test」として作成します。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

認証は別記事で書いたCognitoの設定で作成した認可を指定してください。ここでは「cognito1」という名前の認可になります。LambdaはJSONを返しているだけです。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

「アクション」ー「APIのデプロイ」を実行します。この際のhttpsから始まるURLをメモしておいてください。ステージは「test」にしました。

一応Lambdaのソースです。JSONを返します。

CloudFrontを設定する

CloudFrontはグローバルなのでリージョンは関係ありません。「Create Distribution」をクリックします。
Webの「Get Started」をクリックします。
「Origin Domain Name」にカーソルを当てると先ほど作成したバケットが表示されますが、先ほどのAPI GatewayのURLを貼り付けてください。貼り付けてカーソルを外すと以下のように自動で入力されます。

Create Distribution

Origin Settings

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

Default Cache Behavior Settings

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

Distribution Settings

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

CNAMEsはACMで取得したドメイン(例:www.yahoo.co.jp)を入力します。

ACMはドロップダウンリストから表示されるのでそれを選択します。

最後に「Create Distribution」をクリックして完了です。

Originを追加設定する

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

上記の赤枠のCloudFront Distributionが作成されているのが確認できます。

次はS3オリジンの設定をする必要があるので、IDのリンクをクリックします。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

API GatewayのOriginは作成されているのが確認できるので、「Create Origin」をクリックします。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

「Origin Domain Name」にカーソルをあてると、バケット一覧が表示されるので、今回作成したバケットを選択します。選択したら「Origin ID」が自動で入力されます。

「Restrict Bucket Access」は「Yes」にします。その他、画像の通りに選択して、「Create」をクリックします。これでS3のオリジン作成は完了です。

Behaviorsを追加設定する

S3のオリジンを作成したら、次はS3のBehaviorを作成します。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

API GatewayのPath Patternが「*」となっていますが、こうしないと私が試した限りではうまく複数オリジンを一つのドメインで管理することができませんでした。

ではS3の設定をするために「Create Behavior」をクリックします。

次はS3オリジンの設定をする必要があるので、IDのリンクをクリックします。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

Path Patternは、*とすると上手くいかないので、login/*といったようにAPI Gatewayと分けるためにPath Patternを変更してください。この時、login/とせずに最後に必ず*をつけてください。

あとは画像のとおり選択してください。最後に「Create」をクリックします。

完成

これでS3に配置したコンテンツをCloudFrontを経由して高速に配信し、かつ独自ドメインでSSL化されていてCognitoでサインアップ、サインインの認証、API Gatewayの認可までの設定が完了です。

具体的なサインイン画面や、サインイン後のAPI Gatewayの実行については、以下に記述します。

ログイン画面

問答無用で以下を読み込みます。バージョンは適当です。

JSの先頭に以下をおまじないとしてコーディングします。

次に、AWSCognito.CognitoIdentityServiceProvider.CognitoUserPoolに渡すデータをJSON形式で作成します。

次にCognitoUser管理しているクラスを作成します。

これでCognitoUser管理しているクラスを作成することができました。

やっと認証ができます。ユーザIDとパスワードを以下の形式で変数に格納します。

authenticationDataを、cognitoUser.authenticateUserメソッドの第一引数に渡します。

これで完了です。

参考サイト

参考サイト

認可されていないAPIにアクセスしたら

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

こんな画面になります。

S3に直接アクセスさせないように設定する

S3のURLにアクセスされても403となるように設定し、「Origin Access Identity」を使ってCloudfront経由のみからアクセスさせることができます。

S3もURLが以下の形式で決まっているので、アクセスすると閲覧できてしまいます。

AWS Cognitoで認証画面を作成してサインイン後にAPI GatewayをCognitoで認可する

見えていますね。

CloudFrontに「Origin Access Identity」というのがあるのでクリックします。

IDをメモしておきます。

S3のバケットを選択し、「アクセス権限」-「バケットポリシー」を選択して以下のように編集します。

これで完了です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA