From 266b08f2da16d0457a5a44b4a7a251d28502abc9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 31 Oct 2024 22:19:50 +0800
Subject: [PATCH] refactor: update webhooks signature api guide

---
 src/client/components/feed/FeedApiGuide.tsx   | 100 +++++++++++-------
 .../components/feed/FeedIntegration.tsx       |   3 +-
 src/client/routes/feed/$channelId/index.tsx   |  14 ++-
 src/server/trpc/routers/feed/index.ts         |  20 +++-
 4 files changed, 97 insertions(+), 40 deletions(-)

diff --git a/src/client/components/feed/FeedApiGuide.tsx b/src/client/components/feed/FeedApiGuide.tsx
index a60b465..c4a0771 100644
--- a/src/client/components/feed/FeedApiGuide.tsx
+++ b/src/client/components/feed/FeedApiGuide.tsx
@@ -3,41 +3,56 @@ import React from 'react';
 import { useTranslation } from '@i18next-toolkit/react';
 import { CodeExample } from '../CodeExample';
 
-export const FeedApiGuide: React.FC<{ channelId: string }> = React.memo(
-  (props) => {
-    const { t } = useTranslation();
+interface FeedApiGuideProps {
+  channelId: string;
+  webhookSignature?: string;
+}
+export const FeedApiGuide: React.FC<FeedApiGuideProps> = React.memo((props) => {
+  const { t } = useTranslation();
 
-    return (
-      <Card className="w-full overflow-hidden">
-        <CardHeader>
-          <div>{t('You can send a message to this channel with:')}</div>
-        </CardHeader>
-        <CardContent className="flex w-full flex-col gap-5 overflow-hidden">
-          <CodeExample
-            example={{
-              curl: {
-                label: 'curl',
-                code: generateCurlCode(props.channelId),
-              },
-              fetch: {
-                label: 'fetch',
-                code: generateFetchCode(props.channelId),
-              },
-            }}
-          />
+  return (
+    <Card className="w-full overflow-hidden">
+      <CardHeader>
+        <div>{t('You can send a message to this channel with:')}</div>
+      </CardHeader>
+      <CardContent className="flex w-full flex-col gap-5 overflow-hidden">
+        <CodeExample
+          example={{
+            curl: {
+              label: 'curl',
+              code: generateCurlCode(props.channelId, props.webhookSignature),
+            },
+            fetch: {
+              label: 'fetch',
+              code: generateFetchCode(props.channelId, props.webhookSignature),
+            },
+          }}
+        />
 
-          <div className="pl-2 font-bold">{t('OR')}</div>
+        <div className="pl-2 font-bold">{t('OR')}</div>
 
-          <div>{t('Integrate with third party with webhook')}</div>
-        </CardContent>
-      </Card>
-    );
-  }
-);
+        <div>{t('Integrate with third party with webhook')}</div>
+      </CardContent>
+    </Card>
+  );
+});
 FeedApiGuide.displayName = 'FeedApiGuide';
 
-function generateCurlCode(channelId: string) {
-  const code = `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\
+function generateCurlCode(channelId: string, webhookSignature?: string) {
+  if (webhookSignature) {
+    return `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\
+-H "Content-Type: application/json" \\
+-H "X-Webhook-Signature: ${webhookSignature}" \\
+-d '{
+  "eventName": "test name",
+  "eventContent": "test content",
+  "tags": ["test"],
+  "source": "custom",
+  "important": false
+}'`;
+  }
+
+  return `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\
 -H "Content-Type: application/json" \\
 -d '{
   "eventName": "test name",
@@ -46,12 +61,27 @@ function generateCurlCode(channelId: string) {
   "source": "custom",
   "important": false
 }'`;
-
-  return code;
 }
 
-function generateFetchCode(channelId: string) {
-  const code = `fetch('${window.location.origin}/open/feed/${channelId}/send', {
+function generateFetchCode(channelId: string, webhookSignature?: string) {
+  if (webhookSignature) {
+    return `fetch('${window.location.origin}/open/feed/${channelId}/send', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'X-Webhook-Signature': '${webhookSignature}'
+  },
+  body: JSON.stringify({
+    eventName: 'test name',
+    eventContent: 'test content',
+    tags: ['test'],
+    source: 'custom',
+    important: false,
+  })
+})`;
+  }
+
+  return `fetch('${window.location.origin}/open/feed/${channelId}/send', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json'
@@ -64,6 +94,4 @@ function generateFetchCode(channelId: string) {
     important: false,
   })
 })`;
-
-  return code;
 }
diff --git a/src/client/components/feed/FeedIntegration.tsx b/src/client/components/feed/FeedIntegration.tsx
index 5b9199e..eb34038 100644
--- a/src/client/components/feed/FeedIntegration.tsx
+++ b/src/client/components/feed/FeedIntegration.tsx
@@ -8,6 +8,7 @@ import { FaStripe } from 'react-icons/fa6';
 
 export const FeedIntegration: React.FC<{
   feedId: string;
+  webhookSignature: string;
 }> = React.memo((props) => {
   const { t } = useTranslation();
 
@@ -92,7 +93,7 @@ export const FeedIntegration: React.FC<{
 
             <CodeBlock
               code={`POST ${window.location.origin}/open/feed/${props.feedId}/send
-
+${props.webhookSignature ? `\nHeader:\nX-Webhook-Signature: ${props.webhookSignature}\n` : ''}
 Body
 {
   eventName: "",
diff --git a/src/client/routes/feed/$channelId/index.tsx b/src/client/routes/feed/$channelId/index.tsx
index a29331b..3217a4b 100644
--- a/src/client/routes/feed/$channelId/index.tsx
+++ b/src/client/routes/feed/$channelId/index.tsx
@@ -114,7 +114,12 @@ function PageComponent() {
               {info?.id && (
                 <DialogWrapper
                   title={t('Integration')}
-                  content={<FeedIntegration feedId={info.id} />}
+                  content={
+                    <FeedIntegration
+                      feedId={info.id}
+                      webhookSignature={info.webhookSignature}
+                    />
+                  }
                 >
                   <Button variant="default" size="icon" Icon={LuWebhook} />
                 </DialogWrapper>
@@ -194,7 +199,12 @@ function PageComponent() {
           )}
           renderEmpty={() => (
             <div className="w-full overflow-hidden p-4">
-              {!isInitialLoading && <FeedApiGuide channelId={channelId} />}
+              {!isInitialLoading && (
+                <FeedApiGuide
+                  channelId={channelId}
+                  webhookSignature={info?.webhookSignature}
+                />
+              )}
             </div>
           )}
         />
diff --git a/src/server/trpc/routers/feed/index.ts b/src/server/trpc/routers/feed/index.ts
index 50b03a8..28b933d 100644
--- a/src/server/trpc/routers/feed/index.ts
+++ b/src/server/trpc/routers/feed/index.ts
@@ -325,9 +325,27 @@ export const feedRouter = router({
       )
     )
     .output(FeedEventModelSchema)
-    .mutation(async ({ input }) => {
+    .mutation(async ({ input, ctx }) => {
       const { channelId, ...data } = input;
 
+      const channel = await prisma.feedChannel.findUnique({
+        where: {
+          id: channelId,
+        },
+      });
+      if (channel?.webhookSignature) {
+        const signature = ctx.req.headers['x-webhook-signature'];
+        if (!signature) {
+          throw new Error(
+            'This channel configured with webhook signature, but no signature found'
+          );
+        }
+
+        if (channel.webhookSignature !== signature) {
+          throw new Error('Invalid webhook signature');
+        }
+      }
+
       const event = await prisma.feedEvent.create({
         data: {
           ...data,