「zkLogin」タグの記事が1件件あります

注目: zkLogin は、ユーザー体験を根本から変える可能性があります。

なぜウォレットが初回コンバージョンを阻害するのか​

UX リサーチャーは、ウォレットのプロンプトが表示された瞬間に 87% の離脱が起きることを観測しました。ある実験では、そのプロンプトをチェックアウトプロセスの後半に回すだけで完了率が 94% に転換しました。暗号に興味はあるものの、ユーザーの主な不安は「間違ったボタンを押したら資金を失うかもしれない」というものです。この単一の恐怖感のあるステップを取り除くことが、指数的成長への鍵となります。

zkLogin の仕組み（平易な説明）​

zkLogin は、すべてのインターネットユーザーがすでに信頼している技術を利用して、ウォレット問題を巧みに回避します。以下の数ステップで裏側で魔法が起きます：

1. エフェメラルキー・ペア：ユーザーがサインインしようとすると、ブラウザ内で一時的な単一セッション用キー・ペアがローカルに生成されます。これはこのセッションだけ有効な一時的なパスキーと考えてください。

2. OAuth フロー：ユーザーは Google、Apple、またはその他のソーシャルアカウントでサインインします。アプリはこのログインリクエストにユニークな値（nonce）を巧みに埋め込みます。

3. ZKP サービス：ログインが成功すると、ZKP（ゼロ知識証明）サービスが暗号証明を生成します。この証明は「この OAuth トークンは一時的なパスキーの所有者を認可する」ことを確認しますが、ユーザーの個人情報をオンチェーンで公開することはありません。

4. アドレス導出：OAuth プロバイダーから取得したユーザーの JWT（JSON Web Token）をユニークな salt と組み合わせ、決定的に永続的な Sui アドレスを生成します。salt はクライアント側または安全なバックエンドで非公開に保持されます。

5. トランザクション送信：アプリは一時的なキーでトランザクションに署名し、ZK 証明を添付します。Sui バリデータはオンチェーンで証明を検証し、ユーザーが従来のウォレットを必要とせずに取引の正当性を確認します。

ステップバイステップ統合ガイド​

実装の準備はできましたか？以下は TypeScript SDK を使用した簡単なガイドです。Rust や Python でも同様の原則が適用されます。

1. SDK のインストール​

@mysten/sui パッケージには、必要なすべての zklogin ヘルパーが含まれています。

npm install @mysten/sui

2. Generate Keys & Nonce​

まず、エフェメラルキー・ペアと、Sui ネットワーク上の現在エポックに紐付く nonce を作成します。

// TypeScript の例
import { SuiClient } from "@mysten/sui.js";
const client = new SuiClient({ url: "https://fullnode.devnet.sui.io:443" });

3. Redirect to OAuth​

使用しているプロバイダー（例：Google、Facebook、Apple）向けの適切な OAuth ログイン URL を構築し、ユーザーをリダイレクトします。

4. Decode JWT & Fetch User Salt​

ユーザーがログインしてリダイレクトされた後、URL から id_token を取得します。これを使ってバックエンドからユーザー固有の salt を取得し、Sui アドレスを導出します。

// TypeScript の例
const urlParams = new URLSearchParams(window.location.search);
const idToken = urlParams.get("id_token");
// バックエンドから salt を取得し、アドレスを導出

5. Request ZK Proof​

JWT をプローバーサービスに送信して ZK 証明を取得します。開発環境では Mysten のパブリックプローバーを利用できます。本番環境では自前のプローバーをホストするか、Enoki のようなサービスを利用すべきです。

// TypeScript の例
const proofResponse = await fetch("https://prover.mystenlabs.com", {
  method: "POST",
  body: JSON.stringify({ jwt: idToken }),
});
const zkProof = await proofResponse.json();

6. Sign & Send​

次にトランザクションを構築し、送信者をユーザーの zkLogin アドレスに設定して実行します。SDK は zkLoginInputs（証明）の添付を自動で処理します。✨

// TypeScript の例
const tx = await client.signAndExecuteTransactionBlock({
  transactionBlock: transaction,
  signer: temporaryKeyPair,
  zkLoginInputs: zkProof,
});

7. Persist Session​

よりスムーズなユーザー体験のため、キー・ペアと salt を暗号化して IndexedDB またはローカルストレージに保存します。セキュリティ向上のため、数エポックごとにローテーションすることを忘れずに。

KPI Projection Template​

zkLogin がもたらす違いは定性的だけでなく、定量的にも測れます。典型的なオンボーディングファネルと zkLogin を活用したファネルを比較してみましょう：

👉 意味するところ: 1 万人のユニーク訪問者を集めるキャンペーンでは、300 件の初日オンチェーンアクションと、2,500 件以上の差が生まれます。

Best Practices & Gotchas​

よりシームレスな体験を実現するため、以下のポイントに留意してください：

• スポンサー付きトランザクションを使用：ユーザーの最初の数回の取引手数料を支払います。これによりすべての摩擦が除去され、驚きの「 aha 」体験が得られます。
• Salt の取り扱いに注意：ユーザーの salt を変更すると新しいアドレスが生成されます。信頼できるリカバリーパスを確保できる場合にのみ実施してください。
• Sui アドレスを公開：サインアップ後にユーザーにオンチェーンアドレスを表示します。上級ユーザーは後で従来のウォレットにインポートできるようになります。
• リフレッシュループ防止：JWT とエフェメラルキー・ペアを有効期限までキャッシュし、ユーザーに繰り返しログインさせるのを防ぎます。
• プローバーのレイテンシ監視：証明生成の往復時間を監視します。2 秒を超える場合は、地域プローバーをホストして高速化を検討してください。

Where BlockEden.xyz Adds Value​

zkLogin がユーザー向けフローを完璧にする一方で、スケールさせると新たなバックエンド課題が生じます。そこで BlockEden.xyz の出番です。

• API レイヤー：高スループットでジオルーティングされた RPC ノードにより、ユーザーの所在地に関係なく zkLogin トランザクションが最小レイテンシで処理されます。
• 可観測性：証明レイテンシ、成功/失敗比率、コンバージョンファネルの健全性などの主要指標を追跡できるダッシュボードがすぐに利用可能です。
• コンプライアンス：法定通貨へのブリッジを行うアプリ向けに、オプションの KYC モジュールがユーザーの検証済み身元から直接コンプライアンス対応のオンランプを提供します。

Ready to Ship?​

使いにくく威圧的なウォレットフローの時代は終わりました。zkLogin サンドボックスを立ち上げ、BlockEden のフルノードエンドポイントを接続すれば、サインアップグラフが上向きに伸びるのが見えるでしょう—ユーザーは「ウォレット」という言葉すら聞くことはありません。😉

# デプロイ用のコマンド例
npm run build && npm publish