开源云中的联系表单和验证码后端-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>

登录后复制

)
}