開源雲端中的聯絡表單和驗證碼後端-js教程-PHP中文網

透過用於表單收集和驗證碼處理的開源後端服務，您可以實現具有垃圾郵件防護的聯絡表單，而無需為此開發自己的後端服務。這些後端服務也可以在開源雲端中使用，因此您也不必自己託管這些後端服務。

在這篇部落格中，我將描述如何快速取得聯絡表單，將訊息傳送到 Slack 頻道。

Contact form and CAPTCHA backend in Open Source Cloud

創建 Slack 機器人

Slack 機器人將把訊息發佈到 Slack 中的頻道。造訪 https://api.slack.com/apps/ 並建立一個具有發佈到所需 Slack 頻道權限的新應用程式。

儲存 Slack Bot 令牌，因為這將在本教學後面使用。

在開源雲端中建立表單後端服務

登入或註冊開源雲端帳戶。

導覽至聯絡表單服務並點選「服務機密」標籤。點擊“New Secret”並新增包含先前獲得的 Slack Bot 令牌的金鑰。

Contact form and CAPTCHA backend in Open Source Cloud

按「建立服務」按鈕建立聯絡表單服務。

Contact form and CAPTCHA backend in Open Source Cloud

為服務命名並在傳輸下拉清單中選擇 slack。提供持有令牌的服務金鑰並輸入應發佈訊息的頻道的 ID。

Contact form and CAPTCHA backend in Open Source Cloud

服務啟動並執行後，您可以將 URL 複製並儲存到聯絡表單服務。

React 中的聯絡表單範例

在前端應用程式中開發聯絡表單，在 React 中可能看起來像這樣。將 BACKEND-SERVICE-URL 替換為上面取得的 URL。


'use client';
import { Input, Textarea } from '@nextui-org/react';

export default function Page() {
  const handleSubmit = (formData: any) => {
    fetch(new URL('BACKEND-SERVICE-URL/contact'), {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams(formData).toString()
    });
  };

  return (

登入後複製

) }

提交表單後，您現在應該會在 Slack 頻道中收到一則訊息。為了防止垃圾郵件機器人濫用此表單，我們需要新增驗證碼。 CAPTCHA 是一個縮寫詞，代表「完全自動化的公共圖靈測試來區分電腦和人類。」

為了提供此功能，我們將使用開源驗證碼後端服務來產生和驗證驗證碼。其工作原理是產生顯示文字的驗證碼圖像。然後，您要求使用者（人類）提供他或她看到的文本，後端將驗證這是否是圖像中顯示的文字。

在開源雲端建立驗證碼後端服務

導覽至驗證碼服務並點選「建立服務」按鈕。

Contact form and CAPTCHA backend in Open Source Cloud

為服務命名，服務啟動後將 URL 複製到該服務。將下面的 CAPTCHA-SVC-URL 替換為此 URL。

將 CAPTCHA 驗證新增至您的表單中

使用以下程式碼擴充我們上面建立的表單。


<p>'use client';<br>
import { Input, Textarea } from '@nextui-org/react'; </p>

<p>export default function Page() {<br>
  const [captchaSvg, set開源雲端中的聯絡表單和驗證碼後端Svg] = useState<string null>(null);<br>
  const [captchaId, set開源雲端中的聯絡表單和驗證碼後端Id] = useState('');<br>
  const [captcha, set開源雲端中的聯絡表單和驗證碼後端] = useState('');<br>
  const [invalid開源雲端中的聯絡表單和驗證碼後端, setInvalid開源雲端中的聯絡表單和驗證碼後端] = useState(true);</string></p>

<p>useEffect(() => {<br>
    fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))<br>
      .then((response) => response.json())<br>
      .then((data) => {<br>
        set開源雲端中的聯絡表單和驗證碼後端Svg(data.svg);<br>
        set開源雲端中的聯絡表單和驗證碼後端Id(data.id);<br>
      });<br>
  }, []);</p>

<p>const on開源雲端中的聯絡表單和驗證碼後端Change = (value: string) => {<br>
    set開源雲端中的聯絡表單和驗證碼後端(value);<br>
    fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))<br>
      .then((response) => {<br>
        setInvalid開源雲端中的聯絡表單和驗證碼後端(!response.ok);<br>
      })<br>
      .catch(() => {<br>
        setInvalid開源雲端中的聯絡表單和驗證碼後端(true);<br>
      });<br>
  };</p>

<p>const handleSubmit = (formData: any) => {<br>
    fetch(new URL('BACKEND-SERVICE-URL/contact'), {<br>
      method: 'POST',<br>
      headers: {<br>
        'Content-Type': 'application/x-www-form-urlencoded'<br>
      },<br>
      body: new URLSearchParams(formData).toString()<br>
    });<br>
  };</p>

<p>return (<br>
    </p>

登入後複製

)
}