# 接続 UI (DidConnect)

`DidConnect` コンポーネントは、さまざまな分散型 ID (DID) 接続フローを処理するための、事前構築済みの包括的な UI ソリューションです。ログイン、認証、プロファイル要求などのアクションのための使いやすいインターフェースを提供し、複数の接続方法を標準でサポートします。

これは `@arcblock/did-connect-react` ライブラリの視覚的な中心要素として機能し、セッション管理とリアルタイムのステータス更新の複雑さを抽象化します。このコンポーネントは、DID Wallet ユーザー向けの QR コードを表示し、ソーシャルログイン (OAuth) やパスワードレス認証 (Passkeys) などの代替ログインオプションを提供します。

`DidConnect` を使用する前に、アプリケーションが [`SessionProvider`](./core-components-session-provider.md) でラップされ、全体的なセッション状態が管理されていることを確認してください。

## 基本的な使用法

`DidConnect` を使用するには、インポートしていくつかの必須プロパティを提供する必要があります。コンポーネントは通常、その可視性を決定する状態変数によって制御されます。

```jsx DID Connect の例 icon=logos:react
import React, { useState } from 'react';
import axios from 'axios';
import DidConnect from '@arcblock/did-connect-react/lib/Connect';

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

  const handleClose = () => setConnectOpen(false);
  const handleSuccess = () => {
    // ログイン成功時の処理、例：ユーザーをリダイレクトする
    window.location.href = '/profile';
  };

  return (
    <div>
      <button onClick={() => setConnectOpen(true)}>Login with DID</button>
      {isConnectOpen && (
        <DidConnect
          action="login"
          checkFn={axios.get}
          onClose={handleClose}
          onSuccess={handleSuccess}
          messages={{
            title: 'Scan to Sign In',
            scan: 'Scan QR code with your DID Wallet',
            confirm: 'Confirm login on your DID Wallet',
            success: 'You have successfully signed in!',
          }}
        />
      )}
    </div>
  );
}

export default App;
```

この例では、「Login with DID」ボタンをクリックすると `isConnectOpen` の状態が `true` に設定され、`DidConnect` コンポーネントがモーダルダイアログとしてレンダリングされます。`checkFn` プロパティは非常に重要です。これは、コンポーネントがバックエンドからセッションステータスをポーリングするために使用する関数です。

## 仕組み

`DidConnect` コンポーネントは、接続オプションの表示から最終的な成功またはエラー状態の処理まで、ユーザー認証フロー全体を調整します。

