In order to get secure and verified Frame Data from Farcaster, we need to hook up a Farcaster Hub. In this example, we'll use the free Hub from Pinata to verify the Frame Signature and get the user's Farcaster ID.
We'll use Frog.fm to construct our frame and spin up a local host server. In order to test our frame validation, we use Ngrok to expose our local server to the internet.
This way, we can use the official Frame Validator from Warpcast to test our local code and frame environment!
After our local environment is hooked up and working, we can get even more secured user data using the Neynar Middleware that is provided by Frog.fm. This will let us access data such as display name, follower count, profile picture, and much more!
GitHub Repo:
https://github.com/ChangoMan/frog-verified-frame/blob/main/api/index.tsx
Frog.fm:
https://frog.fm/
Ngrok:
https://ngrok.com/
Join me on Farcaster!
https://warpcast.com/~/invite-page/341454?id=497d9b60
Pinata Hub API:
https://docs.pinata.cloud/farcaster/hubs
00:00 - Intro
00:23 - Installing Frog.fm with Vercel
01:21 - Setup Frog.fm Local Devtools
02:04 - Adding A Hub For Trusted Data
04:02 - Setup Ngrok For Local Debugging
05:51 - Console.log Verified FrameData
08:38 - Using Neynar Middleware
11:00 - Getting Profile Picture URL
12:44 - Custom Middleware - Frog.fm
