tech

Orbis 协议与 Thirdweb 的集成

为了使 DApp 在 Web3 和 Web2 用户中得到更广泛的采用，我将 Thirdweb Connect 与 Web3 钱包和社交登录选项集成在一起。 利用 Orbis 使我们的用户能够在生态系统内重复使用去中心化身份。

Orbis 协议与 Thirdweb 的集成
一键发币： x402兼容 | Aptos | X Layer | SUI | SOL | BNB | ETH | BASE | ARB | OP | Polygon | Avalanche

当构建一个旨在让用户返回对其社交数据、交互和关系的控制权和所有权的 DApp 时，去中心化的社交图谱可能会很有用。 我考虑使用的前两个社交图谱是 Lens Protocol 和 Farcaster。

但是，使用这两种协议的用户可能会遇到一些困难。 Lens 要求用户通过白名单索取 Lens 句柄，而 Farcaster 则要求用户预先支付年度存储费。

我们的团队感到沮丧，因为拉新摩擦（onboarding friction）可能会吓跑潜在用户。 我认为另一种解决方案是将数据存储在智能合约和去中心化数据存储上（如 IPFS / Arweave）。 为了降低成本，我们可以利用一些 Gas 费明显低于以太坊的区块链。 该解决方案的缺点是 1）无论 Gas 多么低，它都不是完全免费的 2）用户需要为其行为签署交易，这可能会影响用户体验 3）如何使社交数据在社区中可用 其他 DApp。 我们的团队也不可能从头开始构建另一个社交图谱。

经过几天的研究，我找到了Orbis。 Orbis 提供建立在 Ceramic 网络之上的社交基础设施，因此无需使用 Gas。 Orbis 的另一个有益功能是在新用户加入时只需要单一签名。

为了使 DApp 在 Web3 和 Web2 用户中得到更广泛的采用，我将 Thirdweb Connect 与 Web3 钱包和社交登录选项集成在一起。 在这种设计中，用户无需设置和记住另一个密码。 利用 Orbis 还使我们的用户能够在生态系统内重复使用去中心化身份。

1、将 Orbis 与 Web3 社交拉新集成

Orbis 提供了一个演示以及开源的代码片段，以展示与 Privy、Magic 和 Web3Auth 的无缝 Web3 社交拉新，你可以在Mirror上阅读更多相关信息。

请注意，到目前为止仅支持 EOA 钱包，Ceramic（Orbis 所基于的数据网络）不支持智能合约签名。 这意味着我们尚无法将 Thirdweb 智能钱包与 Orbis 一起使用。

由于我个人是 Thirdweb 开发工具的忠实粉丝，因此我想将 Orbis 和 Thirdweb Connect 集成到我的 DApp 中。 集成需要对 Orbis 团队提供的代码示例进行一些修改。 我还感谢 Orbis 开发人员 Donat 帮助我解决了集成过程中遇到的挑战。

在provider-utility.js中，我们需要使用自定义的启用和请求函数来包装提供程序：

export const processToOrbisProvider = (signer) => {
  const provider = signer?.provider;

  provider.enable = async () => [await signer.getAddress()];

  provider.request = async (payload) => {
    if (payload.method === "personal_sign") {
      const message = payload.params[0];

      if (/^(0x)?[0-9A-Fa-f]+$/i.test(message)) {
        const bufferMessage = Buffer.from(
          message.startsWith("0x") ? message.slice(2) : message,
          "hex"
        );
        return signer.signMessage(bufferMessage);
      }

      return signer.signMessage(message);
    }

    return provider.send(payload.method, payload.params || []);
  };

  return provider;
};

在 orbis-context.tsx 中，如果用户已登录，我们将连接到 Orbis；如果用户未登录，我们将断开连接。

"use client"

