SessionProviderは@arcblock/did-connect-reactライブラリの礎です。これは、セッション関連のすべてのロジック、状態、アクションをカプセル化するReact Context Providerです。アプリケーションをSessionProviderでラップすることにより、propsを手動で下に渡すことなく、アプリケーションツリー内のどのコンポーネントでもユーザーのセッション情報と認証メソッドを利用できるようになります。
このコンポーネントは、セッショントークンの保存やユーザーデータの管理から、ログイン/ログアウトフローの調整、セッションの自動更新まで、すべてを処理します。
仕組み
SessionProviderは、現在のユーザーの状態（userオブジェクト、loadingステータスなど）を保持するセッションコンテキストを作成し、その状態を変更する関数（例：login、logout）を提供します。SessionProvider内にネストされたどのコンポーネントも、このコンテキストを購読してこのデータにアクセスし、認証アクションをトリガーできます。
以下は、基本的なアーキテクチャを示す図です。
はじめに
セッション管理機能を使用するには、まずSessionProviderをインポートしてアプリケーションをラップする必要があります。このライブラリは、設定済みのプロバイダーを作成するためのファクトリー関数をエクスポートします。
基本的なセットアップ
プロバイダーをセットアップする最も一般的な方法は、createAuthServiceSessionContextを使用することです。これは、ArcBlockエコシステム（Blocklets）内で実行されるアプリケーション向けに事前設定されています。
App.js
import React from 'react';
import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
import AuthButton from './AuthButton';
// SessionProviderとコンテキストにアクセスするためのフックを作成
const { SessionProvider, SessionContext } = createAuthServiceSessionContext();
export const useSession = () => React.useContext(SessionContext);
export default function App() {
return (
<SessionProvider>
<div className="App">
<h1>Welcome to DID Connect</h1>
<AuthButton />
</div>
</SessionProvider>
);
}AuthButton.js
import React from 'react';
import { useSession } from './App';
export default function AuthButton() {
const { session } = useSession();
if (session.loading) {
return <div>Loading...</div>;
}
if (session.user) {
return (
<div>
<p>Welcome, {session.user.fullName || session.user.did}</p>
<button onClick={() => session.logout()}>Logout</button>
</div>
);
}
return <button onClick={() => session.login()}>Login</button>;
}この例では、createAuthServiceSessionContextがSessionProviderを生成します。Appをそれでラップすると、AuthButtonのような子コンポーネントは、useSessionフックを使用してセッションデータと関数にアクセスできるようになります。
SessionProviderのProps
SessionProviderの動作は、さまざまなpropsを渡すことで設定できます。
- serviceHost
string— 認証サービスバックエンドのベースURL。デフォルトは現在のBlockletのプレフィックスまたは'/'です。 - autoConnect
boolean(default:false) — trueの場合、ページロード時にユーザーセッションが見つからないと、DID Connectダイアログが自動的に開きます。 - autoDisconnect
boolean(default:true) — trueの場合、アプリケーションIDがセッションクッキーに保存されているものと一致しない場合、セッションは自動的にクリアされます。 - protectedRoutes
string[](default:["*"]) — 保護するルートパターンの配列。未認証のユーザーがこれらのルートにアクセスしようとすると、セッションが解決されるまで読み込みスピナーが表示されます。ワイルドカード（*）がサポートされています。 - locale
string— DID Connect UIの表示言語を設定します。デフォルトはブラウザの言語です。 - webWalletUrl
string— 接続プロセスで使用するウェブベースのDID WalletのURL。 - timeout
number(default:120000) — 接続プロセス中にDID Walletからの応答を待つためのタイムアウト（ミリ秒単位）。 - useSocket
boolean(default:true) — ウォレットとのリアルタイム通信にWebSocketを使用するかどうかを決定し、より高速なユーザーエクスペリエンスを提供します。 - extraParams
object— バックエンドへのすべての認証リクエストとともに送信される追加パラメーターのオブジェクト。
セッションコンテキストオブジェクト
SessionContextを利用すると、セッションの状態とAPIを含むオブジェクトを取得できます。主要なプロパティはsessionで、これには対話するすべてのデータとメソッドが含まれています。
状態プロパティ
これらは、ユーザーセッションの現在の状態を記述する読み取り専用のプロパティです。
- user
User | null— セッションが存在する場合、認証されたユーザーオブジェクト。それ以外の場合はnull。DID、名前、メール、アバターなどの詳細が含まれます。 - loading
boolean— セッションが初期化中、更新中、またはログイン/ログアウトプロセス中である場合はtrue。 - initialized
boolean— ページロード時に最初のセッションチェックが完了するとtrueになります。 - open
boolean— DID Connectダイアログが現在開いている場合はtrue。 - error
string— 最後のセッション操作が失敗した場合、エラーメッセージが含まれます。 - provider
string— 最後のログインに使用されたプロバイダー（例：'wallet'、'github'、'google'）。 - walletOS
string— 接続されたDID Walletのオペレーティングシステム（例：'ios'、'android'、'web'）。 - unReadCount
number— 現在のユーザーの未読通知の数。
アクションメソッド
これらは、認証フローを開始したり、セッションを管理したりするために呼び出すことができる関数です。
- login()
function— DID Connect UIを開いてユーザーのログインプロセスを開始します。オプションのコールバックとパラメーターを受け入れます。 - logout()
function— 現在のユーザーをログアウトさせ、ストレージからセッションをクリアします。完了時に実行されるオプションのコールバック関数を受け入れます。 - switchDid()
function— ログイン中のユーザーが別のアカウントに切り替えることを許可します。アカウント切り替え用のコンテキストでDID Connect UIを再度開きます。 - bindWallet()
function— ソーシャルプロバイダー（OAuth）またはパスキー経由でログインしたユーザーのために、この関数は既存のアカウントにDID Walletを接続するフローを開始します。 - refresh()
function— サーバーからユーザーのセッションデータを手動で更新します。更新されたプロフィール情報や権限を取得するのに便利です。 - switchProfile()
function— DID Connect UIを開き、ユーザーが同じDIDアカウント内の異なるプロフィール（例：個人用、仕事用）を切り替えられるようにします。 - switchPassport()
function— DID Connect UIを開き、ユーザーが異なるパスポート（異なる資格情報や役割のセットを表す場合がある）を切り替えられるようにします。 - connectToDidSpaceForFullAccess()
function— ユーザーのDID Spaceへの接続を開始し、フルアクセス権限を要求します。これは、ユーザーの個人データストアにデータを読み書きする必要があるアプリケーションでしばしば必要とされます。 - withSecondaryAuth()
function— 別の関数をラップする高階関数で、ラップされた関数が実行される前に、ユーザーが二次認証ステップ（例：パスワードの再入力、パスキーの使用）を完了する必要があります。これは機密性の高いアクションを保護するのに理想的です。
イベントの購読
コンテキストはeventsオブジェクトも提供します。これはEventEmitter3のインスタンスです。これを使用して、セッションのさまざまなライフサイクルイベントを購読できます。
EventListener.js
import React, { useEffect } from 'react';
import { useSession } from './App';
function EventListener() {
const { events } = useSession();
useEffect(() => {
const handleLogin = (result) => {
console.log('User logged in:', result.user.did);
};
const handleLogout = () => {
console.log('User logged out');
};
events.on('login', handleLogin);
events.on('logout', handleLogout);
// コンポーネントのアンマウント時にリスナーをクリーンアップ
return () => {
events.off('login', handleLogin);
events.off('logout', handleLogout);
};
}, [events]);
return null; // このコンポーネントは何もレンダリングしません
}利用可能なイベントには、login、login-failed、logout、change、bind-wallet、switch-passportなどがあります。
高度なカスタマイズ
異なるストレージメカニズムやより詳細な制御が必要なシナリオでは、汎用のcreateSessionContextファクトリーを使用できます。
customSession.js
import { createSessionContext } from '@arcblock/did-connect-react/lib/Session';
const { SessionProvider, SessionContext } = createSessionContext(
'my_app_session_token', // カスタムストレージキー
'ls', // cookieの代わりにlocalStorageを使用
{},
{
rolling: false, // 自動トークン更新を無効化
}
);
// ... 必要に応じてエクスポートして使用これにより、ストレージエンジンをlocalStorage（'ls'）やcookieに変更したり、トークン更新ポリシーを調整したりするなど、セッションの動作を微調整できます。