Formulaire de contact et backend CAPTCHA dans Open Source Cloud

Avec un service backend open source pour la collecte de formulaires et la gestion des CAPTCHA, vous pouvez implémenter un formulaire de contact avec protection anti-spam sans développer vos propres services backend pour cela. Ces services backend sont également disponibles dans Open Source Cloud, vous n'avez donc pas non plus besoin d'héberger ces services backend vous-même.

Dans ce blog, je vais décrire comment vous pouvez obtenir rapidement un formulaire de contact où le message est envoyé à un canal Slack.

Créer un robot Slack

Le Slack Bot sera celui qui publiera le message sur la chaîne dans Slack. Visitez https://api.slack.com/apps/ et créez une nouvelle application avec les autorisations nécessaires pour publier sur la chaîne Slack souhaitée.

Enregistrez le jeton Slack Bot car il sera utilisé plus tard dans ce didacticiel.

Créer un service backend de formulaire dans Open Source Cloud

Connectez-vous ou créez un compte sur Open Source Cloud.

Accédez au service Formulaire de contact et cliquez sur l'onglet Secrets du service. Cliquez sur Nouveau secret et ajoutez un secret contenant le jeton Slack Bot obtenu précédemment.

Créez un service de formulaire de contact en appuyant sur le bouton Créer un service.

Donnez un nom au service et sélectionnez Slack dans la liste déroulante des transports. Fournissez le secret de service contenant le jeton et entrez l'ID du canal sur lequel le message doit être publié.

Lorsque le service est opérationnel, vous pouvez copier et enregistrer l'URL dans le service de formulaire de contact.

Exemple de formulaire de contact dans React

Développez votre formulaire de contact dans votre application frontend qui, dans React, pourrait ressembler à ceci. Remplacez BACKEND-SERVICE-URL par l'URL acquise ci-dessus.

'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 (
    

) }

Une fois le formulaire soumis, vous devriez maintenant recevoir un message sur votre chaîne Slack. Pour empêcher les robots spammeurs d'utiliser abusivement ce formulaire, nous devons ajouter un CAPTCHA. CAPTCHA est un acronyme qui signifie « Test de Turing public entièrement automatisé pour distinguer les ordinateurs des humains ».

Pour fournir cette fonctionnalité, nous utiliserons un service backend CAPTCHA open source pour générer et vérifier CAPTCHA. Comment cela fonctionne, c'est que vous générez une image CAPTCHA qui affiche un texte. Ensuite, vous demandez à l'utilisateur (humain) de fournir le texte qu'il voit et le backend vérifiera qu'il s'agit bien du texte affiché dans l'image.

Créer un service backend CAPTCHA dans le cloud Open Source

Accédez au service CAPTCHA et cliquez sur le bouton Créer un service.

Donnez un nom au service et une fois le service démarré, copiez l'URL du service. Remplacez CAPTCHA-SVC-URL ci-dessous par cette URL.

Ajoutez la vérification CAPTCHA à votre formulaire

Étendez le formulaire que nous avons créé ci-dessus avec le code suivant.

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

<p>export default function Page() {<br>
  const [captchaSvg, setFormulaire de contact et backend CAPTCHA dans Open Source CloudSvg] = useState<string null>(null);<br>
  const [captchaId, setFormulaire de contact et backend CAPTCHA dans Open Source CloudId] = useState('');<br>
  const [captcha, setFormulaire de contact et backend CAPTCHA dans Open Source Cloud] = useState('');<br>
  const [invalidFormulaire de contact et backend CAPTCHA dans Open Source Cloud, setInvalidFormulaire de contact et backend CAPTCHA dans Open Source Cloud] = useState(true);</string></p>

<p>useEffect(() => {<br>
    fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))<br>
      .then((response) => response.json())<br>
      .then((data) => {<br>
        setFormulaire de contact et backend CAPTCHA dans Open Source CloudSvg(data.svg);<br>
        setFormulaire de contact et backend CAPTCHA dans Open Source CloudId(data.id);<br>
      });<br>
  }, []);</p>

<p>const onFormulaire de contact et backend CAPTCHA dans Open Source CloudChange = (value: string) => {<br>
    setFormulaire de contact et backend CAPTCHA dans Open Source Cloud(value);<br>
    fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))<br>
      .then((response) => {<br>
        setInvalidFormulaire de contact et backend CAPTCHA dans Open Source Cloud(!response.ok);<br>
      })<br>
      .catch(() => {<br>
        setInvalidFormulaire de contact et backend CAPTCHA dans Open Source Cloud(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="Formulaire de contact et backend CAPTCHA dans Open Source Cloud"></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={onFormulaire de contact et backend CAPTCHA dans Open Source CloudChange}<br> /><br> <input type="submit" value="Send" isdisabled="{invalidFormulaire" de contact et backend captcha dans open source cloud><br>

)
}

Conclusion

Il s'agit d'un exemple de la façon dont vous pouvez ajouter à votre application Web un formulaire de contact avec vérification CAPTCHA qui publie sur un canal Slack sans avoir à créer ou héberger vos propres services backend pour cela.

Qu’est-ce que le Cloud Open Source ?

Open Source Cloud réduit les obstacles pour commencer à utiliser l'open source et réduit les obstacles pour les créateurs à rendre leurs logiciels disponibles en tant que service. Découvrez pourquoi nous l’avons développé dans cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!