@arcblock/did-connect-reactライブラリは、分散型アイデンティティ（DID）機能をウェブアプリケーションにシームレスに統合するために設計された、包括的なReactコンポーネントとフックのセットを提供します。ArcBlockのDID Walletを使用したユーザー認証とセッション管理のプロセスを簡素化し、従来のログインシステムに代わる、安全で使いやすい代替手段を提供します。
このライブラリは、すぐに使える完全なソリューションが必要な場合でも、認証フローに対するきめ細かな制御が必要な場合でも、柔軟で使いやすいように構築されています。
主な機能
完全な接続UI
`DidConnect`コンポーネントを含み、QRコードのスキャンと接続プロセス全体を処理するための、事前に構築されたカスタマイズ可能なモーダルを提供します。
シームレスなセッション管理
`SessionProvider`と`useSession`フックを活用して、アプリケーション全体でユーザーのログイン状態、セッション、プロファイルデータを簡単に管理します。
柔軟なプログラムによる制御
`useConnect`のようなフックを使用して、接続モーダルをプログラムで開閉・管理し、ユーザーエクスペリエンスを完全に制御できます。
豊富なUIツールキット
`Avatar`、`Address`、`Button`などの補足的なUIコンポーネントのコレクションで、ユーザーのアイデンティティ情報を一貫して表示します。
コアアーキテクチャ
このライブラリは、ユーザーのセッション状態を管理する中央のSessionProviderを中心に展開します。ButtonのようなUIコンポーネントはDidConnectモーダルをトリガーでき、これはユーザーのDID Walletとの安全なQRコードベースの対話を処理します。接続が完了すると、セッションが更新され、アプリケーションのUIがそれに応じて反応します。
@arcblock/did-connect-reactはクライアントサイドのライブラリであり、認証ロジックを処理するために対応するバックエンドサービスが必要であることに注意することが重要です。このサービスは、Node.js用の@arcblock/did-connect-jsライブラリを使用して構築する必要があります。
インストール
開始するには、yarnまたはnpmを使用してライブラリをプロジェクトに追加します。
インストール
# yarnを使用
yarn add @arcblock/did-connect-react
# npmを使用
npm install @arcblock/did-connect-react仕組み：クイックルック
以下は、ログインフローを設定するための最小限の例です。アプリケーションはSessionProviderでラップされ、Buttonを使用してDidConnectモーダルを切り替えます。
App.js
import React from 'react';
import axios from 'axios';
import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
import DidConnect from '@arcblock/did-connect-react/lib/Connect';
import Button from '@arcblock/did-connect-react/lib/Button';
const webWalletUrl = 'https://web.abtwallet.io/';
function App() {
const [isConnectOpen, setConnectOpen] = React.useState(false);
const handleClose = () => setConnectOpen(false);
const handleSuccess = () => {
// ログイン成功後にリダイレクトまたはUIを更新
window.location.reload();
};
return (
<SessionProvider serviceHost="/">
<div className="main-content">
<SessionConsumer>
{({ session }) => {
if (session.loading) {
return <div>セッションを読み込み中...</div>;
}
return session.user ? (
<div>
<h2>ようこそ、{session.user.did}さん！</h2>
<button onClick={() => session.logout()}>ログアウト</button>
</div>
) : (
<Button onClick={() => setConnectOpen(true)}>ウォレットを接続</Button>
);
}}
</SessionConsumer>
</div>
<DidConnect
popup
open={isConnectOpen}
action="login"
checkFn={axios.get}
onClose={handleClose}
onSuccess={handleSuccess}
messages={{
title: 'マイアプリにログイン',
scan: 'DID WalletでQRコードをスキャンしてください',
confirm: 'ウォレットでログインを確認してください',
success: '正常にサインインしました！',
}}
webWalletUrl={webWalletUrl}
/>
</SessionProvider>
);
}
export default App;この例は、わずかなコンポーネントでユーザーセッションを管理し、ログインプロセスをトリガーする方法を示しています。
次のステップ
これでライブラリの基本的な理解ができたので、さらに深く掘り下げる準備ができました。