【個人開発調査】AWS cognitoを使う際のセッション情報管理方法

今回は、ReactでのS3にデプロイする際に、認証系のサービスcognitoを使う際でのセッション情報管理方法の調査をしていきます。個人開発アプリでどのライブラリを使ったらいいのか分からなかったので。。。

amplifyライブラリは不要

chatGPTに自分の認識が合っているか確認をします。

質問
amplifyを使わずに、S3に静的なreactをbuildしたファイルをアップします。
この場合は、amplifyライブラリは不要。
Amazon Cognitoのセッション情報は、amazon-cognito-identity-jsライブラリを使って管理。

amplifyライブラリを利用する場合は、AWS Amplifyサービスを利用する際にamplifyライブラリを利用する認識であってますか？

回答

はい、あなたの認識は基本的に正確です。詳しく確認していきましょう：

1. Amplifyを使わない場合：

   • S3に静的なReactのビルドファイルをアップロードする際、AWS Amplifyサービスや@aws-amplifyライブラリは必要ありません。
   • Amazon Cognitoのセッション情報の管理には、amazon-cognito-identity-jsライブラリを使用して実装することができます。これは、Cognito User Poolsと直接通信するためのクライアントサイドのJavaScriptライブラリです。

2. Amplifyライブラリを利用する場合：

   • @aws-amplifyライブラリは、AWS Amplifyサービスと連携するためのライブラリですが、それだけではありません。@aws-amplifyライブラリは、AWSの多数のサービス（Cognito、S3、AppSync、API Gatewayなど）と連携するための一般的なJavaScriptライブラリとしても機能します。
   • AWS Amplifyサービスを使用してプロジェクトをセットアップする場合、@aws-amplifyライブラリを使用すると、セットアップや統合が大幅に簡素化されます。しかし、Amplifyサービスを使用しない場合でも、@aws-amplifyライブラリはAWSの各サービスとの連携を容易にするために単独で利用することができます。

要するに、あなたの認識は正しいです。@aws-amplifyライブラリは特にAWS Amplifyサービスと連携する際に便利ですが、それ以外の用途でAWSサービスと連携する際にも使用できます。

amazon-cognito-identity-js導入方法

1. 必要なパッケージのインストール:

   npm install amazon-cognito-identity-js
   

2. Cognitoの設定とユーザープールの取得:

   import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';
   
   const poolData = {
     UserPoolId: 'YOUR_USER_POOL_ID',
     ClientId: 'YOUR_APP_CLIENT_ID'
   };
   
   // userPoolを関数内部で利用するためのヘルパー関数を用意します。
   function getUserPool() {
     return new CognitoUserPool(poolData);
   }
   

3. ログイン:

   function login(username, password) {
     const authenticationData = {
       Username: username,
       Password: password,
     };
     
     const authenticationDetails = new AuthenticationDetails(authenticationData);
   
     const userData = {
       Username: username,
       Pool: getUserPool(),
     };
     
     const cognitoUser = new CognitoUser(userData);
   
     cognitoUser.authenticateUser(authenticationDetails, {
       onSuccess: (session) => {
         console.log('ログイン成功', session);
       },
       onFailure: (err) => {
         console.error('ログイン失敗', err);
       }
     });
   }
   

4. セッション情報の取得:

   function getSession() {
     const cognitoUser = getUserPool().getCurrentUser();
   
     if (cognitoUser) {
       cognitoUser.getSession((err, session) => {
         if (err) {
           console.error('セッションの取得に失敗', err);
           return;
         }
         
         if (session.isValid()) {
           console.log('セッションは有効です', session);
         } else {
           console.log('セッションは無効です');
         }
       });
     } else {
       console.log('ユーザーがログインしていません');
     }
   }
   

5. ログアウト:

   function logout() {
     const cognitoUser = getUserPool().getCurrentUser();
     
     if (cognitoUser) {
       cognitoUser.signOut();
     }
   }
   

セッションを管理について

Amazon Cognito Identity SDK for JavaScriptによるセッションの管理は、主にクライアントサイドで行われます。具体的には、ブラウザのLocalStorageやSessionStorageを利用してセッション情報（トークンなど）を保持しています。ユーザがログインすると、Cognitoから返されるJWT (JSON Web Token) などのトークン情報が、クライアントサイドで保存されます。

上記の実装における主なセッション管理の部分は以下のとおりです：

1. ログイン時:

   • cognitoUser.authenticateUser() メソッドを使用して、ユーザの認証を試みます。
   • 認証が成功すると、CognitoからJWTトークン（IDトークン、アクセストークンなど）が返されます。
   • これらのトークンは、SDK内部で自動的にブラウザのLocalStorageまたはSessionStorageに保存されます。

2. セッション情報の取得:

   • cognitoUser.getSession() メソッドを使用して、現在のセッション情報を取得します。
   • このメソッドは、LocalStorageまたはSessionStorageからトークンを取得し、そのトークンの有効性を検証します。
   • トークンが有効であれば、セッションは有効と見なされます。

3. ログアウト時:

   • cognitoUser.signOut() メソッドを使用して、ユーザをログアウトさせます。
   • このメソッドは、LocalStorageまたはSessionStorageからトークンを削除し、ユーザのセッションを終了させます。

このように、Amazon CognitoとそのJavaScript SDKは、クライアントサイドのセッション管理を行うための手段を提供しています。これにより、開発者はセッションの状態やトークンの管理に関する複雑な作業を気にすることなく、認証や認可の機能をアプリケーションに組み込むことができます。