오픈 소스 클라우드의 문의 양식 및 CAPTCHA 백엔드

양식 수집 및 CAPTCHA 처리를 위한 오픈 소스 백엔드 서비스를 사용하면 이에 대한 자체 백엔드 서비스를 개발하지 않고도 스팸 방지 기능이 있는 문의 양식을 구현할 수 있습니다. 이러한 백엔드 서비스는 오픈 소스 클라우드에서도 사용할 수 있으므로 이러한 백엔드 서비스를 직접 호스팅할 필요가 없습니다.

이 블로그에서는 메시지가 Slack 채널로 전송되는 문의 양식을 빠르게 얻는 방법을 설명하겠습니다.

Slack 봇 만들기

Slack Bot은 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를 추가해야 합니다. CAPTCHA는 "Completely Automated Public Turing test to talk 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 확인이 포함된 문의 양식을 웹 애플리케이션에 추가할 수 있는 방법에 대한 예입니다.

오픈소스 클라우드란 무엇입니까?

오픈 소스 클라우드는 오픈 소스 사용을 시작하는 장벽을 낮추고 제작자가 소프트웨어를 서비스로 제공하는 장벽을 줄여줍니다. 이 게시물에서 우리가 이를 개발한 이유에 대해 자세히 알아보세요.

위 내용은 오픈 소스 클라우드의 문의 양식 및 CAPTCHA 백엔드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!