开源云中的联系表单和验证码后端

通过用于表单收集和验证码处理的开源后端服务，您可以实现具有垃圾邮件防护的联系表单，而无需为此开发自己的后端服务。这些后端服务也可以在开源云中使用，因此您也不必自己托管这些后端服务。

在这篇博客中，我将描述如何快速获取联系表单，将消息发送到 Slack 频道。

创建 Slack 机器人

Slack 机器人将把消息发布到 Slack 中的频道。访问 https://api.slack.com/apps/ 并创建一个具有发布到所需 Slack 频道权限的新应用。

保存 Slack Bot 令牌，因为这将在本教程后面使用。

在开源云中创建表单后端服务

登录或注册开源云帐户。

导航到联系表单服务并单击“服务机密”选项卡。单击“New Secret”并添加包含之前获得的 Slack Bot 令牌的密钥。

按“创建服务”按钮创建联系表单服务。

为服务命名并在传输下拉列表中选择 slack。提供持有令牌的服务密钥并输入应发布消息的频道的 ID。

服务启动并运行后，您可以将 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 是一个缩写词，代表“完全自动化的公共图灵测试来区分计算机和人类。”

为了提供此功能，我们将使用开源验证码后端服务来生成和验证验证码。其工作原理是生成显示文本的验证码图像。然后，您要求用户（人类）提供他或她看到的文本，后端将验证这是否是图像中显示的文本。

在开源云中创建验证码后端服务

导航到验证码服务并单击“创建服务”按钮。

为服务命名，服务启动后将 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>

name="message"<br> minRows={8}<br> placeholder="Tell us a bit about what you want our help with"<br> /><br> {captchaSvg && (<br> <image src="%7BcaptchaSvg%7D" classname="bg-white" alt="开源云中的联系表单和验证码后端"></image><br> )}<br> <input> name="captcha"<br> placeholder="Enter the text from the image"<br> description="This is used to prevent automated submissions."<br> required<br> maxLength={4}<br> value={captcha}<br> onValueChange={on开源云中的联系表单和验证码后端Change}<br> /><br> <input type="submit" value="Send" isdisabled="{invalid开源云中的联系表单和验证码后端}"><br>

)
}

结论

这是一个示例，说明如何向 Web 应用程序添加带有 CAPTCHA 验证的联系表单，并将其发布到 Slack 频道，而无需为其构建或托管自己的后端服务。

什么是开源云？

开源云减少了开始使用开源的障碍，并减少了创建者将其软件作为服务提供的障碍。在这篇文章中详细了解我们开发它的原因。

以上是开源云中的联系表单和验证码后端的详细内容。更多信息请关注PHP中文网其他相关文章！