# はじめに

このガイドでは、`@arcblock/did-connect-react` を使用して、Reactアプリケーションに分散型ID（DID）認証を統合するための基本的な手順を説明します。わずか数分で、完全に機能するログインおよびログアウトフローを実装できます。

### 前提条件

開始する前に、開発環境が次の基準を満たしていることを確認してください：

- Reactプロジェクトがセットアップされていること。
- 認証リクエストを処理するBlocklet Serverインスタンスが実行されていること。このライブラリは、Blocklet Serverをバックエンドとしてシームレスに動作するように設計されています。

## ステップ1：ライブラリをインストールする

まず、`@arcblock/did-connect-react` パッケージをプロジェクトに追加します。npmまたはyarnのいずれかを使用できます。

```bash npmでインストール icon=logos:npm
npm install @arcblock/did-connect-react
```

```bash yarnでインストール icon=logos:yarn
yarn add @arcblock/did-connect-react
```

## ステップ2：SessionProviderをセットアップする

`SessionProvider`はライブラリの中心です。これは、ユーザーのセッション状態（ログイン状態やユーザー情報など）を管理し、その内部でラップされたすべてのコンポーネントで利用可能にするコンテキストプロバイダーです。アプリケーションのルート、例えば`App.js`ファイルに配置する必要があります。

Blocklet上に構築されたアプリケーションでは、`createAuthServiceSessionContext`ファクトリ関数を使用してプロバイダーを初期化することが推奨されます。

```javascript App.js icon=logos:react
import React from 'react';
import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
import Home from './Home'; // このコンポーネントは次のステップで作成します

// createAuthServiceSessionContextはBlocklet環境に最適化されています
const { SessionProvider } = createAuthServiceSessionContext();

function App() {
  return (
    // serviceHostプロパティは、バックエンド認証サービスのベースパスを指します。
    // 標準的なBlockletの場合、これは通常blockletのプレフィックスまたは'/'です。
    <SessionProvider serviceHost="/">
      <Home />
    </SessionProvider>
  );
}

export default App;
```

## ステップ3：ログインとログアウトを実装する

次に、ユーザーがログインおよびログアウトできるコンポーネントを作成しましょう。Reactの`useContext`フックと`SessionContext`を使用して、セッションデータと関数にアクセスできます。

`session`オブジェクトは、現在の`user`、`loading`状態、そして`login()`や`logout()`のような関数など、必要なものすべてを提供します。

```javascript Home.js icon=logos:react
import React, { useContext } from 'react';
import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import Button from '@arcblock/ux/lib/Button'; // 汎用ボタン
import CircularProgress from '@mui/material/CircularProgress';

function Home() {
  // セッションコンテキストにアクセス
  const { session } = useContext(SessionContext);

  // アクセスしやすいように分割代入
  const { user, loading, login, logout } = session;

  // セッションが初期化されている間、ローディングインジケーターを表示
  if (loading) {
    return <CircularProgress />;
  }

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      {user ? (
        // ユーザーがログインしている場合は、DIDとログアウトボタンを表示
        <div>
          <h1>ようこそ！</h1>
          <p>あなたのDID: {user.did}</p>
          <Button variant="contained" color="secondary" onClick={logout}>
            ログアウト
          </Button>
        </div>
      ) : (
        // ログインしていない場合は、ログインボタンを表示
        <div>
          <h1>サインインしてください</h1>
          <ConnectButton onClick={() => login()}>
            ウォレットに接続
          </ConnectButton>
        </div>
      )}
    </div>
  );
}

export default Home;
```

ユーザーが`ConnectButton`をクリックすると、`login()`関数が呼び出されます。この関数は、ユーザーがDID WalletでスキャンするためのQRコードを表示するDID Connectモーダルを開き、認証プロセス全体を管理します。

## ステップ4：ユーザーデータにアクセスする

ユーザーが正常にログインすると、`session.user`オブジェクトが入力されます。このオブジェクトには、ユーザーのDID Walletから取得したプロファイル情報が含まれています。

コンテキストによって提供される`session`オブジェクトは、ユーザーの認証状態への主要なインターフェースです。以下にその主要なプロパティを示します：

<x-field-group>
  <x-field data-name="user" data-type="object | null" data-desc="認証されたユーザーオブジェクト。ユーザーがログインしていない場合は`null`です。">
    <x-field data-name="did" data-type="string" data-desc="ユーザーの分散型識別子（DID）。"></x-field>
    <x-field data-name="fullName" data-type="string" data-desc="ウォレットプロファイルからのユーザーのフルネーム。"></x-field>
    <x-field data-name="email" data-type="string" data-desc="ウォレットプロファイルからのユーザーのメールアドレス。"></x-field>
  </x-field>
  <x-field data-name="loading" data-type="boolean" data-desc="セッションが初期化または更新されている間は`true`、それ以外は`false`。"></x-field>
  <x-field data-name="login" data-type="function" data-desc="ログインプロセスを開始する関数。DID Connect UIを開きます。"></x-field>
  <x-field data-name="logout" data-type="function" data-desc="ユーザーをログアウトさせ、セッションをクリアする関数。"></x-field>
  <x-field data-name="initialized" data-type="boolean" data-desc="初期セッションチェックが完了すると`true`になります。"></x-field>
</x-field-group>

## これで完了です！

おめでとうございます！ReactアプリケーションにDIDベースの認証フローを完全に実装しました。ユーザーはDID Walletを使用してサインインでき、アプリケーションは安全にセッション情報にアクセスできます。

### 次のステップ

さらに深く掘り下げ、より高度な機能を探求するには、次のセクションをご覧ください：

<x-cards>
  <x-card data-title="セッション管理（SessionProvider）" data-icon="lucide:key-round" data-href="/core-components/session-provider">
    `SessionProvider`のすべての設定オプションについて学び、セッションの挙動やタイムアウトなどをカスタマイズします。
  </x-card>
  <x-card data-title="接続UI（DidConnect）" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
    `DidConnect`コンポーネントを探索し、接続UIをページに直接埋め込む宣言的な方法を学びます。
  </x-card>
</x-cards>