こんにちは、AI/BI部の前村です。

今回は「AWSのCognitoというサービスを利用して簡易的なログイン機能を実装する」というテーマで記事を書きたいと思います。

Cognitoとは

Amazon Cognitoとは、Webアプリケーションなどでユーザの認証（ログイン、ログアウト）などの機能を実装できるサービスです。

Webアプリケーションを作成するときに、自前でユーザ管理の機能を実装することもできますが、このCognitoを利用すると、UI上で簡単な設定をするだけでユーザ管理を実装できます。

今回は、Next.jsで作ったフロントエンド画面に、Cognitoでのユーザ管理を実装したものを紹介します。

Amazon Cognito ドキュメント

https://docs.aws.amazon.com/ja_jp/cognito/

Cognitoの設定

ユーザープールの作成

Amazon Cognitoのアプリケーションページに移動し、ユーザープールの作成を行いましょう。

ユーザープールの作成時には、以下の様々なオプションを設定できます。

アプリケーションタイプ、アプリケーション名、サインインオプション、リターンURLなどのオプションを設定できます。

サインインオプションに関してはあとから変更することができないので、ここは作成するアプリに合わせて慎重に決定する必要があります。

設定例は以下のキャプチャを参照。

アプリケーションクライアント

ユーザープールを作成したら、アプリケーションクライアントを作成しましょう。

ここで作成するアプリケーションクライアントの情報を利用してコーディングを行うことになります。

アプリケーションタイプ、アプリケーション名、リターンURLを設定します。

設定例は以下のキャプチャを参照。

Webアプリに組み込む

アプリケーションクライアントを作成すると、Quick Setupガイドタブに設定サンプルコードが記載されています。今回はこれを利用します。

以下のキャプチャは、Reactの場合の実装例。

これによって設定した画面のSign inをクリックすると、以下のようなCognitoによって用意されているログイン画面に遷移します。

ここにAWS上で登録したユーザー情報でログインするとリダイレクトに設定されたページに遷移します。

このログイン画面はUI上からスタイルを自由に変更することができる。Cognitoの中の「マネージドログイン」からログイン画面のカスタマイズが可能です。

言語に関しては英語固定になるが、ログイン画面の遷移URLに「lang=ja」のパラメータを付与することで上記の通りログイン画面の言語を日本語にすることができます。

まとめ

この一通りの実装により、Cognitoを利用してログイン機能を実装することができました。

簡易なWebアプリを実装するときなどは自前でユーザー管理を実装するより手軽なので、Cognitoを利用するのも選択肢として良いかもしれません。