Contents
AWS CognitoとAmplifyの連携ガイド概要
AWS CognitoとAmplifyを組み合わせた認証システム構築を、開発者が理解しやすい形で解説します。本記事では、Cognito と Amplify の連携 手順を基盤に、プロジェクト初期からAPI接続までの一連の流れを網羅します。特に、フレームワークや設定オプションにおける差異を明確にし、最新バージョンに対応した情報を提供します。
ゼロから認証機能を構築する手順
AWS Cognitoはユーザー管理と認証を担当し、Amplifyはフロントエンドとの連携を担う技術スタックです。両者の連携により、開発者は効率的に認証システムを構築できます。Cognito と Amplify の連携 手順の理解が、初期設定から本番環境までのスムーズな導入に不可欠です。
Cognitoユーザープールの作成手順
認証機能の基盤となるCognitoユーザープールを作成するには、AWSコンソールでの初期設定とアプリケーションクライアントの生成が必須です。以下にステップバイステップで説明します。
AWSコンソールでの初期設定
Cognitoユーザープールの作成フローは以下の通りです：
-
AWS Management Consoleにログインし、「Cognito」サービスを開きます。
ユーザープールを作成する際には、事前にAWSアカウントとIAM権限を確認してください。
-
「[+] Create a user pool」をクリックし、プール名（例:
my-auth-pool）を入力します。プール名はプロジェクトごとに一意である必要があります。
-
「Self-service sign-up」や「Password policy」の設定を行います。
- 「Password policy」で最小文字数や特殊記号の有無を指定できます。
-
「Self-service sign-up」をONにすると、ユーザーが自主的に登録できるようになります。
-
「Review and create」をクリックしてユーザープールを作成します。
アプリケーションクライアントの生成
アプリケーションクライアント設定の要点は以下の通りです：
| 項目 | 値 | 補足 |
|---|---|---|
| Client ID | my-app-client-id |
Amplifyとの連携に必要 |
| Client Secret | my-secret-key |
セキュリティ上、ローカル保管することを推奨 |
- 作成したユーザープールを選択し、「Apps」タブを開きます。
- 「[+] Add an app client」をクリックし、アプリケーション名（例:
my-app-client）を入力します。 - 「Generate client secret」は必要に応じてON/OFF設定します。
- 実装環境が信頼できる場合はONにしてセキュリティを高めます。
- 生成された「Client ID」と「Client Secret（必要時）」をメモしておきます。
Amplify CLIプロジェクトの初期化
Amplify CLIを使用することで、AWSリソースとフロントエンドアプリケーションを連携できます。CLI導入からプロジェクト初期化までの手順を以下に記載します。
CLIインストールとプロジェクト作成
Amplify CLI導入の基本手順は以下の通りです：
-
CLIのグローバルインストール:
bash
npm install -g @aws-amplify/cli -
プロジェクト初期化:
bash
amplify init -
設定項目の選択例:
- Project name:
my-auth-app（任意） - AWS profile: 事前に作成したプロファイル（例:
default）
AWSプロファイルは、認証情報取得に不可欠です。誤ったプロファイルを選択すると、後続の操作でエラーが発生します。
環境変数設定確認
環境変数の重要性と管理方法:
.envファイルを作成し、以下のようにAWSプロファイル情報を記載します:
env
AWS_PROFILE=my-profile-name
注意:
.envファイルはGitなどにコミットしないようにして、ローカル環境で保管してください。
Authカテゴリの設定方法
Amplify CLIを用いてAuthカテゴリを追加することで、Cognitoプールとの連携が完了します。以下にコマンド実行手順とオプション選択フローを記載します。
amplify add auth コマンド実行
CLIでのAuthカテゴリ設定フロー:
-
プロジェクトルートディレクトリで以下のコマンドを実行:
bash
amplify add auth -
インタラクティブな質問に回答:
- Do you want to use an existing authentication provider? →
No（新規作成の場合） - What attributes are required for sign-up? → 必要な属性を選択（例: Email, Username）
- Which social providers should be supported? → サポートしない場合、
Noと回答 - Do you want to add multi-factor authentication (MFA) to users? → 任意の設定（詳しくは以下を参照）
MFA構成の選択フロー
MFAの推奨設定とその理由:
| モード | 説明 | 推奨用途 |
|---|---|---|
| Optional | ユーザーが任意で使用可能 | 一般ユーザー向け（セキュリティと利便性のバランス） |
| Required | 登録時から強制的に有効 | 管理者アカウントや高セキュリティなアプリケーション |
MFAはセキュリティを高めるため、ユーザーに教育が必須です。特に「Required」モードでは、初期登録時の説明が重要です。
フロントエンドコードへの連携手順
Amplify CLIでAuthカテゴリを設定した後、フロントエンドに認証機能を実装します。React/Vueなどでの実装例と差異を比較します。
Authモジュールのインポート
フレームワークごとの違い:
- React:
@aws-amplify/authを直接インポートできます。 - Vue:
vue-amplifyなどのラッパーが必要な場合があります。
以下はReact用のコード例です。他のフレームワークでも基本的な構造は共通しますが、ライブラリやコンポーネントの仕様に注意してください。
|
1 2 |
npm install aws-amplify @aws-amplify/auth |
|
1 2 |
import { Auth } from '@aws-amplify/auth'; |
サインアップ/ログイン機能実装例
Reactでの実装例（共通処理）:
1. サインアップ処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const signUp = async (email, password) => { try { await Auth.signUp({ username: email, password: password, attributes: { email: email } }); console.log("サインアップ成功"); } catch (error) { console.error("サインアップ失敗:", error); } }; |
2. ログイン処理
|
1 2 3 4 5 6 7 8 9 |
const signIn = async (email, password) => { try { const user = await Auth.signIn(email, password); console.log("ログイン成功", user); } catch (error) { console.error("ログイン失敗:", error); } }; |
注意: 実際のアプリでは、入力チェックやエラーハンドリングを追加してください。
ホストされたAPIとの接続確認
Amplify APIカテゴリとCognitoプールを連携させることで、認証付きエンドポイントにアクセスできます。以下に手順を解説します。
認証付きエンドポイントのテストフロー
Postmanやブラウザコンソールでの確認方法:
- Cognitoでユーザーをサインインし、アクセストークンを取得:
-
Auth.signIn()を実行後、返却されるuser.getSignInUserSession().getAccessToken().getJwtToken()を使用します。 -
リクエストヘッダーにトークンを設定（例:
Authorization: Bearer <access_token>）。 -
APIエンドポイントへのGET/POSTリクエスト送信:
- 事前にCognitoで承認されたオペレーションのみ許可されます。
まとめ
本記事では、AWS CognitoとAmplifyの連携方法を具体的な手順で解説しました。以下が重要なポイントです：
- ユーザープール作成からアプリケーションクライアント生成まで、ステップバイステップで実施すること
- Amplify CLI初期化時にAWSプロファイル設定を忘れずに入力すること
- Authカテゴリの設定時にはMFAや属性選択など細かいオプションを確認すること
- フロントエンドコードへの連携では、React/Vueそれぞれの特性を意識した実装を行うこと
記事を参考にAWS環境で認証機能の実装を試してみましょう。