接続 UI (DidConnect)

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

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

DidConnect を使用する前に、アプリケーションが SessionProvider でラップされ、全体的なセッション状態が管理されていることを確認してください。

基本的な使用法

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

DID Connect の例

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

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

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

コア設定

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

動作制御

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

UI のカスタマイズ

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

コールバック

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

次のステップ

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