Tutorial de Bubble - Integrar Google reCAPTCHA

Video tutorial paso a paso para integrar Google reCAPTCHA en la plataforma sin código Bubble.

Chris Strobl
Chris Strobl

In diesem Video zeige ich euch wie man den reCAPTCHA Dienst von Google in Bubble integrieren kann. Wir zeigen zwei Möglichkeiten. Link zu Google reCAPTCHA: https://developers.google.com/recaptcha/intro

Bubble.io Tutorial - Google reCAPTCHA in Bubble integrieren

Video Transkript:
Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir reCAPTCHA von Google im Bubble integrieren können.

ReCAPTCHA ist ein Dienst, der euch unterstützt, zu erkennen, ob ein Mensch oder eine Maschine, also ein Board oder Computer eure Webseite benutzt. Dies ist vor allem dann notwendig, wenn Spam oder Phishing Attacks eure Webseite angreifen. Wir gehen jetzt in Plugins und haben dort bereits das reCAPTCHA Plugin vom Bubble installiert. Anschließend brauchen wir diese Keys.

Deswegen gehen wir in den Developer Guide von Google. Ich habe euch den Link in den Kommentaren hinterlegt und müssen uns hier registrieren für ein API Keys per. Ihr nehmt eine Domain, zum Beispiel eure Bubble App. In meinem Fall No Code Germany und uns dann reCAPTCHA Version 2, weil diese Version 3 noch nicht im Bubble mit dem Plugin funktioniert. Ihr wählt dann die Box. Ich bin kein Roboter aus. Fügt noch eine Domain hinzu. Ihr haltet nun zwei API Keys. Diese werden kopiert. Einmal den Website Schlüssel.

Das ist der Sidekick und einmal den geheimen Schlüssel Code kopieren. Hier übernehmen die beiden auch in die Development Umgebung. Nachdem wir jetzt die API Keys eingefügt haben, gehen wir in den designte und unter Input forms haben wir diese reCAPTCHA Form. Wir fügen diese hinzu. Und haben jetzt zwei Möglichkeiten, reCAPTCHA einzufügen.

Ich zeige euch die erste Möglichkeit Die Form ist immer sichtbar und der Button registrieren ist nur klickt. Nachdem wir validiert haben, dass kein Robot diese Website nutzt. Dafür ist das Element visible um Page is loaded. Wir klicken auf den Button Registrieren. Und sagen nun, Account seien die User ab. Und fügen dahinter ein Refresh the page Funktion hinzu. Und wir gehen jetzt hier oben in den Workflow tab sagen, dieser führt sich nur aus, wenn reCAPTCHA Forms da ist check. Also nur wenn diese reCAPTCHA Form auch aktiviert ist, dann fühlt sich der Workflow aus.

Wir gehen jetzt einmal in Preview und schauen uns das Ganze an! Und wir sehen, wenn wir auf Registrieren klicken, passiert nichts, das können wir natürlich auch visuell unterstützen, indem der Button nicht quickbook ist und dann I'm not a Robot und wir registrieren und sehen, wir haben jetzt registriert. Die zweite Möglichkeit, die man ebenfalls öfters sieht, ist, dass der reCAPTCHA am Anfang nicht sichtbar ist und.

Wir, sobald wir registrieren klicken, diesen sichtbar machen. Dafür ist der reCAPTCHA am Anfang nicht visible und wir gehen in den Registrieren Button und sagen dieser Workflows gleich nur wenn der Button registriert ist, klickt und reCAPTCHA ist checkt. Wir kopieren diesen Workflow und sagen nun, wenn dieser nicht gecheckt ist, dann. Show ein Element, nämlich die reCAPTCHA Form. Wir gehen jetzt einmal auf Preview und schauen uns das an.. Wir sehen aktuell die reCAPTCHA nicht sichtbar. Wir gehen auf Registrieren. Jetzt ist er sichtbar. Und wir registrieren.

Und so konnten wir sehen, dass es zwei Möglichkeiten gibt, reCAPTCHA elegant im Bubble einzubauen. Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button oder subscribe unseren Channel bei Fragen. Nutzt die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.

PluginsAPIs