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

マルチステップセッション

多くの実世界のアプリケーションでは、単一のインタラクションではタスクを完了できません。プロファイルの登録、資産の所有権の確認、そして最後にユーザー契約への署名など、一連のステップを通じてユーザーをガイドする必要があるかもしれません。DID Connectライブラリは、複数のセッションを連結して単一のシームレスなマルチステップワークフローにまとめることで、これらの複雑なインタラクションを容易にします。

この例では、最初のステップが正常に完了すると自動的に2番目のステップがトリガーされる、連続した2ステップのプロセスを作成する方法を示します。

コアメカニズム:nextWorkflow

マルチステップセッションを作成する鍵は、onAuth コールバックからの応答にあります。nextWorkflow オブジェクトを返すことで、ユーザーのウォレットに、提供されたURLを使用して新しいDID Connectセッションを直ちに開始するように指示します。

仕組みは次のとおりです:

  1. ユーザーが最初のDID Connectセッションを完了します(例:プロファイルを提供する)。
  2. 最初のセッションの onAuth ハンドラーがデータを処理し、2番目のセッション用の新しいDID Connect URLを生成します。
  3. onAuth ハンドラーは nextWorkflow(新しいセッションURL)と nextToken(フロントエンドが新しいセッションを追跡するため)を含むオブジェクトを返します。
  4. DIDウォレットはこの応答を受け取り、自動的に次のワークフローを開始し、ユーザーに新しいQRコードをスキャンさせることなく、2番目のステップのリクエストを提示します。

例:プロファイルとアセットの検証

2ステップのワークフローを構築しましょう:まず、ユーザーのプロファイルを要求し、次に特定のアセットを提示するように要求します。

ステップ1:ユーザープロファイルの要求

まず、最初のステップのエンドポイントを設定します。onAuth コールバック内で、ユーザーのプロファイルを正常に受信した後、2番目のステップ(/api/did/multi-step/step2/token)用の新しいセッションを生成し、それを nextWorkflow として返します。

nextWorkflowData を使用して、このステップから次のステップにデータを渡すこともできます。この場合、2番目のステップの説明で使用するために、ユーザーのフルネームを渡します。

Step 1: Request Profile and Chain to Step 2

javascript
const { WalletHandlers, WalletAuthenticator } = require('@arcblock/did-connect-js');
const SimpleStorage = require('@arcblock/did-connect-storage-nedb');
const { fromRandom } = require('@ocap/wallet');
const axios = require('axios');

// authenticatorとhandlersは既に初期化されていると仮定します
const wallet = fromRandom();
const authenticator = new WalletAuthenticator({ /* ...config... */ });
const handlers = new WalletHandlers({
  authenticator,
  tokenStorage: new SimpleStorage({ dbPath: '/tmp/multi-step.db' }),
});

// 最初のステップのハンドラー
handlers.attach({
  app: server, // あなたのexpressアプリのインスタンス
  action: 'multi-step/step1',
  claims: {
    profile: () => ({
      fields: ['fullName', 'email'],
      description: 'ステップ1:あなたのプロファイル情報を提供してください。',
    }),
  },
  onAuth: async ({ claims, userDid, req }) => {
    const profile = claims.find((x) => x.type === 'profile');
    console.log(`ステップ1が完了しました - ユーザーDID: ${userDid}。プロファイル名: ${profile.fullName}`);

    // ワークフローの次のステップのURLを生成します
    const baseUrl = `${req.protocol}://${req.get('host')}`;
    const { data } = await axios.get(`${baseUrl}/api/did/multi-step/step2/token`);

    return {
      nextWorkflow: data.url, // 次にウォレットが開くURL
      nextToken: data.token,    // フロントエンドがポーリングするためのトークン
      nextWorkflowData: {      // 次のステップに渡すデータ
        fullName: profile.fullName,
      },
    };
  },
});

ステップ2:アセットの要求

次に、2番目のステップのハンドラーを定義します。このハンドラーは、extraParams.previousWorkflowData オブジェクトを介してステップ1から渡されたデータを受け取ります。このデータを使用して、説明をパーソナライズするなど、クレームをカスタマイズできます。

Step 2: Receive Data and Request Asset

javascript
// 2番目のステップのハンドラー
handlers.attach({
  app: server, // あなたのexpressアプリのインスタンス
  action: 'multi-step/step2',
  claims: {
    asset: ({ extraParams }) => {
      // 前のステップからのデータにアクセスします
      const { fullName } = extraParams.previousWorkflowData;
      return {
        description: `こんにちは ${fullName} さん、プロセスを完了するためにNFTを提示してください。`,
        trustedIssuers: ['zNKjDm4Xsoaffb19a41w3g9d3AZp2k1YxV4a'], // 発行者のDIDの例
      };
    },
  },
  onAuth: async ({ claims, userDid }) => {
    const asset = claims.find((x) => x.type === 'asset');
    console.log(`ステップ2が完了しました - ユーザーDID: ${userDid}。提示されたアセット: ${asset.asset}`);

    // これが最終ステップなので、成功メッセージを返します
    return { successMessage: 'すべてのステップを正常に完了しました!' };
  },
});

マルチステップフローの視覚化

次の図は、連結されたセッション中のユーザー、アプリケーションバックエンド、およびDIDウォレット間のインタラクションを示しています。

Multi-Step Session

このパターンを使用すると、複雑なプロセスをシンプルで連続的なステップに分解する、洗練されたユーザーフレンドリーなワークフローを、エンドユーザーに摩擦なく構築できます。

次のステップ

ワークフローを連結する方法を理解したところで、他の高度な機能や例を探ってみましょう: