はじめに

この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」「何か始めてみたい」という方向けの連載シリーズ④です。（③はこちら）
「30分で学習できる」をテーマに毎週金曜日に更新します。ぜひ私と一緒に取り組んでみてください！私自身も初めての挑戦となりますので、間違いや補足がありましたら教えていただけると嬉しいです。
※このブログでの作業は全て macOSで行なっています。

 

ユーザーを管理する

前回のブログで「静的Webサイトをホストする」の作成が完了しました。今回から「ユーザーを管理する」に取り組みます。使用するガイドはこちらです。（モジュール２：ユーザーを管理する）

このモジュールでは、ユーザーのアカウントを管理するための Amazon Cognito ユーザープールを作成します。ユーザープールを作成することで、顧客が新しいユーザーとして登録し、自分の E メールアドレスを確認して、サイトにサインインできるようになります。

 

Amazon Cognito ユーザープールを作成し、アプリをユーザープールと結合する

AWS公式ガイドとはUIがかなり変わっています。あまり気にせず、本ブログの手順を参考に進めてみてください。

１Amazon Cognito コンソールを開きます。ユーザープールの作成前に、リージョンが前回までのチュートリアルで使用したものと同じか確認してください。
2.左側の３本線をクリックしてタブを開き、「ユーザープール」を選択します。
3.オレンジ色の「ユーザープールを作成」を選択します。
4.下記設定を選択し、「ユーザーディレクトリを作成する」を選択します。

アプリケーションタイプ：シングルページアプリケーション
アプリケーションに名前をつける： WildRydesWebApp
サインイン識別子のオプション：ユーザー名
自己登録：チェックあり
サインアップのための必須属性：email
リターンURLを追加：なし

5.もう一度手順２の「ユーザープール」を選択します。
6.自分が作成したユーザープールを選択します。「User pool – -zb89n」のような名前です。
7.「ユーザープールIDを控えます。どこかにメモしておきましょう。

8.左側の３本線のタブから、「アプリケーション」＞「アプリケーションクライアント」を選択します。クライアントIDを控えます。

以上で完了です。

ウェブサイトの設定ファイルを更新する

1.自身のファイルアプリで「wildrydes-site」と検索し、開きます。
2.「js」＞「config.js」をテキストエディットで開きます。下記を先ほど取得した値に書き換えます。画像では２箇所に同じ値を入れていますが、「//」の後ろはコメントなので消してしまっても問題ありません。

userPoolId：ユーザープールID
userPoolClientId:クライアントID
region：ap-northeast-1　※東京の場合　大阪の場合はap-northeast-3です。


これで「Amazon Cognito ユーザープールを作成し、アプリをユーザープールと結合する」は完了です。

 

実装を検証する

1.Finder（ファイルアプリ）で「wildrydes-site 」フォルダを開きます。
2.中にある「/register.html 」を開きます。
3.メールアドレス、パスワードを入力して、「LET’S RYDE」ボタンを押します。パスワードを忘れないように、どこかにメモしておきましょう。

成功すると、「Registration successful. Please check your email for your verification code」と書かれたポップアップが表示されます。

 

ボタンを押しても何も起こらなかった場合

何らかのエラーになっている可能性があります。デベロッパーツールを確認します。「F12キー」または「Shift + F12キー」を押すと開くことができます。
私の場合はFailed to load resource: net::ERR_FILE_NOT_FOUNDと書いてありました。
このエラーは、パス記述方式が「ルート相対パス」となっていることが原因です。こちらを「相対パス」に書き換えることで解決できます。

解決策

「register.html」のファイルをテキストエディットで開きます。

19行目のlink rel="stylesheet" href="/css/message.css"を探して先頭ににあるスラッシュを削除し、href="css/message.css" に書き換えます。

 

保存してファイルを閉じます。
「/register.html 」に戻って再度実行してみてください。

「There is no user pool …」と出てきた場合

画像のようになってしまった方は。先ほど書き換えた「config.js」が間違っているか、正しく保存されていない可能性があります。
特にリージョンが自身のCognito ユーザープールを作成したものと同じか再確認してみてください。

ログイン認証を成功させることができたでしょうか。これで「モジュール 2: ユーザーを管理する」の全項目が完了しました。お疲れ様でした！
私は今回のエラー解決を通じて、相対パスの仕組みを学ぶことができました。AWSコンソールの扱いにもだいぶ慣れてきたと思います。
次回は「モジュール 3: サーバーレスサービスバックエンド」を進めていきます。4/17(金)の更新をお楽しみに！