<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
![Connection UI (DidConnect)](assets/diagram/did-connect-diagram-0.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

## コンポーネントのプロパティ

`DidConnect` コンポーネントは、プロパティを通じて高度に設定可能です。以下に、利用可能なオプションの詳細なリストを示します。

### コア設定

これらのプロパティは、コンポーネントの基本機能を設定するために不可欠です。

<x-field-group>
  <x-field data-name="action" data-type="string" data-required="true">
    <x-field-desc markdown>接続の目的を定義します。`login`、`claim`、`sign` など。この文字列は、必要なアクションを決定するためにバックエンドに渡されます。</x-field-desc>
  </x-field>
  <x-field data-name="checkFn" data-type="function" data-required="true">
    <x-field-desc markdown>バックエンドにセッションステータスの更新をポーリングするために使用される関数です。`axios.get` のような API リクエストを行う関数である必要があります。</x-field-desc>
  </x-field>
  <x-field data-name="baseUrl" data-type="string" data-default="''">
    <x-field-desc markdown>API エンドポイントのベース URL です。API が別のドメインにある場合は、ここで指定します。</x-field-desc>
  </x-field>
  <x-field data-name="prefix" data-type="string" data-default="/api/did">
    <x-field-desc markdown>バックエンド上の DID Connect API エンドポイントの URL プレフィックスです。</x-field-desc>
  </x-field>
</x-field-group>

### 動作制御

これらのプロパティは、接続プロセスの動作を制御します。

<x-field-group>
  <x-field data-name="enabledConnectTypes" data-type="string[]" data-default='["web", "mobile", ...]'>
    <x-field-desc markdown>表示する接続方法を指定する文字列の配列です。可能な値には `web`、`mobile`、`github`、`google`、`apple`、`passkey` などがあります。</x-field-desc>
  </x-field>
  <x-field data-name="passkeyBehavior" data-type="'none' | 'both' | 'only-existing' | 'only-new'" data-default="'none'">
    <x-field-desc markdown>Passkey 認証の動作を制御します。`none` は無効にし、`both` は新しいパスキーの作成と既存のパスキーの使用を許可し、`only-existing` は既存のパスキーに制限し、`only-new` は新しいパスキーの作成を強制します。</x-field-desc>
  </x-field>
  <x-field data-name="allowWallet" data-type="boolean" data-default="true">
    <x-field-desc markdown>`false` の場合、QR コードとモバイルウォレットの接続オプションは非表示になります。</x-field-desc>
  </x-field>
  <x-field data-name="autoConnect" data-type="boolean" data-default="true">
    <x-field-desc markdown>`true` の場合、コンポーネントは同じデバイスから以前に確立された接続を自動的に使用しようとします。</x-field-desc>
  </x-field>
  <x-field data-name="forceConnected" data-type="boolean | string" data-default="true">
    <x-field-desc markdown>`true` の場合、ユーザーはすでにログインしているのと同じ DID で接続する必要があります。DID 文字列が提供された場合、ユーザーはその特定の DID で接続する必要があります。</x-field-desc>
  </x-field>
  <x-field data-name="saveConnect" data-type="boolean" data-default="true">
    <x-field-desc markdown>`true` の場合、成功した接続情報が将来の `autoConnect` の試行のためにローカルに保存されます。</x-field-desc>
  </x-field>
  <x-field data-name="useSocket" data-type="boolean" data-default="true">
    <x-field-desc markdown>`true` の場合、リアルタイムのステータス更新に WebSocket を使用しようと試み、接続が確立できない場合はポーリングにフォールバックします。</x-field-desc>
  </x-field>
</x-field-group>

### UI のカスタマイズ

`DidConnect` コンポーネントの外観とテキストをカスタマイズします。

<x-field-group>
  <x-field data-name="mode" data-type="'dialog' | 'drawer' | 'page'" data-default="'dialog'">
    <x-field-desc markdown>コンポーネントの表示方法を決定します。`dialog` は中央に配置されたモーダルとして表示し、`drawer` はボトムシートとして（モバイルで）表示し、`page` はドキュメントフローに直接埋め込みます。</x-field-desc>
  </x-field>
  <x-field data-name="messages" data-type="object">
    <x-field-desc markdown>UI に表示されるテキストをカスタマイズするためのオブジェクトです。</x-field-desc>
    <x-field data-name="title" data-type="string" data-desc="上部にあるメインタイトル。"></x-field>
    <x-field data-name="scan" data-type="string" data-desc="タイトルの下にある説明テキスト。"></x-field>
    <x-field data-name="confirm" data-type="string" data-desc="QR コードがスキャンされた後に表示されるテキスト。"></x-field>
    <x-field data-name="success" data-type="string | ReactNode" data-desc="接続成功時に表示されるメッセージ。"></x-field>
    <x-field data-name="error" data-type="string" data-desc="エラー時に表示されるメッセージ。"></x-field>
  </x-field>
  <x-field data-name="hideCloseButton" data-type="boolean" data-default="false">
    <x-field-desc markdown>`true` の場合、右上隅の閉じるボタン（X）が非表示になります。</x-field-desc>
  </x-field>
  <x-field data-name="extraContent" data-type="ReactNode" data-default="null">
    <x-field-desc markdown>カスタムの React コンポーネントや要素を UI に挿入できます。通常はメインタイトル/説明の下に表示されます。</x-field-desc>
  </x-field>
  <x-field data-name="customItems" data-type="ReactNode[]" data-default="[]">
    <x-field-desc markdown>接続方法のリストに追加されるカスタム React ノードの配列です。</x-field-desc>
  </x-field>
  <x-field data-name="disableSwitchApp" data-type="boolean" data-default="false">
    <x-field-desc markdown>統一ログインサイト群を使用している場合、このプロパティはログインプロセス中にユーザーがグループ内の異なるアプリケーションを切り替えるのを防ぎます。</x-field-desc>
  </x-field>
  <x-field data-name="webWalletUrl" data-type="string">
    <x-field-desc markdown>「Web Wallet で接続」オプションに使用される Web ベースの DID Wallet の URL です。デフォルトでは、公式の ArcBlock Web Wallet になります。</x-field-desc>
  </x-field>
</x-field-group>

### コールバック

接続ライフサイクルのさまざまな段階で呼び出される関数です。

<x-field-group>
  <x-field data-name="onClose" data-type="function" data-required="true">
    <x-field-desc markdown>ユーザーが `DidConnect` ダイアログを閉じたとき（例：閉じるボタンまたはモーダルの外側をクリックしたとき）に実行されるコールバック関数です。</x-field-desc>
  </x-field>
  <x-field data-name="onSuccess" data-type="function" data-required="true">
    <x-field-desc markdown>接続が成功したときに実行されるコールバック関数です。セッションデータが引数として渡されます。</x-field-desc>
  </x-field>
  <x-field data-name="onError" data-type="function">
    <x-field-desc markdown>プロセス中にエラーが発生したときに実行されるコールバック関数です。エラーオブジェクトまたはメッセージが引数として渡されます。</x-field-desc>
  </x-field>
  <x-field data-name="onRecreateSession" data-type="function">
    <x-field-desc markdown>セッションをリセットする必要があるとき（例：タイムアウト後やユーザーが手動でキャンセルして再試行したとき）に呼び出されるコールバック関数です。</x-field-desc>
  </x-field>
</x-field-group>

## 次のステップ

`DidConnect` コンポーネントをしっかりと理解したことで、堅牢な認証体験を構築できるようになります。接続 UI をプログラムでより詳細に制御するには、[`useConnect` フック](./hooks-use-connect.md) を調べてください。これにより、アプリケーションのどこからでも `DidConnect` モーダルを開閉できます。