Facebook Twitter Google Maps RSS
Home webサイト Amazon CognitoとS3で問い合わせフォームを作る
formats

Amazon CognitoとS3で問い合わせフォームを作る

こんにちは。陽気なシステム屋のうっちーです。

皆さん、Amazon Web Services(AWS)のシンプル・ストレージ・サービス、S3は活用されているでしょうか??

S3を使用すると、非常に低価格でWebサイトをホスティングすることができ、しかも、レスポンスの心配もありません!
ただ、これまでS3では静的なWebページしかホスティングできなかったので、WordPressを使って構築したサイトの場合、StaticPressといったプラグインを使って静的なサイトに変換するテクニック(いわゆる、「永代供養」などと呼ばれているものですね)を使って運用していました。

この方法で問題ないケースであれば、この方法でご提案させていただくのですが、場合によっては「お問い合わせフォーム」など、特定のページだけはメール送信やDB書き込みしなければいけないといった要件もありますよね。

「お問い合わせフォーム」のためだけにPHPのサーバーを立てるのも無駄な話ですし、「お問い合わせフォーム」の部分だけ外部のサービスを利用するというのもスマートな解決法とは言えませんでした。

 

今回はAWSのサービスとJavaScriptだけを使って問い合わせフォームを実現する方法を考えてみたいと思います。

 

いきなりですが、完成形です。

手抜きでシンプルですが、説明用ということで許してください(笑)

 

で、そのソースコードです。

 

順を追って説明していきます。

まず、JavaScriptからAWSサービスの機能を使用するために、AWS SDK for Javascriptのファイルを読み込んでいます。

AWSのAPIを使用する際には、目的に合わせたIAMユーザーを作成してIAMユーザーのアクセスキー(アクセスキー ID とシークレットアクセスキー)を指定するというのがよくあるパターンなのですが、アクセスキーを公開するのはパスワードを公開するのと同様のリスクがあり、AWSリソースへのアクセスを許してしまうので、今回のような外部へ公開するHTML内に埋め込むのは避けなければなりません。

そこで、Cognito Identityの一時キー払い出し機能(Security Token Service)を使用します。

Cognito Identityを使用するには、AWSの管理コンソール画面からCognitoを選んで、Identity Poolというものを作成しなければなりません。

※現状、CognitoをサポートしているRegionが限られているため、「us-east-1」(N. Virginia)に切り替えてください。

「Amazon Cognito」の画面に遷ったら「New Identity Pool」をクリックします。

「Identity Pool Name」を入力し、「Enable Access to Unauthenticated Identities」のチェックボックスにチェックを付けます。
これは、認証(ログイン画面)を要求しないで、このIdentity Poolを使わせるという指定です。facebook IDやGoogleアカウントといった外部の認証プロバイダを使用することもできます。

「Create Pool」を押下すると、対応するIAM Roleを作成する画面が表示されます。既定値のまま「Update Roles」をクリックします。

すると、 Cognitoを使用するためのサンプルコードが表示されます。

生成された「Identity Pool ID」をメモったらCognitoの準備は完了です。

 

次にIdentity Pool作成時に自動作成されたIAM Roleに対して、使用したいAWSリソースへの権限をポリシーで追加します。

自動作成されたIAM Roleの画面で「Attach Role Policy」をクリックして、「Custom Policy」を選びます。

今回は特定のS3のバケットにファイルをPUTする権限のみを付与したいので、対象のバケット名(この例では「hyamauchitest2」)を記述して「”s3:PutObject”,”s3:PutObjectAcl”」権限を指定します。

 

最後に対象のS3バケットにJavaScriptからアクセスできるように CORS (Cross-Origin Resource Sharing)の設定を行います。

JavaScriptはドメインを跨いだ呼び出し、クロス ドメイン リクエスト (Cross-Domain Requests) に制限がかけられています。この制限を回避する伝統的な方法として、JSONP (Json with Padding) がありますが、Amazon S3はJSONP呼び出しをサポートしていません。対応するWebブラウザが限られるのですが、HTML 5 で仕様定義された Cross-Origin Resource Sharing (CORS) を使用する必要があります。これは、S3側がHTTPのAccess-Control-Allow-Origin ヘッダーにより呼び出しを許可するドメインの情報を Webブラウザに返すことで、クロス ドメインの呼び出しを許可する仕様です。S3バケットのプロパティから「Edit CORS Configuration」をクリックしてCORS Configuration Editorを開きます。

AllowOriginに 「お問い合わせフォーム」のHTMLファイルを置いたドメインを指定し、AllowedMethodに「PUT」のみを指定します。これでJavaScriptからこのBucketへ書き込むことができるようになります!

この設定を「*」などにしてしまうと、同じIdentity Pool IDを使って他のドメインからもアクセスすることができるようになってしまいます。

 

それでは全ての設定が完了したので、「お問い合わせフォーム」からsubmitして、書き込まれた結果を確認してみましょう。

 

うまく宛先Bucketにテキストファイルとして書き込むことができていますね。

 

でも、実要件では単にテキストファイルを書き込むのではなく、メールを送るとかDBへ書き込むといった要件の方が多いですよね。

次回はこの部分を解決する、AWS LambdaとS3 Event Notificationsをご紹介します。

 

※アイエンターではAmazon Web Services(AWS)を用いたサイト構築、ソリューション提案の実績が多数あります。様々なサービスに対する豊富な知見をもとに最適なご提案を行うことが可能です。お気軽にアイエンターへご相談ください!

 

Tags: ,

コメントを残す

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


*