AWS Amplifyを使って認証アプリを作ろう(AWS Amplify設定編)

会員登録と認証機能を備えたモバイルアプリ

AWS AmplifyとMonacaを使用して、会員登録と認証機能を中心としたモバイルアプリの開発を行います。

完成するアプリでは、ユーザーは新規登録、サインイン、パスワードリセットなどの基本的な認証プロセスを利用できます。

記事は、全部で3回に分けており、1回目になるこの記事ではアプリの概要と、AWS Amplifyの初期設定について説明します。

こちらは完成する画面のイメージです。

AWS AmplifyとMonacaを組み合わせるメリット

AWS Amplifyは、クラウドベースのアプリケーション開発をシンプルするためのツールセットです。

このツールは、認証、データストレージ、バックエンドロジックなどの機能を迅速に導入できるように設計されています。本記事では認証サービスのみを利用します。

一方、Monacaはクロスプラットフォームのモバイルアプリ開発を容易にします。AWS AmplifyとMonacaを組み合わせることで、開発者は素早くアプリを構築し、広範なAWSサービスを活用することができます。

利用する技術・ライブラリ

このアプリで利用している技術やライブラリは次の通りです。

バックエンド

Amazon Amplify (AWS)

今回作成するアプリでは、Amplifyの認証サービスのみを利用します。

Amplifyの認証機能は、内部的にはAmazon Cognitoが利用されています。Amazon Cognitoは、ウェブやモバイルアプリケーションに安全で信頼性の高い認証システムを提供するサービスです。このサービスを利用することで、アプリはユーザーの認証情報を安全に管理し、サインアップやサインインなどの認証プロセスを効率的に処理できるようになります。

フロントエンド

JavaScript
AWS Amplify JavaScript ライブラリ： V6

フロントエンドではAWSが提供している「AWS Amplify JavaScript ライブラリ」を使い、Monacaのプロジェクトに組み込みます。

アプリの仕様

このアプリの主な仕様は次の通りです。

サインアップ機能：
- 新規ユーザーは、メールアドレスとパスワードを使用してアカウントを作成できます。
- ユーザー登録後、確認コードがメールで送信され、アカウントの確認が必要です。
サインイン機能：
- 既存のユーザーは、メールアドレスとパスワードを使用してサインインできます。
- 認証情報は安全に管理され、AWS Cognitoを通じて処理されます。
パスワードリセット機能：
- ユーザーはパスワードを忘れた場合、メールアドレスを使用してパスワードリセットをリクエストできます。
- パスワードリセット用の確認コードがメールで送信されます。

第2回の記事で、認証機能の実装方法を詳しく説明します。

サンプルアプリのインポート

今回はこちらのリンクをクリックしてサンプルプロジェクトをインポートしてください。

プロジェクトがインポートできたら、monaca-cli を使ってローカル環境にプロジェクトをクローンします。
(AWS Amplifyのコマンドを使って設定をするため、ローカル環境での開発をおすすめします。)

npm install -g monaca
monaca login
monaca clone

以降の作業は、ローカル環境でクローンされたプロジェクトのルートディレクトリにて行っていきます。

AWS Amplifyのセットアップ

Amplify CLIのインストール

AWS Amplify CLI（コマンドラインインターフェース）は、Amplifyを使用してアプリケーションを開発するための主要ツールです。インストールは、以下のコマンドをローカル環境で実行するだけです：

npm install -g @aws-amplify/cli

AWSアカウントの設定

Amplifyを利用するには、AWSアカウントが必要です。
アカウントを持っていない場合は、AWSの公式ウェブサイトで登録をお願いします。

Amplifyプロジェクトの初期化

初期化

プロジェクトのルートディレクトリで以下のコマンドを実行します：

amplify init

このプロセスでは、プロジェクト名、環境名、使用するエディター、アプリタイプ、フロントエンドやバックエンドの設定などを指定します。

今回のサンプルアプリでは、下記のとおり初期設定（デフォルトの設定）を利用します。

Project information
| Name: amplifysample
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start

認証方法の選択

Amplify CLIを初期化する際、AWSの認証情報を設定する必要があります。

認証方法としては、AWS profile または AWS access keysのいずれかを選択できます。

以下はAWS access keysを使用する方法です。リーションは ap-northeast-1 （アジアパシフィック（東京））を選択しました。

? Select the authentication method you want to use: AWS access keys
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
? region:  ap-northeast-1

AWSのアクセスキー（accessKeyId と secretAccessKey）は、AWSのIdentity and Access Management（IAM）コンソールで生成できます。IAMユーザーを作成し、適切な権限を付与した後、セキュリティクレデンシャルタブからアクセスキーを取得してください。今回は AdministratorAccess-Amplify 権限を持つIAMユーザーを作成しました。

認証機能の追加

Amplifyでの認証機能の追加は、以下のコマンドで行います：

amplify add auth

このコマンドを実行すると、プロンプトに従ってユーザー認証の設定を行います。

最初に、認証とセキュリティに関する設定を行います。

ここでは、システムが提供する初期設定（デフォルトの設定）を採用します。

下の内容は、amplifyコマンドを実行したときに表示されるプロンプトです。

Do you want to use the default authentication and security configuration? Default configuration

次に、ユーザーがどのようにサインインするかを決定します。
このアプリケーションでは、「Email」による認証方法を選択します。

下のように、amplifyコマンドで「Email」を設定しています。

 How do you want users to be able to sign in? Email

この設定により、ユーザーは自分のメールアドレスをユーザー名として使用し、それに紐づくパスワードでアカウントにログインできるようになります。

この選択によって、メールアドレスを主な識別情報として活用することが可能になり、ユーザーは簡単にサインアップやサインインを行うことができます。

バックエンドリソースのデプロイ

AWSへのデプロイ

設定済みのバックエンドリソース（例：認証機能、API、ストレージ）をAWSにデプロイする際には、次のコマンドを実行します。

amplify push

これにより、設定したリソースがクラウドにデプロイされ、アプリケーションが使用する準備が整います。

まとめ

この記事では、AWS AmplifyとMonacaを利用してモバイルアプリ開発の基盤を設定する方法を説明しました。

主に、AWS Amplifyのセットアップ、認証機能の追加、およびバックエンドリソースのデプロイに焦点を当てました。これにより、セキュアなユーザー認証機能を備えたアプリの基礎が構築されました。

次回の記事では、実際にAmplifyをMonacaプロジェクトに組み込み、フロントエンドの実装を行います。具体的には、ユーザーがアプリ内で新規登録、サインイン、パスワードリセットなどの認証関連のアクションを行えるようにするプロセスを取り上げます。