まいにちDapps#6 トークンゲート機能を持ったwebサイトやコンテンツの作成方法

まいにちDapps6日目の今日は、トークンゲートの実装について考察したいと思います。「トークンゲート」とは、特定のトークンを保有しているユーザーのみがアクセスできるコンテンツやサービスを提供する仕組みのことを指します。ここでいうトークンはNFTやERC20トークンのことを指します。トークンゲートを用いることで特定のコミュニティやサービスに対するエクスクルーシブなアクセスを提供することができ、これにより新しいビジネスモデルやマネタイゼーション戦略が可能になります。

Thirdweb Auth

まずは自分で実装をしてみる方法ですが、Thirdwebが出している公式記事やそれを和訳したユウキさんの記事が参考になります。

https://blog.thirdweb.com/guides/nft-gated-website/

https://zenn.dev/yuki2020/articles/77f0f452bdbea4

ポイントとしてはgetServersideProps内でNFTの保有確認をしているので、バックエンド側で確認をしているということですね。

// Instantiate our SDK
  const sdk = ThirdwebSDK.fromPrivateKey(
    process.env.THIRDWEB_AUTH_PRIVATE_KEY,
    "mumbai"
  );

  // Check to see if the user has an NFT
  const hasNft = await checkBalance(sdk, user.address);

  // If they don't have an NFT, redirect them to the login page
  if (!hasNft) {
    console.log("User", user.address, "doesn't have an NFT! Redirecting...");
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

また、注意として上記記事・コードはNext.jsのPagesディレクトリの仕様を想定されていて、appsディレクトリだと期待通りの挙動をしないのでご注意ください。

Lit Protocol

Lit Protocolは、暗号鍵ペアの作成と管理を分散して行うことで、条件付き暗号化やプログラムによる署名の実現を目的としたプロトコルです。
分散型鍵管理ネットワークとして機能するLit Protocolは、集中型鍵保管サービスや他の鍵管理ソリューションの代わりとして利用できます。

Lit ProtocolのSDKを使ってトークンゲートを作成するチュートリアルがあったので紹介します

https://medium.com/coinmonks/token-gating-with-lit-protocol-b27ef6141696

nextjsのプロジェクトを立ち上げ、必要なモジュールをインストールします。

yarn add @lit-protocol/lit-node-client yarn add cookies js-cookie uuid yarn add -D @types/cookies @types/js-cookie @types/uuid

チュートリアルをより簡略化してこのようなコードにしました。

"use client";

import * as LitJsSdk from "@lit-protocol/lit-node-client";
import { useState } from "react";
import Cookies from "js-cookie";
import { v4 as uuid } from "uuid";

export default function Home() {
  const [connected, setConnected] = useState(false);
  const [isVerified, setIsverified] = useState(false);
  const id = uuid();

  const accessControlConditions = [
    {
      contractAddress: "0xE71eE93Ad57c8b355e1bCDFe435B05673d8B4930",
      standardContractType: "ERC721",
      chain: "mumbai",
      method: "balanceOf",
      parameters: [":userAddress"],
      returnValueTest: {
        comparator: ">",
        value: "0",
      },
    },
  ];

  async function connect() {
    const resourceId = {
      baseUrl: "http://localhost:3000",
      path: "/contactus",
      orgId: "",
      role: "",
      extraData: id,
    };
    const client = new LitJsSdk.LitNodeClient({ alertWhenUnauthorized: false });

    await client.connect();

    if (client) {
      console.log("Am Connected");
    }

    const authSig = await LitJsSdk.checkAndSignAuthMessage({ chain: "mumbai" });

    await client.saveSigningCondition({
      accessControlConditions,
      chain: "mumbai",
      authSig,
      resourceId,
    });

    try {
      const jwt = await client.getSignedToken({
        accessControlConditions,
        chain: "mumbai",
        authSig,
        resourceId: resourceId,
      });
      /**
       * Store retrieve jwt in cookies with the name lit-auth
       */
      Cookies.set("lit-auth", jwt, { expires: 1 });

      const { verified, payload } = LitJsSdk.verifyJwt({ jwt });

      setIsverified(verified);
    } catch (err) {
      console.log("error: ", err);
    }

    setConnected(true);
  }
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {connected ? (
        <>{isVerified ? <>secret content</> : <>not an NFT holder</>}</>
      ) : (
        <button onClick={connect}>Connect</button>
      )}
    </main>
  );
}

サインインするとこのようになります。

Collab.Land

Collab.Landはweb3界隈のdiscordユーザーなら一度は触ったことのあるツールだと思います。Discordをトークンホルダー限定にするツールとして人気ですね。その方法については記事がたくさんあるのでここでは割愛するとして、APIを使って自分のサイトをトークンゲート化することもできるみたいです。

https://dev.collab.land/docs/tutorials/token-gating-tutorial