オープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド

フォーム収集と CAPTCHA 処理用のオープンソース バックエンド サービスを使用すると、独自のバックエンド サービスを開発しなくても、スパム保護機能を備えたお問い合わせフォームを実装できます。これらのバックエンド サービスはオープンソース クラウドでも利用できるため、これらのバックエンド サービスを自分でホストする必要もありません。

このブログでは、メッセージが Slack チャネルに送信される問い合わせフォームをすばやく取得する方法について説明します。

Slack ボットを作成する

Slack ボットは、Slack のチャネルにメッセージを投稿します。 https://api.slack.com/apps/ にアクセスし、目的の Slack チャネルに投稿する権限を持つ新しいアプリを作成します。

このチュートリアルの後半で使用するため、Slack Bot トークンを保存します。

オープンソース クラウドでフォーム バックエンド サービスを作成する

Open Source Cloud にログインするか、アカウントにサインアップします。

Contact Form Service に移動し、「Service Secrets」タブをクリックします。 [新しいシークレット] をクリックし、前に取得した Slack Bot トークンを含むシークレットを追加します。

[サービスの作成] ボタンを押して、お問い合わせフォーム サービスを作成します。

サービスに名前を付け、トランスポート ドロップダウンで [スラック] を選択します。トークンを保持するサービス シークレットを指定し、メッセージを投稿するチャネルの 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 を追加する必要があります。 CAPTCHA は、「Completely Automated Public Turing Test to Tell Computers and Humans Apart」の頭字語です。

この機能を提供するために、オープンソース CAPTCHA バックエンド サービスを使用して CAPTCHA を生成および検証します。その仕組みは、テキストを表示する CAPTCHA 画像を生成することです。次に、ユーザー (人間) に、表示されているテキストを提供するように依頼すると、バックエンドがそれが画像に表示されているテキストであることを確認します。

オープンソース クラウドで CAPTCHA バックエンド サービスを作成する

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オープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドSvg] = useState<string null>(null);<br>
  const [captchaId, setオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドId] = useState('');<br>
  const [captcha, setオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド] = useState('');<br>
  const [invalidオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド, setInvalidオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド] = useState(true);</string></p>

<p>useEffect(() => {<br>
    fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))<br>
      .then((response) => response.json())<br>
      .then((data) => {<br>
        setオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドSvg(data.svg);<br>
        setオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドId(data.id);<br>
      });<br>
  }, []);</p>

<p>const onオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドChange = (value: string) => {<br>
    setオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド(value);<br>
    fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))<br>
      .then((response) => {<br>
        setInvalidオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド(!response.ok);<br>
      })<br>
      .catch(() => {<br>
        setInvalidオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド(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="オープンソース クラウドの問い合わせフォームと CAPTCHA バックエンド"></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オープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドChange}<br> /><br> <input type="submit" value="Send" isdisabled="{invalidオープンソース" captcha><br>

)
}

結論

これは、独自のバックエンド サービスを構築したりホストしたりせずに、Slack チャネルに投稿する CAPTCHA 検証を備えたお問い合わせフォームを Web アプリケーションに追加する方法の例でした。

オープンソースクラウドとは何ですか?

オープンソース クラウドは、オープンソースの使用を開始する障壁を軽減し、作成者がソフトウェアをサービスとして利用できるようにする障壁を軽減します。これを開発した理由について詳しくは、この投稿をご覧ください。

以上がオープンソース クラウドの問い合わせフォームと CAPTCHA バックエンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。