Tutoriel Bubble - Intégrer Google reCAPTCHA

Dans cette vidéo, je vous montre comment intégrer le service reCAPTCHA de Google dans Bubble. Nous montrons deux possibilités. Lien vers Google reCAPTCHA : https://developers.google.com/recaptcha/intro

Transcription vidéo :
Bonjour, je m'appelle Chris Strobl et je vous montre aujourd'hui comment intégrer reCAPTCHA de Google dans la bulle.

ReCAPTCHA est un service qui vous aide à reconnaître si un être humain ou une machine, c'est-à-dire une planche ou un ordinateur, utilise votre site web. Cela est surtout nécessaire lorsque des spams ou des attaques de phishing attaquent votre site web. Nous allons maintenant dans Plugins et avons déjà installé le plugin reCAPTCHA de Bubble. Ensuite, nous avons besoin de ces clés.

C'est pourquoi nous allons dans le guide du développeur de Google. Je vous ai laissé le lien dans les commentaires et nous devons nous enregistrer ici pour obtenir une clé API per. Vous prenez un domaine, par exemple votre Bubble App. Dans mon cas, No Code Germany et nous ensuite reCAPTCHA version 2, car cette version 3 ne fonctionne pas encore dans la bulle avec le plugin. Vous choisissez ensuite la case. Je ne suis pas un robot. Ajoutez un autre domaine. Vous tenez maintenant deux clés API. Celles-ci sont copiées. La première est la clé du site web.

C'est le sidekick et une fois le code clé secret copié. Ici, les deux sont également repris dans l'environnement de développement. Après avoir inséré les clés API, nous allons dans le design et sous Input forms, nous avons cette forme reCAPTCHA. Nous l'ajoutons. Et nous avons maintenant deux possibilités pour insérer reCAPTCHA.

Je vous montre la première possibilité La forme est toujours visible et le bouton s'inscrire est juste cliqué. Après avoir validé qu'aucun robot n'utilise ce site. Pour cela, l'élément visible autour de Page is loaded. Nous cliquons sur le bouton S'inscrire. Et disons maintenant que le compte est vide. Et nous ajoutons une fonction Refresh the page derrière. Et nous allons maintenant dans l'onglet Workflow ici en haut en disant qu'il ne s'exécute que si les reCAPTCHA Forms sont là check. Donc, le workflow ne s'exécute que si ce formulaire reCAPTCHA est activé.

Nous allons maintenant nous rendre dans Preview et regarder tout cela ! Et nous voyons que lorsque nous cliquons sur S'inscrire, il ne se passe rien, nous pouvons bien sûr aussi soutenir cela visuellement, en ce que le bouton n'est pas quickbook et ensuite I'm not a Robot et nous nous inscrivons et voyons que nous sommes maintenant inscrits. La deuxième possibilité, que l'on voit également plus souvent, est que le reCAPTCHA n'est pas visible au début et.

Nous, dès que nous cliquons sur enregistrer, le rendons visible. Pour cela, le reCAPTCHA n'est pas visible au début et nous allons dans le bouton Enregistrer et disons que ce flux de travail n'est vérifié que si le bouton est enregistré, cliqué et que le reCAPTCHA est vérifié. Nous copions ce workflow et disons maintenant que si celui-ci n'est pas vérifié, alors. Afficher un élément, à savoir la forme reCAPTCHA. Nous allons maintenant sur Preview et regardons cela... Nous voyons actuellement le reCAPTCHA non visible. Nous allons sur Enregistrer. Maintenant, il est visible. Et nous enregistrons.

Et c'est ainsi que nous avons pu voir qu'il existe deux possibilités d'intégrer élégamment reCAPTCHA dans la bulle. Si vous avez aimé cette vidéo, n'hésitez pas à cliquer sur le bouton "J'aime" ou à vous inscrire sur notre chaîne si vous avez des questions. N'hésitez pas à utiliser les commentaires. Je vous souhaite une bonne continuation et vous dis à bientôt.