DIDSpaceConnect | ArcBlock

DIDSpaceConnect 组件提供了一个多功能按钮，用于启动与 DID Space 的连接。它简化了各种认证流程，包括初始连接和重新连接，并可以与用户会话集成以进行持久化存储。

工作原理

该组件呈现一个分割按钮，为用户提供两种主要的连接方式：

使用钱包
通过用户的 DID 钱包启动连接过程，这是推荐且最常用的方法。
使用空间网关
允许用户手动输入其 DID Space 网关的 URL 来建立连接。

连接成功后，组件会返回一个 spaceGateway 对象，其中包含有关已连接空间的基本详细信息。

DIDSpaceConnect

Props

DIDSpaceConnect 组件可通过其 props 进行高度自定义。

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 组件的任何其他 props 都会被传递下去，以自定义按钮的外观。

使用场景

1. 基本连接（无状态）

这是最直接的用例。该组件用于建立连接并通过 onSuccess 回调检索 spaceGateway 对象。然后，应用程序负责管理此对象。

Demo.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 {
      // Store or use the spaceGateway object as needed
      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 prop，组件将在连接成功后自动将连接详细信息保存到用户会话中，然后触发会话刷新。对于有用户账户的应用程序，这是推荐的方法。

SessionDemo.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();

  // The user's connected space will be available in 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 Space（例如，存储在他们的会话中），你可以为他们提供一种重新建立连接的方式。将 reconnect prop 设置为 true，并从存储的连接详细信息中提供 spaceDid 和 spaceGatewayUrl。该组件将呈现一个专用的重新连接按钮。

ReconnectDemo.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); // Assume initially connected

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

  const handleDisconnect = () => {
    // In a real app, you would clear the invalid session/token here
    setIsConnected(false);
    Toast.info('Connection lost. Please reconnect.');
  };

  if (!did || !url) {
    // If no space is linked, show the initial connection button instead.
    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 Space 的信息。DIDSpaceConnection 组件就是为此目的设计的。

DIDSpaceConnection

一个显示 DID 空间信息和连接状态的显示卡，并提供自定义选项。

查看组件