> ## Documentation Index
> Fetch the complete documentation index at: https://frenglish.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# クイックスタート

> Sequence Embedded Wallet を使って、ユーザーをあなたのアプリに接続しましょう。

## フレームワーク別の統合方法

<div className="not-prose grid gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 mt-8 mb-8">
  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/web/getting-started">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/react.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Web SDK</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/unity/overview">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/unity.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Unity</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/unreal/quickstart">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <div
          className="h-6 w-6 bg-primary dark:bg-primary-light"
          style={{
  WebkitMask: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Cpath d=\'M16 0c-8.766 0-15.865 7.161-15.865 16s7.099 16 15.865 16c8.76 0 15.865-7.161 15.865-16s-7.104-16-15.87-16zM16 0.703c4.047 0 7.859 1.594 10.724 4.479 2.859 2.875 4.453 6.766 4.443 10.818 0 4.083-1.578 7.927-4.443 10.818-2.828 2.87-6.693 4.484-10.724 4.479-4.031 0.005-7.896-1.609-10.724-4.479-2.859-2.875-4.458-6.766-4.448-10.818 0-4.083 1.583-7.927 4.443-10.818 2.828-2.875 6.698-4.49 10.729-4.479zM15.203 6.333c-2.583 0.693-4.974 2.021-8.161 5.677s-2.583 6.677-2.583 6.677c0 0 0.88-2.078 2.995-4.266 1.005-1.036 1.75-1.385 2.266-1.385 0.458-0.026 0.844 0.344 0.844 0.802v7.422c0 0.734-0.474 0.896-0.911 0.885-0.37-0.005-0.714-0.135-0.714-0.135 2.172 3.156 7.37 3.599 7.37 3.599l2.281-2.438 0.052 0.047 2.089 1.781c3.823-2.271 5.667-6.479 5.667-6.479-1.708 1.802-2.792 2.224-3.438 2.224-0.573-0.005-0.797-0.339-0.797-0.339-0.031-0.156-0.083-2.417-0.104-4.677-0.021-2.339 0-4.682 0.115-4.688 0.661-1.24 2.766-3.74 2.766-3.74-3.932 0.776-6.073 3.354-6.073 3.354-0.635-0.5-1.927-0.417-1.927-0.417 0.604 0.333 1.208 1.302 1.208 2.104v7.896c0 0-1.318 1.161-2.333 1.161-0.604 0-0.974-0.328-1.177-0.599-0.078-0.104-0.146-0.219-0.198-0.344v-9.75c-0.141 0.104-0.313 0.161-0.484 0.167-0.219 0-0.443-0.109-0.594-0.427-0.115-0.24-0.188-0.599-0.188-1.125 0-1.797 2.031-2.99 2.031-2.99z\'/%3E%3C/svg%3E")',
  mask: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Cpath d=\'M16 0c-8.766 0-15.865 7.161-15.865 16s7.099 16 15.865 16c8.76 0 15.865-7.161 15.865-16s-7.104-16-15.87-16zM16 0.703c4.047 0 7.859 1.594 10.724 4.479 2.859 2.875 4.453 6.766 4.443 10.818 0 4.083-1.578 7.927-4.443 10.818-2.828 2.87-6.693 4.484-10.724 4.479-4.031 0.005-7.896-1.609-10.724-4.479-2.859-2.875-4.458-6.766-4.448-10.818 0-4.083 1.583-7.927 4.443-10.818 2.828-2.875 6.698-4.49 10.729-4.479zM15.203 6.333c-2.583 0.693-4.974 2.021-8.161 5.677s-2.583 6.677-2.583 6.677c0 0 0.88-2.078 2.995-4.266 1.005-1.036 1.75-1.385 2.266-1.385 0.458-0.026 0.844 0.344 0.844 0.802v7.422c0 0.734-0.474 0.896-0.911 0.885-0.37-0.005-0.714-0.135-0.714-0.135 2.172 3.156 7.37 3.599 7.37 3.599l2.281-2.438 0.052 0.047 2.089 1.781c3.823-2.271 5.667-6.479 5.667-6.479-1.708 1.802-2.792 2.224-3.438 2.224-0.573-0.005-0.797-0.339-0.797-0.339-0.031-0.156-0.083-2.417-0.104-4.677-0.021-2.339 0-4.682 0.115-4.688 0.661-1.24 2.766-3.74 2.766-3.74-3.932 0.776-6.073 3.354-6.073 3.354-0.635-0.5-1.927-0.417-1.927-0.417 0.604 0.333 1.208 1.302 1.208 2.104v7.896c0 0-1.318 1.161-2.333 1.161-0.604 0-0.974-0.328-1.177-0.599-0.078-0.104-0.146-0.219-0.198-0.344v-9.75c-0.141 0.104-0.313 0.161-0.484 0.167-0.219 0-0.443-0.109-0.594-0.427-0.115-0.24-0.188-0.599-0.188-1.125 0-1.797 2.031-2.99 2.031-2.99z\'/%3E%3C/svg%3E")',
  maskRepeat: 'no-repeat',
  maskPosition: 'center center'
}}
        />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Unreal</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/headless-wallet/quickstart">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/js.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">ヘッドレス埋め込みウォレット</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/mobile">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/mobile.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">React Native</h2>
      </div>
    </div>
  </a>
