認証イベントをリッスンする
認証イベントをタップすることで、ユーザーフローをリアルタイムで反応させ、カスタムビジネスロジックをトリガーできます。例えば、データをキャプチャし、アプリの状態を同期し、ユーザーエクスペリエンスをパーソナライズしたい場合があります。サインインやサインアウトなど、認証ライフサイクル全体のイベントをリッスンして対応することができます。このガイドでは、これらの認証イベントをリッスンする方法について説明します。
開始する前に、以下が必要です：
- 認証カテゴリが構成されたAmplifyプロジェクト
- インストールおよび構成されたAmplifyライブラリ
認証アクションに応じてトリガーされるハブイベントを公開する
Amplify Hubとその組み込みAmplify認証イベントを使用して、パブリッシュ-サブスクライブパターンを使用してリスナーをサブスクライブし、アプリケーションのさまざまな部分間のイベントをキャプチャできます。Amplify認証カテゴリは、アプリコードとは無関係にsignedInまたはsignedOutなどの認証イベントが発生したときに、authチャネルで公開します。
Amplify Hubガイドで詳細を確認できます。
authチャネルを通じて発行されたイベントをログに記録するリスナーをセットアップする基本的な例を以下に示します：
import { Hub } from 'aws-amplify/utils';
const listener = (data) => { console.log(data);};
Hub.listen('auth', listener);アプリがauthチャネルから特定のイベントタイプをサブスクライブしてリッスンするようにセットアップされると、イベントが発生したときにリスナーは非同期で通知されます。このパターンは1対多の関係を可能にし、1つの認証イベントがサブスクライブされた多くの異なるリスナーと共有されます。これにより、情報を積極的にポーリングするのではなく、イベントに基づいてアプリが反応できます。
さらに、リスナーをセットアップして、イベントペイロードからデータを抽出し、定義したコールバックを実行できます。例えば、signedInまたはsignedOutイベント後に、ユーザーの認証状態を反映するようにアプリのUI要素を更新したい場合があります。
認証イベントをリッスンしてログに記録する
最も一般的なワークフローの1つはイベントをログに記録することです。この例では、switchを使用して特定のauthイベントをターゲットにし、独自のメッセージをログに記録する方法を確認できます。
import { Hub } from 'aws-amplify/utils';
Hub.listen('auth', ({ payload }) => { switch (payload.event) { case 'signedIn': console.log('user have been signedIn successfully.'); break; case 'signedOut': console.log('user have been signedOut successfully.'); break; case 'tokenRefresh': console.log('auth tokens have been refreshed.'); break; case 'tokenRefresh_failure': console.log('failure while refreshing auth tokens.'); break; case 'signInWithRedirect': console.log('signInWithRedirect API has successfully been resolved.'); break; case 'signInWithRedirect_failure': console.log('failure while trying to resolve signInWithRedirect API.'); break; case 'customOAuthState': logger.info('custom state returned from CognitoHosted UI'); break; }});イベントのリッスンを停止する
Hub.listen()関数の結果を呼び出してメッセージのリッスンを停止することもできます。これは、アプリケーションフロー内でメッセージを受け取る必要がなくなった場合に役立つ可能性があります。これは、複数のチャネルでAmplify Hubを通じて大量のデータを送信している場合、低電力デバイスでメモリリークを回避するのに役立ちます。
特定のイベントのリッスンを停止するには、リスナー関数を変数でラップし、それが必要なくなったら呼び出します：
/* start listening for messages */const hubListenerCancelToken = Hub.listen('auth', (data) => { console.log('Listening for all auth events: ', data.payload.data);});
/* later */hubListenerCancelToken(); // stop listening for messagesこれで、認証イベントをリッスンして対応するためのいくつかのユースケースと例が得られました。
まとめ
おめでとうございます！認証イベントをリッスンするガイドを完了しました。このガイドでは、ワークフロー全体の認証イベントをリッスンする方法を学びました。
次のステップ
認証イベントをリッスンできるようになったので、追加機能を追加したい場合もあります。以下について詳しく学ぶことをお勧めします：