返回

文章详情

X402,一个静态博客变现的练习

Hacker News2026年7月6日 10:37

x402 Cloudflare 最近发布了一则公告,关于变现网关的推出。这在很多方面都是革命性的。它消除了变现的高门槛,让您可以非常精确地控制收费项目以及最低付款金额。这实际上可以改变我们使用互联网的方式,使广告经济不再主导互联网。这听起来像是一个理想的工具,用于变现博客或 API。例如,即使我没有任何可以变现的内容,这项技术对我来说似乎太重要了,我必须尝试一下。那么,就让我们这样做吧。 计划 不幸的是,Cloudflare 的服务似乎仍然处于封闭测试阶段(?),这意味着您目前无法自由访问,您需要加入候补名单。所以我们能做的就是自己实现这个功能。这不是更有趣吗? 幸运的是,这听起来是一个相当简单的设置。虽然这会为一个静态博客增加几个可移动的部分,但并不是您一天内无法解决的事情。那么,我们需要什么才能让它工作? 1. 一个接收资金的钱包 2. 一个执行支付处理逻辑的 Worker 3. 我们希望收费的资源 我有第 1 和第 3 项,但没有第 2 项。现在在这个角色中,我将使用 Cloudflare Workers,因为我在那儿托管我的网站。这也决定了我们将用 TypeScript 实现的语言选择。也许以后我会重新实现它并托管在我的本地服务器上,但为了保持实验的可管理性——我们现在就坚持使用 Cloudflare。 中间件 那么让我们直接进入。我们需要的第一件事是一个中间件,它将接收请求,并确保仅在付款后授予访问权限,同时处理价格披露。官方文档中有一个如何在 Hono 中实现它的示例,所以我们将使用它。对代码进行一些修改,以便它可以在 Cloudflare Worker 而不是独立服务器上运行,放入我们的钱包,并用一个更有用的端点替换示例端点——我们得到这个: ```javascript import { Hono } from "hono"; import type { MiddlewareHandler } from "hono"; import { paymentMiddleware, x402ResourceServer } from "@x402/hono"; import { ExactEvmScheme } from "@x402/evm/exact/server"; import { ExactSvmScheme } from "@x402/svm/exact/server"; import { HTTPFacilitatorClient } from "@x402/core/server"; const app = new Hono(); const evmAddress = "0xD040AEACCdFf083C5D4cB221F1533e8719a84F0e"; const svmAddress = "HjexCvNzgxJT3Ni7rb98WF4pQGEX2fN7G6Zh26B19mBc"; const facilitatorClient = new HTTPFacilitatorClient({ url: "https://x402.org/facilitator", }); let payment: MiddlewareHandler | undefined; app.use(async (c, next) => { payment ??= paymentMiddleware({ "GET /api/joke": { accepts: [ { scheme: "exact", price: "$0.01", network: "eip155:84532", payTo: evmAddress, }, { scheme: "exact", price: "$0.01", network: "solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1", payTo: svmAddress, }, ], description: "A premium, hand-picked joke", mimeType: "application/json", }, }, new x402ResourceServer(facilitatorClient) .register("eip155:84532", new ExactEvmScheme()) .register("solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1", new ExactSvmScheme()), ); return payment(c, next); }); const jokes = []; app.get("/api/joke", (c) => { return c.json({ joke: jokes[Math.floor(Math.random() * jokes.length)], }); }); export default app; ``` Worker 还需要一个 wrangler.jsonc(cloudflare 具体要求) ```json { "name": "x402-poc", "main": "src/index.ts", "compatibility_date": "2026-07-01", "compatibility_flags": ["nodejs_compat"], "env": { "production": { "name": "x402-poc", "routes": [{ "pattern": "shtein.me/api/*", "zone_name": "shtein.me" }] } } } ``` 这里有两个不明显的部分:nodejs_compat 是必需的,因为 x402 包导入了 Node 内置模块(events、crypto、url),而且没有它构建会失败。而路线故意只存在于生产环境中:定义了一个路线,wrangler dev 会模拟该路线的主机,因此中间件生成的 URL 会指向真实域名,而不是 localhost。 在本地运行: npx wrangler dev 并发送测试请求 - 我们会看到充值墙: ``` curl -i http://localhost:8787/api/joke ``` ``` HTTP/1.1 402 Payment Required Content-Length: 2 Content-Type: application/json PAYMENT-REQUIRED: eyJ4NDAyVmVyc2lvbiI6MiwiZXJyb3IiOiJQYXltZW50IHJlcXVpcmVkIiwicmVzb3VyY2UiOnsidXJsIjoiaHR0cDovL2xvY2FsaG9zdDo4Nzg3L2FwaS9qb2tlIiwiZGVzY3JpcHRpb24iOiJBIHByZW1pdW0sIGhhbmQtcGlja2VkIGpva2UiLCJtaW1lVHlwZSI6ImFwcGxpY2F0aW9uL2pzb24ifSwiYWNjZXB0cyI6W3sic2NoZW1lIjoiZXhhY3QiLCJuZXR3b3JrIjoiZWlwMTU1Ojg0NTMyIiwiYW1vdW50IjoiMTAwMDAiLCJhc3NldCI6IjB4MDM2Q2JENTM4NDJjNTQyNjYzNGU3OTI5NTQxZUMyMzE4ZjNkQ0Y3ZSIsInBheVRvIjoiMHhEMDQwQUVBQ0NkRmYwODNDNUQ0Y0IyMjFGMTUzM2U4NzE5YTg0RjBlIiwibWF4VGltZW91dFNlY29uZHMiO...```

赞助内容

NordVPN Next-gen Antivirus

本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。

请我喝杯咖啡