メインコンテンツへスキップ

DIDSpaceConnect

DIDSpaceConnectコンポーネントは、DID Spaceへの接続を開始するための多機能なボタンを提供します。初回接続や再接続を含むさまざまな認証フローを簡素化し、永続的なストレージのためにユーザーセッションと統合することができます。

DIDSpaceConnectコンポーネントは、DID Spaceへの接続を開始するための多機能なボタンを提供します。初回接続や再接続を含むさまざまな認証フローを簡素化し、永続的なストレージのためにユーザーセッションと統合することができます。

仕組み

このコンポーネントは、ユーザーに2つの主要な接続方法を提供する分割ボタンをレンダリングします。

  1. ウォレットを使用

    これは、ユーザーのDIDウォレットを介して接続プロセスを開始します。これが推奨される最も一般的な方法です。

  2. スペースゲートウェイを使用

    これにより、ユーザーはDID SpaceゲートウェイのURLを手動で入力して接続を確立できます。

接続が成功すると、コンポーネントは接続されたスペースに関する重要な詳細を含むspaceGatewayオブジェクトを返します。

DIDSpaceConnect

Props

DIDSpaceConnectコンポーネントは、プロパティを通じて高度にカスタマイズ可能です。

  • session object — 「@arcblock/did-connect-react」からのオプションのセッションオブジェクト。提供された場合、接続された「spaceGateway」は自動的にユーザーのセッションに保存され、「session.refresh()」が呼び出されます。
  • reconnect boolean (default: false) — 「true」の場合、コンポーネントは再接続ボタンとしてレンダリングされます。このモードでは、「spaceDid」と「spaceGatewayUrl」を設定する必要があります。
  • spaceDid string — 再接続するスペースのDID。「reconnect」が「true」の場合に必要です。
  • spaceGatewayUrl string — 再接続するスペースのゲートウェイURL。「reconnect」が「true」の場合に必要です。
  • options DIDSpaceConnectOptions — 基礎となる認証プロセスに渡す追加のオプション。
  • connectScope 'user' | 'app' (default: 'user') — 接続のスコープ。接続の処理方法と保存方法を決定します。
  • connectText string | React.ReactNode — メインの接続ボタンに表示するカスタムテキストまたは要素。
  • onSuccess function — 接続が成功したときに実行されるコールバック。spaceGateway、生のresponse、およびdecrypt関数を含むオブジェクトを受け取ります。
  • onError (error: Error) => void — 接続プロセス中にエラーが発生したときに実行されるコールバック。
  • ...rest ButtonProps — Material-UIのButtonコンポーネントからの他のプロパティは、ボタンの外観をカスタマイズするために渡されます。

使用シナリオ

1. 基本的な接続（ステートレス）

これは最も直接的な使用例です。コンポーネントは接続を確立し、onSuccessコールバックを介してspaceGatewayオブジェクトを取得するために使用されます。その後、アプリケーションはこのオブジェクトを管理する責任があります。

Demo.tsx

tsx
import Toast from '@arcblock/ux/lib/Toast';
import { DIDSpaceConnect, type DIDSpaceGateway } from '@blocklet/did-space-react';
import { useState } from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function Demo() {
  const [spaceGateway, setSpaceGateway] = useState<DIDSpaceGateway | null>(null);

  const handleSuccess = async ({ spaceGateway: gw }: { spaceGateway: DIDSpaceGateway }) => {
    try {
      // 必要に応じてspaceGatewayオブジェクトを保存または使用します
      setSpaceGateway(gw);
      Toast.success(`Connected to ${gw.name}`);
      console.log('Connected Space Gateway:', gw);
    } catch (error: any) {
      console.error(error);
      Toast.error(error.message);
    }
  };

  const handleDisconnect = () => {
    setSpaceGateway(null);
    Toast.info('Disconnected.');
  };

  if (spaceGateway) {
    return (
      <Box>
        <Typography>Connected to: {spaceGateway.name} ({spaceGateway.did})</Typography>
        <Button onClick={handleDisconnect} variant="outlined" sx={{ mt: 2 }}>
          Disconnect
        </Button>
      </Box>
    );
  }

  return <DIDSpaceConnect onSuccess={handleSuccess} variant="contained" />;
}

2. ユーザーセッションへの接続と保存

sessionプロパティを提供することにより、コンポーネントは接続成功時に接続詳細をユーザーのセッションに自動的に保存し、セッションの更新をトリガーします。これはユーザーアカウントを持つアプリケーションに推奨されるアプローチです。

SessionDemo.tsx

tsx
import { DIDSpaceConnect } from '@blocklet/did-space-react';
import { useSessionContext } from '@arcblock/did-connect-react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function SessionDemo() {
  const session = useSessionContext();

  // ユーザーの接続済みスペースはsession.user.didSpaceで利用可能になります
  const connectedSpace = session.user?.didSpace;

  if (connectedSpace) {
    return (
      <Box>
        <Typography variant="h6">Welcome, {session.user.name}!</Typography>
        <Typography>Your connected space is: {connectedSpace.name}</Typography>
        <Typography variant="caption">DID: {connectedSpace.did}</Typography>
      </Box>
    );
  }

  return (
    <div>
      <p>You have not connected a DID Space yet.</p>
      <DIDSpaceConnect session={session} variant="contained" />
    </div>
  );
}

3. 以前にリンクしたスペースへの再接続

ユーザーがすでにDIDスペースに接続している場合（例：セッションに保存されている場合）、再接続する方法を提供できます。reconnectプロパティをtrueに設定し、保存されている接続詳細からspaceDidとspaceGatewayUrlを提供します。コンポーネントは専用の再接続ボタンをレンダリングします。

ReconnectDemo.tsx

tsx
import { DIDSpaceConnect } from '@blocklet/did-space-react';
import { useSessionContext } from '@arcblock/did-connect-react';
import Toast from '@arcblock/ux/lib/Toast';
import { useState } from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function ReconnectDemo() {
  const session = useSessionContext();
  const { did, url } = session.user?.didSpace ?? {};
  const [isConnected, setIsConnected] = useState(true); // 最初は接続されていると仮定

  const handleSuccess = () => {
    setIsConnected(true);
    Toast.success('Successfully reconnected!');
  };

  const handleDisconnect = () => {
    // 実際のアプリでは、ここで無効なセッション/トークンをクリアします
    setIsConnected(false);
    Toast.info('Connection lost. Please reconnect.');
  };

  if (!did || !url) {
    // スペースがリンクされていない場合は、代わりに初期接続ボタンを表示します。
    return <DIDSpaceConnect session={session} variant="contained" />;
  }

  if (!isConnected) {
    return (
      <Box>
        <Typography color="error">Connection to {did} has been lost.</Typography>
        <DIDSpaceConnect
          reconnect
          spaceDid={did}
          spaceGatewayUrl={url}
          session={session}
          onSuccess={handleSuccess}
          onError={(err) => Toast.error(`Reconnection failed: ${err.message}`)}
          variant="outlined"
          sx={{ mt: 1 }}
        />
      </Box>
    );
  }

  return (
    <Box>
      <Typography color="primary">Connected to space: {did}</Typography>
      <Button onClick={handleDisconnect} variant="text" color="warning" sx={{ mt: 1 }}>
        Simulate Disconnect
      </Button>
    </Box>
  );
}

次のステップ

接続を確立した後、接続されたDIDスペースに関する情報を表示したくなるでしょう。DIDSpaceConnectionコンポーネントはこの目的のために設計されています。

DIDSpaceConnection

DIDスペースの情報と接続ステータスを表示する表示カードで、カスタマイズのオプションがあります。

コンポーネントを表示