@blocklet/ui-react/docs/components-user-management-user-sessions.ja.md

Some useful front-end web components that can be used in Blocklets.

# UserSessions

`UserSessions` コンポーネントは、ユーザーのログインセッションを表示および管理するための包括的なデータテーブルをレンダリングします。さまざまなデバイスにわたるすべてのアクティブ、期限切れ、オフラインのセッションの明確な概要を提供し、ユーザーがアカウントのセキュリティを管理できるようにします。

このコンポーネントは、セッション管理機能を実装する必要がある開発者向けのプラグアンドプレイソリューションとして設計されています。データの取得、ページネーション、UIのレンダリング、および特定のセッションからのログアウトなどのアクションを処理します。

## 機能

- **セッションのフィルタリング:** ユーザーはセッションをステータス（`online`、`expired`、または `offline`）で簡単にフィルタリングできます。
- **詳細情報:** 各セッションエントリには、オペレーティングシステム、デバイスタイプ（ブラウザ）、ウォレットOSなど、解析されたユーザーエージェントデータが表示されます。
- **IPジオロケーション:** 最終ログインIPアドレスに基づいて地理的な地域を自動的に解決し、表示します。
- **セッションの終了:** ユーザーは現在のセッションを除く任意のセッションを終了させることができます。
- **一括操作:** 特定のステータスのすべてのセッションを終了させる「すべてログアウト」機能が含まれています。
- **レスポンシブデザイン:** さまざまな画面サイズに適応し、デスクトップとモバイルデバイスの両方で一貫したユーザーエクスペリエンスを保証します。

## 仕組み

`UserSessions` コンポーネントは、開発者が提供する関数からセッションデータを要求することによって動作します。この設計により、コンポーネントは特定のバックエンド実装から切り離され、より大きな柔軟性が提供されます。

<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
![UserSessions](assets/diagram/user-sessions-diagram-0.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 使用方法

`UserSessions` コンポーネントを使用するには、`user` オブジェクトと `getUserSessions` 関数を提供する必要があります。`getUserSessions` 関数は、バックエンドサービスからセッションデータを取得する役割を担います。

```javascript Integration Example icon=lucide:code
import { UserSessions } from '@arcblock/blocklet-ui-react';
import { client } from './libs/client'; // API クライアントインスタンス

// セッションが表示される対象のユーザーオブジェクト。
const currentUser = {
  did: 'z1...',
  name: 'Alice',
  // 他のユーザープロパティ
};

/**
 * この関数はバックエンドからセッションデータを取得します。
 * UserSessions コンポーネントは、新しいデータが必要になるたびにこの関数を呼び出します。
 *
 * @param {object} params - クエリパラメータ。
 * @param {number} params.page - 現在のページ番号。
 * @param {number} params.pageSize - ページごとのアイテム数。
 * @param {string} params.status - フィルタリングするセッションのステータス（'online'、'expired'、'offline'）。
 * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} セッションデータに解決される Promise。
 */
const fetchUserSessions = async ({ page, pageSize, status }) => {
  const response = await client.user.getSessions({
    page,
    pageSize,
    status,
  });

  // 返り値の形式がコンポーネントの要件と一致することを確認
  return {
    list: response?.list || [],
    paging: {
      total: response?.paging?.total || 0,
    },
  };
};

export default function MyAccountSessionsPage() {
  return (
    <div>
      <h2>ログインセッションの管理</h2>
      <UserSessions
        user={currentUser}
        getUserSessions={fetchUserSessions}
      />
    </div>
  );
}
```

## Props

`UserSessions` コンポーネントは、その動作と外観をカスタマイズするために以下の props を受け入れます。

<x-field-group>
  <x-field data-name="user" data-type="User" data-required="true">
    <x-field-desc markdown>セッションが表示される対象のユーザーオブジェクト。コンポーネントは、セッションリストにコンテキストを提供するためにこれを必要とします。</x-field-desc>
  </x-field>
  <x-field data-name="getUserSessions" data-type="function" data-required="true">
    <x-field-desc markdown>バックエンドからページ分割されたセッションデータを取得する役割を担う非同期関数。`page`、`pageSize`、`status` を含むオブジェクトを受け取り、`{ list: UserSession[], paging: { total: number } }` という形式のオブジェクトに解決される `Promise` を返す必要があります。</x-field-desc>
  </x-field>
  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
    <x-field-desc markdown>ログアウトボタンを含む「アクション」列の表示を制御します。`false` に設定すると、読み取り専用のビューが作成されます。</x-field-desc>
  </x-field>
  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
    <x-field-desc markdown>「ユーザー」列の表示を制御します。これは、各セッションのユーザーを識別する必要があるマルチユーザーまたは管理コンテキストで役立ちます。</x-field-desc>
  </x-field>
  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>UIで「オフライン」フィルターオプションが利用可能かどうかを決定します。オフラインセッションは通常、現在アクティブではない長期間有効なセッションを表します。</x-field-desc>
  </x-field>
  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>セッションに関連付けられた Blocklet のプログラム ID を表示できる「App Pid」列の表示を制御します。</x-field-desc>
  </x-field>
</x-field-group>

## 表示情報

このコンポーネントは、データテーブル内の各セッションについて以下の情報をレンダリングします。

| 列 | 説明 |
| :--- | :--- |
| **プラットフォーム** | セッションのユーザーエージェント文字列から派生したオペレーティングシステムとバージョン（例：`Windows/10`）。 |
| **デバイスタイプ** | セッションに使用されたブラウザまたはアプリケーション（例：`Chrome/108.0.0`）。 |
| **ウォレットOS** | 接続されたDIDウォレットのオペレーティングシステム（利用可能な場合）。 |
| **App Pid** | セッションを作成した Blocklet のプログラム ID。（`showAppPid` が `true` の場合に表示）。 |
| **ユーザー** | セッションに関連付けられたユーザー。（`showUser` が `true` の場合に表示）。 |
| **作成日時** | セッションが最初に作成されたときのタイムスタンプ。 |
| **最終アクティブ** | 最後のアクティビティのタイムスタンプ。期限切れのセッションの場合、この列には「期限切れ」と表示されます。 |
| **最終ログインIP** | セッションの最後に確認されたIPアドレスと、その解決された地理的な地域。 |
| **アクション** | セッションからログアウトするためのボタンを提供します。（`showAction` が `true` の場合に表示）。 |

---

完全なユーザー管理インターフェースには、[UserCenter](./components-user-management-user-center.md) コンポーネント内で `UserSessions` コンポーネントを使用することを検討してください。