認証フローとは何ですか?

認証フローは、ユーザーの身元を確認し、アプリケーションの特定の部分へのアクセスを管理するプロセスです。 Web アプリ (ソーシャル メディア サイトなど) を操作する場合、ユーザーが本人であるかどうかを確認し (ログイン)、特定の機能へのアクセスを許可する必要があります。

React ではどのように機能するのでしょうか?

React では、ユーザー認証を処理する場合、通常、面倒な作業を処理するバックエンド サーバーと対話します。通常の動作は次のとおりです:

1. 登録およびログインエンドポイント

• 登録エンドポイント: 新しいユーザーがサインアップすると、詳細情報 (ユーザー名、電子メール、パスワードなど) がサーバーに送信されます。その後、サーバーはそのユーザーのアカウントを作成します。
• ログイン エンドポイント: 既存のユーザーがログインすると、ユーザー名とパスワードがサーバーに送信されます。サーバーはこれらの詳細が正しいかどうかを確認します。

2. トークン: アクセストークンとリフレッシュトークン

ログインに成功すると、サーバーは 2 つの重要なトークンを送り返します:

• アクセストークン:

  • これは、ユーザーがアプリの特定の機能にアクセスできるようにする短期パスのようなものです。通常、有効期間は短いです (この場合は 5 分)。
  • ユーザーがリクエスト (プロフィールの表示や投稿など) を行うたびに、ログインしていることを証明するためにこのトークンがサーバーに送信されます。

• リフレッシュトークン:

  • これは、アクセス トークンの有効期限が切れたときに使用されるバックアップ パスのようなものです。より長持ちします。
  • アクセス トークンの有効期限が切れると (5 分後)、ユーザーに再度ログインさせる代わりに、アプリは更新トークンを使用して新しいアクセス トークンを取得できます。

3. ブラウザにトークンを保存する

ユーザーがログインしてこれらのトークンを受け取ったら、アプリはそれらをユーザーのデバイス上のどこかに保存する必要があります。ここで localStorage が登場します:

• localStorage: これは、ユーザーのブラウザにデータ (トークンなど) を保存できるようにする Web ブラウザの機能です。
  • setItem() メソッド: データを保存するために使用されます。たとえば、localStorage.setItem('accessToken', tokenValue).
  のようなものを使用して、アクセス トークンとリフレッシュ トークンを保存します。
  • getItem() メソッド: 保存されたデータを取得するために使用されます。たとえば、localStorage.getItem('accessToken').
  のようなものを使用して、保存されたアクセス トークンを取得します。

4. アクセストークンを使用したリクエスト

ユーザーがサーバーとの対話を必要とする操作 (ステータスの投稿やメッセージの表示など) を行うたびに、アプリは Authorization ヘッダー にアクセス トークンが添付されたリクエストをサーバーに送信します。これにより、ユーザーがログインしていてアクションの実行が許可されていることをサーバーに伝えます。

5. 期限切れのトークンの処理

• アクセス トークンの有効期限: サーバーが 401 エラーで応答した場合、アクセス トークンの有効期限が切れたことを意味します。その後、アプリはリフレッシュ トークンを使用して新しいアクセス トークンをリクエストします。

• リフレッシュ トークンの有効期限: リフレッシュ トークンの有効期限も切れている場合 (長時間経過すると発生する可能性があります)、サーバーは再び 401 エラーで応答します。この時点で、アプリはユーザーをログイン ページにリダイレクトし、新しいトークンを取得するために再度ログインするように求めます。

6. 失敗したリクエストの再送信

アプリがリフレッシュ トークンを使用して新しいアクセス トークンを取得すると、トークンの有効期限が切れたために失敗した元のリクエストが再送信されます。こうすることで、ユーザーは中断を経験することはありません。

まとめ

• 認証フロー: これは、アプリがユーザーを確認し、機能へのアクセスを許可する方法です。
• アクセス トークン: アプリ内のリソースにアクセスするための短期キー。すぐに期限切れになります。
• リフレッシュ トークン: 古いアクセス トークンの有効期限が切れたときに新しいアクセス トークンを取得するための長期バックアップ キー。
• localStorage: これらのトークンをユーザーのデバイスに保存するブラウザの方法。
• Authorization Header: サーバーへのリクエストにアクセス トークンが含まれます。
• 401 エラー: トークンの有効期限が切れており、アプリがアクションを実行する必要があることを示す信号 (トークンを更新するか、ユーザーに再度ログインするよう求める)。

このフローにより、ユーザーは常に認証情報を再入力することなく、ログイン状態を維持してアプリを安全に使用できるようになります。