メインコンテンツまでスキップ

セッション管理: Cookie vs ローカルストレージ

Webアプリケーションを構築する際には、ユーザーセッションを管理する必要があります。これには、認証トークン、ユーザーの設定、ページのリロードをまたいで保持する必要があるデータの保存が含まれます。

NodeblocksフロントエンドSDKは、セッション管理を行うために2つの方法を提供しています：クッキーとローカルストレージです。このガイドでは、フロントエンドでのセッション管理の設定方法と、クッキーとローカルストレージの違いについて説明します。

アクセストークンのリフレッシュ​

Nodeblocks認証サービスは、リフレッシュトークンを使用してアクセストークンをリフレッシュする方法を提供しています。フロントエンドフレームワークではこれが必須であり、フロントエンドはアクセストークンの期限が切れる前に自動的にリフレッシュします。

バックエンドセッションの設定​

フロントエンドを設定する前に、バックエンドサービスがセッション管理を正しく処理するように設定されていることを確認してください。たとえば、Nodeblocksサービスをクッキーで使用する場合は、次のように設定します。

import {
  createNodeblocksXApp,
  defaultAdapter,
} from '@basaldev/blocks-xxx-service';
import {
  crypto,
  security,
} from '@basaldev/blocks-backend-sdk';

const adapter = await defaultAdapter.createXXXServiceAdapter(
{
  authenticate: security.defaultCookieAuth,
  ...
}, { ... });

...


await createNodeblocksOrderApp({
  corsOptions: {
    credentials: true,
    origin: [...], // サーバーへのアクセスを許可するURLのリスト
  },
  enableCookieParser: true,
}).startService({
  ...
  adapter,
});

ローカルストレージを使用する場合、enableCookieParser を false に設定し、authenticate を security.defaultBearerAuth に設定する必要があります。

また、カスタムセッション管理を行う場合は、自分で authenticate メソッドを作成し、それを createXXXServiceAdapter 関数に渡すことができます。

フロントエンドセッションの設定​

NodeblocksフロントエンドSDKは、ユーザーセッションを管理するための SessionService インターフェースを提供しています。SDKには、SessionService インターフェースの2つの実装が含まれており、それぞれ CookieSessionService と LocalStorageSessionService です。これらを使用して、クッキーまたはローカルストレージを用いたセッション管理が可能です。また、SessionService インターフェースのカスタム実装を作成することもできます。

CookieSessionService はバックエンドの defaultCookieAuth メソッドと連携するように設計されており、LocalStorageSessionService は defaultBearerAuth メソッドと連携するように設計されています。

CookieSessionService​

CookieSessionService を使用するには、CookieSessionService クラスのインスタンスを作成し、それをAPIクライアントやフロントエンドフレームワークのテンプレートに渡す必要があります。

import { api, session } from '@basaldev/blocks-frontend-sdk';

const sessionService = new session.CookieSessionService();
const authApi = new api.AuthDefaultAdapterApi(
  'https://auth.example.com',
  sessionService
);

CookieSessionService クラスはクッキーに直接アクセスしません（SecureおよびHttpOnlyフラグが設定されているため）。代わりに、アクセストークンをリフレッシュする際のレスポンスコードを使用して、ユーザーが認証されているかどうかを判断します。

通常、バックエンドによって設定されると想定されているクッキーは以下の通りです。

  • accessToken - 暗号化されたアクセストークン
  • refreshToken - 暗号化されたリフレッシュトークン

使用されるローカルストレージキーは以下の通りです。

  • nbc-fingerprint - このデバイスを識別するために生成されたフィンガープリント。フィンガープリントは、ログイン時に使用されたデバイスと同じかどうかを判断するために使用されます。

トラブルシューティング​

CookieSessionService を使用して認証できない場合は、以下を確認してください。

  • ローカル環境でhttpsを使用しているか確認してください（セキュアクッキーはhttpsを必要とします）。
  • バックエンドの authenticate が security.defaultCookieAuth に設定されていることを確認してください。
  • フロントエンドとバックエンドで異なるドメインを使用している場合、バックエンドの corsOptions に credentials: true が指定されていることを確認してください。

LocalStorageSessionService​

LocalStorageSessionService を使用するには、LocalStorageSessionService クラスのインスタンスを作成し、それをAPIクライアントやフロントエンドフレームワークのテンプレートに渡す必要があります。

import { api, session } from '@basaldev/blocks-frontend-sdk';

const sessionService = new session.LocalStorageSessionService();
const authApi = new api.AuthDefaultAdapterApi(
  'https://auth.example.com',
  sessionService
);

LocalStorageSessionService クラスは、localStorage API を使用してアクセストークンとリフレッシュトークンを保存します。アクセストークンは、自動的にバックエンドに送信されるリクエストで使用されます。

使用されるローカルストレージキーは以下の通りです。

  • nbc-tokens - 暗号化されたアクセストークンとリフレッシュトークン（オブジェクトとして保存）
  • nbc-fingerprint - このデバイスを識別するために生成されたフィンガープリント。フィンガープリントは、ログイン時に使用されたデバイスと同じかどうかを判断するために使用されます。

クッキーとローカルストレージの違い​

クッキーとローカルストレージには異なる使用ケースがあります。一般的に、セッション管理にはクッキーを使用する方が安全です。これは、クッキーがクロスサイトスクリプティング攻撃に対してより安全だからです。しかし、Webアプリケーションがクロスオリジンで動作する必要がある場合、CORS制限のためにクッキーを使用するのが難しい場合があります。

危険

Nodeblocksでは、ローカルストレージでのベアラートークンアクセスに追加の制限があります。

  • ユーザーエージェントとIPアドレスは、元のログインリクエストと一致する必要があります。両方が一致しない場合、リクエストは認証に失敗します。