Додајте живо коментарисање у апликације Val Town

На индекс страници, немојте да рендерујете један widget за број коментара по реду. То је један захтев по посту. Користите групни број, који захтева један захтев за целу страницу.

Означите сваки ред urlId‑ом који користи његова тема, а затим учитајте групни widget једном:

Групни број коментара на индекс страници

Copy Run

1

2<ul>

3 {posts.map((post) => (

4 <li>

5 <a href={post.slug}>{post.title}</a>{" "}

6 <span class="fast-comments-count" data-fast-comments-url-id={post.slug}></span>

7 </li>

8 ))}

9</ul>

10

11<script

12 dangerouslySetInnerHTML={{

13 __html: `window.FastCommentsBulkCountConfig = ${

14 JSON.stringify({ tenantId: TENANT_ID })

15 };`,

16 }}

17/>

18<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>

19

Скрипта проналази сваки елемент .fast-comments-count на страници и попуњава његов број.

data-fast-comments-url-id мора да се поклапа са urlId‑ом који користи widget за коментаре поста. Ако widget користи slug, маркер користи slug. Неусаглашеност приказује нулу на теми која има коментаре.

Скрипта проверава window.FastCommentsBulkCountConfig, па није битно да ли постављате конфигурацију пре или после script таг‑а.

If your val already knows who the visitor is, Secure SSO hands that identity to the widget so they never see a second login. There are no endpoints to build and nothing to call at runtime: you compute three values server‑side and pass them in the widget config.

Val Town ships zero‑config login with std/oauth, so the visitor can sign in with the Val Town account they already have. Swap that for whatever your app uses; the FastComments half does not change.

Изградња полезног терета на серверу

The API secret signs the payload and must never reach browser code. Install the SDK from npm, which works on Val Town's Deno runtime as‑is:

sso.ts

Copy Run

1

2import { SecureSSOPayloadBuilder } from "npm:fastcomments-sdk/server";

3

4export function buildSSOPayload(user) {

5 // id must be stable for the same person, or they get a new comment identity on every login.

6 const id = `vt-${user.id}`;

7

8 return new SecureSSOPayloadBuilder(Deno.env.get("FASTCOMMENTS_API_SECRET"), {

9 id,

10 // email is required and must be unique.

11 email: user.email ?? `${id}@users.noreply.val.town`,

12 // username is required and cannot be an email.

13 username: user.username ?? id,

14 displayName: user.username ?? undefined,

15 avatar: user.links.profileImageUrl ?? undefined,

16 }).getPayload();

17}

18

getPayload() returns { userDataJSONBase64, verificationHash, timestamp }. Those three values are all that reach the browser. The secret signs them and is then dropped, so nothing in the page lets a reader forge a different user.

Прослеђивање у виџет

Конфигурација виџета са SSO

Copy Run

1

2import { getOAuthUserData, oauthMiddleware } from "https://esm.town/v/std/oauth/middleware.ts";

3

4app.get("/", async (c) => {

5 const session = await getOAuthUserData(c.req.raw);

6 const user = session?.user;

7

8 const config = {

9 tenantId: TENANT_ID,

10 urlId: "my-thread",

11 ...(user

12 ? { sso: { ...buildSSOPayload(user), logoutURL: "/logout" } }

13 : { sso: { loginURL: "/auth/login" } }),

14 };

15

16 // ...render the widget with this config

17});

18

19export default oauthMiddleware(app.fetch);

20

oauthMiddleware adds GET /auth/login, GET /auth/callback and POST /auth/logout for you. Note that logout is a POST, while the widget navigates to logoutURL with a GET, so point logoutURL at a small route of your own that submits the POST.

When the visitor is logged out, pass sso with only a loginURL. The widget then shows a login prompt instead of an anonymous comment box.

Ствари које могу да крене

timestamp is epoch milliseconds, must not be in the future, and must not be more than two days old. Generate it on the server in the same request that computes the hash. Generating it in the browser is the classic failure: the value differs from the one that was hashed and every comment is rejected.