import { FunctionComponent, ReactNode, createContext, useContext, useEffect } from "react";
import { Orbis } from "@orbisclub/orbis-sdk";
import { useSigner, useUser } from '@thirdweb-dev/react';
import { processToOrbisProvider } from "@/lib/provider-utility";

// you may add extra fields in this context
export const OrbisContext = createContext({});

export function useOrbis() {
  return useContext(OrbisContext);
}

interface IOrbisState {
  children?: ReactNode;
}
interface IOrbisProps {
  children?: ReactNode;
}

const orbis = new Orbis({});

export const OrbisProvider: FunctionComponent<IOrbisState> = ({ children }: IOrbisProps) => {
  const signer = useSigner()
  const { isLoggedIn } = useUser();

  useEffect(() => {
    async function checkOrbisSession() {
      const orbisConnected = await orbis.isConnected();

      if (orbisConnected && !isLoggedIn) {
        orbis.logout()
      }

      if (!orbisConnected && isLoggedIn) {

        const provider = signer?.provider;
        if (provider) {
          const orbisProvider = processToOrbisProvider(signer)
          const orbisConnection = await orbis.connect_v2({
            chain: "ethereum",
            provider: orbisProvider,
          });
        }
      }
    }
    checkOrbisSession()
  }, [signer, isLoggedIn])

  return <OrbisContext.Provider value={{}}> {children} </OrbisContext.Provider>;
}

确保将 ThirdwebProvider 置于 OrbisProvider 的上层，因为我们需要在 OrbisProvider 中使用 Thirdweb 功能。

app/layout.tsx：

import { ThirdwebProvider } from '@/components/thirdweb/thirdweb-provider' // setup your ThirdwebProvider based on Thirdweb guide, nothing special here
import { OrbisProvider } from '@/components/orbis/orbis-context'
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThirdwebProvider>
          <OrbisProvider>
            {children}
          </OrbisProvider>
        </ThirdwebProvider>
      </body>
    </html>
  )
}

与代码示例 orbis-web2-auth-examples 的差异：

我们不会将提供程序转换为 BrowserProvider (Ethers v6) 或 Web3Provider (Ethers v5)。 这是因为在连接 Web3 钱包时我们已经有了 Web3Provider，而如果使用社交登录则不是这样。

获取签名者有两种方式：

  • 来自 useSigner
import { useSigner} from '@thirdweb-dev/react';
const signer = useSigner();
/// ...
  • 来自 provider.getSigner()
import { useSigner} from '@thirdweb-dev/react';

/// ...
const signer = useSigner();
const provider = signer?.provider;
const orbisProvider = walletToBrowserProvider(provider);
/// ...

export const walletToBrowserProvider = (provider) => {
  provider.enable = async () => [await provider.getSigner().getAddress()];

  provider.request = async (payload) => {
    if (payload.method === "personal_sign") {
      const signer = await provider.getSigner();
      const message = payload.params[0];

      if (/^(0x)?[0-9A-Fa-f]+$/i.test(message)) {
        const bufferMessage = Buffer.from(
          message.startsWith("0x") ? message.slice(2) : message,
          "hex"
        );
        return signer.signMessage(bufferMessage);
      }

      return signer.signMessage(message);
    }

    return provider.send(payload.method, payload.params || []);
  };

  return provider;
};

如果是Web3钱包登录，我们用这两种方法得到的签名者是相同的。 对于社交登录（Thirdweb 嵌入式钱包）， provider.getSigner() 返回 JsonRpcSigner 的实例，而  Signer 返回 EthersSigner 的实例。 由于默认情况下社交登录不附带钱包，因此我们需要 EthersSigner 的函数（例如： getAddress），以便可以通过 EmbeddedWalletIframeCommunicator 进行处理。

原文链接：Integrate Orbis Protocol with Thirdweb

DefiPlot翻译整理，转载请标明出处

免责声明：本站资源仅用于学习目的，也不应被视为投资建议，读者在采取任何行动之前应自行研究并对自己的决定承担全部责任。

Read next