# 概要

`@arcblock/did-connect-react`ライブラリは、分散型アイデンティティ（DID）機能をウェブアプリケーションにシームレスに統合するために設計された、包括的なReactコンポーネントとフックのセットを提供します。ArcBlockのDID Walletを使用したユーザー認証とセッション管理のプロセスを簡素化し、従来のログインシステムに代わる、安全で使いやすい代替手段を提供します。

このライブラリは、すぐに使える完全なソリューションが必要な場合でも、認証フローに対するきめ細かな制御が必要な場合でも、柔軟で使いやすいように構築されています。

### 主な機能

<x-cards data-columns="2">
  <x-card data-title="完全な接続UI" data-icon="lucide:qr-code-icon">
    `DidConnect`コンポーネントを含み、QRコードのスキャンと接続プロセス全体を処理するための、事前に構築されたカスタマイズ可能なモーダルを提供します。
  </x-card>
  <x-card data-title="シームレスなセッション管理" data-icon="lucide:key-round">
    `SessionProvider`と`useSession`フックを活用して、アプリケーション全体でユーザーのログイン状態、セッション、プロファイルデータを簡単に管理します。
  </x-card>
  <x-card data-title="柔軟なプログラムによる制御" data-icon="lucide:webhook">
    `useConnect`のようなフックを使用して、接続モーダルをプログラムで開閉・管理し、ユーザーエクスペリエンスを完全に制御できます。
  </x-card>
  <x-card data-title="豊富なUIツールキット" data-icon="lucide:gem">
    `Avatar`、`Address`、`Button`などの補足的なUIコンポーネントのコレクションで、ユーザーのアイデンティティ情報を一貫して表示します。
  </x-card>
</x-cards>

### コアアーキテクチャ

このライブラリは、ユーザーのセッション状態を管理する中央の`SessionProvider`を中心に展開します。`Button`のようなUIコンポーネントは`DidConnect`モーダルをトリガーでき、これはユーザーのDID Walletとの安全なQRコードベースの対話を処理します。接続が完了すると、セッションが更新され、アプリケーションのUIがそれに応じて反応します。

`@arcblock/did-connect-react`はクライアントサイドのライブラリであり、認証ロジックを処理するために対応するバックエンドサービスが必要であることに注意することが重要です。このサービスは、Node.js用の[`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk)ライブラリを使用して構築する必要があります。

<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
![Overview](assets/diagram/overview-01.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

### インストール

開始するには、`yarn`または`npm`を使用してライブラリをプロジェクトに追加します。

```shell インストール icon=lucide:download
# yarnを使用
yarn add @arcblock/did-connect-react

# npmを使用
npm install @arcblock/did-connect-react
```

### 仕組み：クイックルック

以下は、ログインフローを設定するための最小限の例です。アプリケーションは`SessionProvider`でラップされ、`Button`を使用して`DidConnect`モーダルを切り替えます。

```jsx App.js icon=logos:react
import React from 'react';
import axios from 'axios';
import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
import DidConnect from '@arcblock/did-connect-react/lib/Connect';
import Button from '@arcblock/did-connect-react/lib/Button';

const webWalletUrl = 'https://web.abtwallet.io/';

function App() {
  const [isConnectOpen, setConnectOpen] = React.useState(false);

  const handleClose = () => setConnectOpen(false);
  const handleSuccess = () => {
    // ログイン成功後にリダイレクトまたはUIを更新
    window.location.reload();
  };

  return (
    <SessionProvider serviceHost="/">
      <div className="main-content">
        <SessionConsumer>
          {({ session }) => {
            if (session.loading) {
              return <div>セッションを読み込み中...</div>;
            }

            return session.user ? (
              <div>
                <h2>ようこそ、{session.user.did}さん！</h2>
                <button onClick={() => session.logout()}>ログアウト</button>
              </div>
            ) : (
              <Button onClick={() => setConnectOpen(true)}>ウォレットを接続</Button>
            );
          }}
        </SessionConsumer>
      </div>

      <DidConnect
        popup
        open={isConnectOpen}
        action="login"
        checkFn={axios.get}
        onClose={handleClose}
        onSuccess={handleSuccess}
        messages={{
          title: 'マイアプリにログイン',
          scan: 'DID WalletでQRコードをスキャンしてください',
          confirm: 'ウォレットでログインを確認してください',
          success: '正常にサインインしました！',
        }}
        webWalletUrl={webWalletUrl}
      />
    </SessionProvider>
  );
}

export default App;
```

この例は、わずかなコンポーネントでユーザーセッションを管理し、ログインプロセスをトリガーする方法を示しています。

### 次のステップ

これでライブラリの基本的な理解ができたので、さらに深く掘り下げる準備ができました。

<x-card data-title="はじめに" data-href="/getting-started" data-icon="lucide:rocket" data-cta="構築を開始">
  ステップバイステップのガイドに従って、DID Connectをゼロから独自のアプリケーションに統合します。
</x-card>