Nuxt中集成Farcaster / 网络研习社#97

Farcaster是个不错的项目，很早就有留意。心理也一直想要在项目中集成，只是一昧耽搁。现在有时间了，还是要还下技术债。

Farcaster简介

Farcaster 是一个基于以太坊的充分去中心化的社交网络。它使开发人员能够创建创新的社交网络。它是一种开放协议，可以支持多个客户端。它是一种公共社交网络，类似于 Twitter 和 Reddit。用户可以创建个人档案、发布信息并关注他人。他们拥有自己的账户和与其他用户的关系，可以在不同的应用程序之间自由移动。开发人员将始终可以自由地在网络上构建具有新功能的应用程序。

Farcaster架构

Farcaster 将一些数据（如帐户创建）存储在链上，而将其他数据（如 Casts）存储在称为 Hubs 的节点上。

这是一个高层次的视图：

Farcaster使用三个智能合约（部署在 Optimism mainnet 上）来促进链上操作：

Id Registry - 此 ID 注册合约允许用户注册、转移和恢复帐户。它与 fId 绑定，fId 又与帐户创建期间使用的以太坊地址绑定
Storage Registry - 存储注册合约跟踪帐户及其存储租金。这与用户创建帐户时支付的租金相同，用于他们在 Farcaster 网络上的交互（例如，Casts、回复）。
Key Registry - 密钥注册合约跟踪注册到应用程序的密钥。这控制着应用程序是否可以代表用户进行活动（例如，发布、关注）

Nuxt中集成

Farcaster是使用Snapchain来作为数据网络，要自己运行的话还比较麻烦，这里采用第三方服务（免费）--Neynar API

https://docs.neynar.com/docs/getting-started-with-neynar

在neynar中注册个号，得到key这些就可以开始啰！

登录和发帖

<template>
<div
  class="neynar_signin"
  data-client_id="your client key"
  data-success-callback="onSignInSuccess"
>
</div>
</template>
 
<script setup>
useHead({
  script: [ 
    { src: "https://neynarxyz.github.io/siwn/raw/1.2.0/index.js",
      async: true,
    },
    { src: "/neynar.js"},
  ]
})
</script>

// neynar.js存在 public目录中
function onSignInSuccess(data) {
  console.log("1625, Sign-in success with data:", data)
  // 得到了data.signer_uuid这些， 下面是业务逻辑  
}

发帖

const farcasterCast = async (text) => {
    await fetch(
      'https://api.neynar.com/v2/farcaster/cast/',
      {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'x-api-key': 'your api key',
          },
          method: "POST",
          body: JSON.stringify({
            signer_uuid: signer_uuid, //登陆中得到的signer_uuid
            text: text
          })
      }
    )
}

到了这步，基本就大功告成了，帖子可以迅速发布到Farcaster网络上！

至于后面的功能大家可以参考相关文档集成。从登录和发帖中可以看到集成并不算困难，只是有些概念比较难理解，要通读的话可能要费一番功夫。