</div>

<Steps>
  <Step title="スターターリポジトリをクローン">
    ターミナルで以下のコマンドを実行し、スターターリポジトリをクローンします。

    <CodeGroup>
      ```bash React theme={null}
      npx sequence-cli boilerplates create-embedded-wallet-react-starter
      ```

      ```bash Next theme={null}
      npx sequence-cli boilerplates create-kit-embedded-wallet-nextjs-starter
      ```
    </CodeGroup>
  </Step>

  <Step title="接続と認証">
    ブラウザで `http://localhost:4444` にアクセスし、<b>Connect</b> をクリックして認証プロセスを開始します。

    これで Embedded Wallet をボイラープレートでテストできます。次はご自身のプロジェクトを設定しましょう。
  </Step>

  <Step title="プロジェクトの設定">
    <a href="https://sequence.build/project/default/embedded-wallet?tab=config">Builder 上のプロジェクトの埋め込みウォレット設定ページ</a>にアクセスし、リカバリーウォレットアドレスを入力してパスワードを設定し、<b>Create Configuration</b> をクリックしてください。この設定は後から変更できませんのでご注意ください。
  </Step>

  <Step title="環境変数の更新">
    クローンしたディレクトリに移動し、この設定を `.env` ファイルにコピー＆ペーストして既存の設定を置き換えてください。

    <a href="https://sequence.build/project/default/embedded-wallet?tab=integration">インテグレーションページ</a>にある新しい `PROJECT_ACCESS_KEY` と `WAAS_CONFIG_KEY` を必ず更新してください。

    ```tsx theme={null}
    # Update with your project access key
    VITE_PROJECT_ACCESS_KEY="AQAAAAAAAKJcPk5v95BJE-Q7GwdlY9hPuAM"
    # Update with your WAAS_CONFIG_KEY
    VITE_WAAS_CONFIG_KEY="eyJwcm9qZWN0SWQiOjQxNTY0LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0="
    VITE_GOOGLE= NULL
    VITE_APPLE= NULL
    VITE_WALLET_CONNECT_ID= NULL
    VITE_CHAINS= 80002
    VITE_DEFAULT_CHAIN= 80002
    ```
  </Step>

  <Step title="新しい設定のテスト">
    `.env` ファイルを保存し、ルートディレクトリで `pnpm dev` を実行して `http://localhost:4444` に戻ります。メールでウォレットにサインインし、ウォレットの動作を再度テストしてください。

    これで完了です！Overview ページでウォレット接続が確認でき、キーはプロジェクトごとにスコープされています。
  </Step>
</Steps>

次のステップ：

* [各種ソーシャル認証プロバイダー](/solutions/builder/embedded-wallet#login-providers)の設定が可能です。
* [web-sdk のさらなる機能を利用する](/sdk/web/guides/send-sponsored-tx)。
* [Sequence から ID トークンをリクエストして、バックエンドでユーザーを検証する](/sdk/headless-wallet/verification)。