Never set isAdmin or isModerator from the identity provider. Signing in with a Val Town account says nothing about who should moderate your site.

See the SSO guide for the full field list, group‑gated threads, and badges.

A val је природни прималац вебхука: има стабилну URL адресу, може да верификује потпис, и има уграђену SQLite и blob складиште.

FastComments потписује ${timestamp}.${body} тајном вашег налога за API и шаље два заглавља:

Заглавља вебхука

Copy Run

1

2X-FastComments-Timestamp: 1789004710 unix seconds, not milliseconds

3X-FastComments-Signature: sha256=<hex>

4

Метод преноси догађај: PUT за креиран или ажуриран коментар, DELETE за обрисан.

Провера испоруке

Copy Run

1

2import { createHmac, timingSafeEqual } from "node:crypto";

3

4async function receive(c) {

5 // Тачни бајтови који су стигли. НЕ користите c.req.json() и поново серијализујте.

6 const rawBody = await c.req.raw.text();

7 const timestamp = c.req.raw.headers.get("X-FastComments-Timestamp");

8 const signature = c.req.raw.headers.get("X-FastComments-Signature");

9

10 if (!timestamp || !signature) return new Response("Missing headers", { status: 400 });

11

12 // Одбаци застареле испоруке како захваћени захтев не би могао бити поново реплициран касније.

13 if (Math.abs(Math.floor(Date.now() / 1000) - Number(timestamp)) > 300) {

14 return new Response("Timestamp outside window", { status: 400 });

15 }

16

17 const expected = "sha256=" + createHmac("sha256", Deno.env.get("FASTCOMMENTS_API_SECRET"))

18 .update(`${timestamp}.${rawBody}`)

19 .digest("hex");

20

21 const a = new TextEncoder().encode(signature);

22 const b = new TextEncoder().encode(expected);

23 if (a.length !== b.length || !timingSafeEqual(a, b)) {

24 return new Response("Signature mismatch", { status: 401 });

25 }

26

27 // ...обради JSON.parse(rawBody)

28 return Response.json({ received: true });

29}

30

31app.put("/", receive);

32app.delete("/", receive);

33

Две ствари које гризу

Провери сирове бајтове. Парсирање JSON-а и поновно серијализовање мења редослед кључева и размаке, па хеш буде различит и свака испорука не успе без очигледног разлога. Ово је уобичајен разлог зашто прималац вебхука "само не ради".

Упореди у константном времену. Обичан === над потписом открива колико бајтова се поклапа, што је довољно за фалсификовање једног бајта појединачно.

Обрада догађаја

Одговори брзо. FastComments поново покушава на не‑2xx одговор, а крајња тачка која стално не успева се на крају аутоматски онемогућава, па изврши прави посао након одговора уместо унутар.

Учини да рад буде идемпотентан по ID-ју коментара. Поновни покушај се поново потписује са свежим временским жигом, а исти ID коментара се поново пошиље приликом измене и брисања, тако да нема стабилног атрибута за дедаупликацију.

Four public vals you can remix, each covering one piece of this guide.

Blog with comments (live) је Markdown блог са темом испод сваког поста и збирним бројем коментара на индексу. Ради одмах када га ремиксате, а једна променљива окружења указује на ваш налог.

SSO demo (live) пријављује посетиоца помоћу њиховог Val Town налога и прослеђује тај идентитет виџету, тако да не постоји друга пријава.

Webhook receiver (live) верификује HMAC потпис на свакој испоруци и чува догађаје у SQLite. Има дугме које потписује тестни податак и испоручује га самом себи, тако да можете видети да верификација успе пре него што подесите прави вебхоок.

Agent skills (live) је библиотека FastComments агентских вештина које обухватају виџет, SSO, REST API, модерацију и миграцију са Disqus‑а. Ремиксујте је и агент Val Town‑а, Townie, аутоматски преузима вештине из skills/, тако да ваш агент зна како да постави коментаре без да ви лепите документацију у ћаскање.

The same skills install anywhere else with npx skills add fastcomments/skills.