Bubble.io Tutorial - Passwort Check entwickeln [Deutsch]

In diesem Video lernt ihr, wie man seinen eigenen Passwort-Sicherheit-Check in Bubble.io entwickelt. Das Feature Passwort Validierung macht eure Seite grundsätzlich erheblich sicherer für die User, weil es die Nutzer anleitet ein gutes Passwort auszuwählen.

Zunächst legen wir los mit dem Design in Bubble io, wenn ihr hier die Details möchtet, reduziert einfach die Wiedergabegeschwindigkeit des Video-Tutorials.

Als nächsten Schritt arbeiten wir nun an der Passwortstärke. Beim Inputfeld wählt ihr Passwort aus; anschließend geht ihr in das Textfeld Passwortstärke und fügt im Conditional die Variable Input, Password strength aus und sagt, wenn kleiner 30, dann wird der dargestellte Text geändert. Einerseits Passwortstärke: Schwach und andererseits die Farbe auf Rot. Wählt hierfür den Rich Text Editor. Erweitert die Funktionalität analog für die anderen Use Cases.

Danach entwickeln wir das Feature, um ein Passwort anzuzeigen bzw. nicht anzuzeigen. Je nachdem, was der Nutzer gerne hätte. Der Sinn und Zweck dieses Features ist es dem Nutzer Kontrolle über sein Passwort zu geben. Geht hierfür in das Plugin's Tab und installiert das kostenlose Plugin Reveal & Hide Password von Zeroqode. Zieht das Reveal Element einfach in den Canvas.

Das Element ist nicht sichtbar; in den Settings müsst ihr die HTML ID Möglichkeit freischalten und anschließend geben wir dem Input Element ein ID-Element. Anschließend macht ihr einen Boolean State zum Input Feld (Passwort sichtbar: Ja, Nein). Danach klickt auf den Anzeigen Text und klickt Start/Edit Workflow und nehmt die Funktion Toggle Reveal a password und passt die States an, so dass die Funktionalität gegeben ist. Schließlich fügen wir diie Funktionalität hinzu, um die verschiedenen Passwort-Voraussetzungen zu erfüllen.

Wir nutzen hierfür die Bubble.io Funktionalitäten wie Input Value's number of characters ist größer 8 für die Voraussetzung mindestens 8 Zeichen.

Und für die anderen Funktionen nutzen wir RegEx, also Regular Expressions. Geht hierfür auf https://www.regexr.com Wir nutzen in Bubble.io Input Value's extract with RegEx count größer 0 und suchen uns dann unter RegExr.com das richtige RegEx Pattern.

Für Großbuchstaben lautet die Regular Expression: [A-Z\s]+1

Anschließend entwickeln wir die Funktionalität, um mindestens 1 Zahl als Passwort-Voraussetzungn in Bubble.io zu haben.

Nutzt hier wiederum analog RegExr: \d+

Schließlich haben wir noch die Sonderzeichen.

Kopiert die Conditionals und nehmt das RegEx Pattern: [^A-Z, 0-9, a-z]

Danach optmieren wir noch zusätzlich die Geschwindigkeit.

Das Instant Text Plugin von AirDev sorgt dafür, dass unsere Passwort Validierung ohne spürbare Verzögerung erfolgt.

Schließlich wollen wir noch die Backend Funktionalität haben, damit nur sichere Passwörter vom User angelegt werden können und erstellen hierfür die Bubble.io Workflows. Zunächst  erstellen wir einen Boolean State "Passwort ausreichend", welcher nur zulässig ist, wenn die Voraussetzungen erfüllt werden. Hier ist es möglich granular zu entscheiden, welche Sicherheitsvoraussetzungen erfüllt werden müssen.

Alternativ könnt ihr auch die "Define a password policy" Funktionalität  von Bubble.io in den Settings aktivieren. Hier habt ihr die Möglichkeit server-seitig die Passwort Sicherheit zu validieren.

Video Transkript:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie man eine Passwort Validierung inn Bubble erstellen kann. Wir legen gleich mal los mit dem Design. Ich möchte es euch gerne Schritt-für-Schritt zeigen, habe es aber etwas beschleunigt. Wenn euch das zu langweilig ist, springt einfach in das nächste Kapitel. Wir gehen jetzt einmal auf Preview. Und ihr seht, wir haben ein sehr gutes Design. Die nächste Aufgabe ist jetzt dass wir das Ganze dynamisch machen können und damit auch die unterschiedlichen Funktionen da sind. Wir fangen an mit der Passwort Stärke.

Dafür geht ihr auf Passwort Stärke und geht in die conditional rein und gehen direkt wenn input, also der vom passwort passwort strength's ist kleiner gleich 30 und was wichtig ist input's value ist nicht leer. Das heißt, wenn ihr nur kleiner 30 habt, dann steht da Passwort Stärke, auch wenn der Input leer ist. Das heißt, ihr wollt nur anzeigen, wenn jemand überhaupt irgendwas ausgefüllt hat. Wir gehen jetzt auf Text und fügen hier unsere Bedingungen hinzu.

Wir schreiben "Schwach" und wir können in den Rich Text Editor gehen. Wir wählen das aus. Wir wählen hier mal Farbe aus: grün. Und ändern aber diese Farbe in unseren Farbton vom Design. Anschließend machen wir die nächste Bedingung: größer 30 und kleiner 70. Wir kopieren das. Haben jetzt "Mittel". Und ändern auch die Farbe.

Und gehen jetzt auf die letzte Bedingung. Kopierern noch einmal. Das Passwort strengths von Bubble gibt euch einen Zahlenwert von 0 bis 100. Je nachdem wie stark euer Passwort ist. Und wir haben jetzt eben die Bedingungen. Wir schauen uns das einmal im Preview an. Wir sehen jetzt "Schwach". "Mittel". Und dann wird es "Stark". Und so geht das Ganze auch wieder zurück. Das heißt wir haben jetzt als erstes schon mal für unseren User die Möglichkeit, dass er ein Feedback bekommt, je nachdem ob sein Passwort stark oder schwach ist und wir haben wie gesagt von Input value den Zahlenwert zwischen 0 und 100. Als nächstes wollen wir jetzt das was ihr auch von anderen Seiten kennt, nämlich das Anzeigen, also, wenn ich auf Anzeigen klicke, wird mir das Passwort angezeigt und wenn ich wieder weg klicke, dann nicht, wollen wir jetzt in Bubble nachbauen. Dafür brauchen wir es erstes ein Plugin.

Es gibt das kostenlose Plug-In von Zeroquode: Reveal & Hide Password. Wir installieren das. Wenn ihr jetzt in eure visual elements geht, habt ihr hier das Element Reveal. Wir  ziehen das einfach rein, egal wo - weil dieses Reveal Element immer im Hintergrund bleiben wird. Als nächstes gehen wir in die Settings und müssen die HTML IDs freischalten. Ihr habt unter General appearance: "expose the option to add an ID attribute to HTML elements". Das wählt ihr aus.

Und anschließend geht ihr auf euer Input Element und gebt dem ein ID Attribute. Ich nenne das Ganze einmal "Passwort". Anschließend müssen wir einen State setzen. Ihr geht hierfür in das Inputfeld, Add a  new custom state und fragen, ob das Passwort sichtbar ist. Das ist ein boolean Type "yes/ no". Und der default value ist "nein". Im default ist das Passwort nicht sichtbar. Anschließend klicken wir auf das Textfeld "Anzeigen", fügen dem ganzen noch ein weißes Element hinzu, einen weißenn Hintergrund, damit man das immer sieht und bringen das ganz nach vorne. Wir gehen auf Start/ edit Workflow und in Element Actions seht ihr Toggle a reveal. Das ist genau dieses Plugin.

Und fügt hier. die ID von dem input feld ein. Anschließend müssen wir den state noch setzen. Wir nehmen das Input custom state Passwort sichtbar und sagen jetzt "ja". Dies ist nun wir nehmen die Farbe Rot, das heißt nur, wenn input state Passwort sichtbar? ist "Nein", dann führen wir diesen Workflow, also nur wenn er nein ist, dann zeigen wir das ganze um machen den Input state auf "ja". Diesen Workflow kopieren wir einmal. Fügen diesen  hin zu. Machen das Ganze einmal grün, um uns besser auszukennen. Wir sagen jetzt "ja" und bei "ja" ... Also es ist sichtbar und dann wird er wieder unsichtbar. Der letzte Punkt ist nun dass wir dem Text Element ein conditional geben und sagen: wenn der input state Passwort sichtbar? "Ja" ist - also es ist sichtbar - dann schreiben wir im Text "verbergen" als Button und wenn "nein", dann ist es so wie jetzt im default, dann schreiben wir "Anzeigen". Wir probieren jetzt das Ganze einmal aus.

Wir zeigen das Ganze an. Wir können hier auch weiter tippen. Verbergen wieder. Und können auch wieder Sachen löschen. Somit habt ihr jetzt einmal gesehen, wie wir das Passwort anzeigen und verbergen können. Der nächste Schritt ist nun wie können wir diese Passwörter auch validieren bzw. wie können wir den Nutzer helfen bessere Passwörter zu erstellen und festzulegen, um dadurch eine sicherer User Experience für den Nutzer zu haben und dafür haben wir diese vier Felder. Wir gehen zurück in Bubble und gehen einmal in den "Mindestens 8 Zeichen" und legen ein conditional fest: wenn Input's value number of characters ist größer gleich 8, ändern wir die font-color auf dieses Grün. Wir kopieren das conditional formatting und fügen es hier rein. Ihr seht der Icon color wollen wir jetzt den gleichen Grünton geben. Wir probieren das jetzt einmal aus.

Und ihr seht mit etwas Verzögerung, dass unser inputfeld bei acht Zeichen auf grün geht und wenn wir sieben haben, ist es wieder grau. Der nächste Punkt ist nun dass wir Großbuchstaben haben. Dafür legen wir jetzt die Bedingung fest. Ihr geht hierauf extract with RegEx. RegEx steht für Regular Expressions. Hierfür gibt es RegEx patterns. Und RegEx ist eine Sache beim Programmieren, die wird sehr oft benutzt gerade in data science, um Formate zu extrahieren. Und die könnt ihr auch in Bubble verwenden. Das ist jetzt ein sehr großes Thema: "RegEx". Aber ich will euch einmal zeigen, wie man da vorgeht. Dafür gehen wir auf www.regexr.com und das wirkt jetzt sehr kompliziert, aber es ist eine der besten Seiten um sich mit RegEx einmal zu beschäftigen.

Das heißt, ihr habt hier ein Cheat Sheet und wir können mal z.b. hier das rein kopieren und hier oben auch und ihr seht jetzt werden nur Nummern angezeigt. Wenn ich jetzt hier unten z.b. eine 2 hinzufüge oder hier eine 5 oder hier eine 5, dann werden nur diesen Nummern hier rausgesucht. Oder ihr sagt, ich will nur die Charaktere zwischen a und g oder zwischen a und b.

Und dann seht ihr, wir haben nur die hervorgehoben. Wir nutzen das jetzt einmal und wollen ja jetzt nur die Großbuchstaben. Ihr seht, wir haben jetzt mit diesem command nur die Großbuchstaben. Wir kopierren das Ganze. Packen es in Bubble.io. Und jetzt brauchen wir den :count davon. Und der muss größer 0 sein. Das heißt wir extrahieren den value mit RegEx von allen Großbuchstaben. Das Ergebnis davon,  diese Zahl, muss größer 0 sein, dann haben wir mindestens einen Großbuchstaben. Font color legen wir auf das Gleiche grün. Gleichzeitig kopieren wir die condition, fügen Sie hier ein, aber die Icon color geht auch auf dieses Grün. Wir gehen jetzt einmal in den Test. Ihr seht, wir haben die 8 Zeichen. Aber wir haben keinenn Großbuchstaben.

Und jetzt haben wir mit etwas Verzögerung auch diesen Großbuchstaben. Wenn wir ihn wegmachen, wieder nicht. Das nächste ist jetzt die Zahl. Wir kopieren die Condition. Wir fügen es hinzu. Und auch hier kopieren wir die condition. Fügen es hinzu. Das einzige, was wir ändern müssen, ist das RegEx pattern. Dafür gehen wir in das cheat sheet und sehen hier dieses "\d" und fügen noch das + hinzu, um dann eben eine Zahl mit mindestens eins haben. Wir kopieren das Ganze. Haben auch hier wieder den count größer 0 und fügen das auch hier in den RegEx ein für das Icon. Wir kopieren wiederum die condition.

Und haben jetzt noch die Sonderzeichen. Das ist ein bisschen komplizierterer RegEx pattern. Wir sagen nicht A-Z, nicht 0- 9, Uhr, also Großbuchstaben A bis Z und nicht a - z klein. Wir haben jetzt aktuell gar keine und sehen sobald wir Sonderzeichen hinzufügen, haben wir diese. Ihr kopiert dieses pattern, geht zurück in Bubble und fügt das ganze hinzu. Und wir testen jetzt einmal noch, ob das ganze auch funktioniert. Und wir sehen wunderbar, sobald wir weg sind oder eines haben, wird  es angezeigt.

Das gleiche auch den Zahlen und auch bei den Großbuchstaben. Und so seht ihr diese Validierung. Was ihr aber gemerkt habt, ist das es nicht instant ist und auch dafür gibt's eine Lösung, dass das sofort validiert wird und dass ist ein weiteres Plugin. Wir gehen auf Plugins, fügen ein Plugin hinzu. Instant Text von AirDev; es ist auch kostenlos. Wir fügen das hinzu. Wir gehen in Design Tab, Live text. Auch einfach hinzufügen. Und haben hier das Element livetext A. Ich nenn das einfach live text. Und ihr seht hier wieder Element ID.

Wir haben ja unser Inputfeld schon vorhin Passwort als ID Attribut gesetzt. Ihr wählt das aus und jetzt ist dieses Inputfeld immer live. Aber ihr müsst natürlich jetzt auch hier anpassen statt den Input's value mach ihr den live text's value und müsst dann eben auch diese patterns hinzufügen. Hier die expression live text number of Charaktere "8". Auch hier jetzt mit RegEx etwas aufpassen.

Wir kopieren erst diese RegEx Formel, damit die nicht verloren geht. Davon den :count größer 0. Ihr kopiert das. Und auch hier kopieren das  einmal rein, dann nehmen wir von drüben das RegEx pattern. Ihr kopiert die Formel. Kopiert einmal das RegEx pattern. Und wir testen das ganze noch mal mit dem live Plugin. Und ihr  seht: jetzt ist das Ganze Instant und somit viel besser für euren User zu erkennen. Als letztes wollen wir noch dass der Button nur klickbar ist, wenn auch das Passwort unseren Anforderungen entspricht und dafür gehen wir in Bubble und machen als erstes einen Alert window, um überhaupt zu schauen, ob das Ganze funktioniert. "Passwort ist ausreichend" und diesen Alert zeigen wir an quasi, um diesen Workflow einmal zu simulieren.

Normalerweise wäre das jetzt Sign  up mit dem Passwort und das zu validieren. Aber gerade für unser Beispiel ist es nur ab wann man den Button "Weiter" klicken kann. Ihr seht, wenn wir jetzt drauf klicken, funktioniert das sofort. Auch, wenn das Passwort empty  ist. Wir sagen jetzt der Button ist grundsätzlich nicht klickbar. Wir gehen auf Preview und ihr seht jetzt wir können den Button nicht klicken. Danach erstellen wir einen custom state und fragen, ob das Passwort ausreichend ist. Der default value ist "nein". Im conditional sagen wir wenn Passwort ausreichend ist  "Nein", dann ist das Element nicht klickbar und wenn Passwort ausreichend "ja" ist, dann ist das Element klickbar.

Also nicht klickbar ist offen, ist nicht ausgewählt. Jetzt gehen wir in den Workflow und sagen, wenn eine Bedingung wahr ist immer nämlich wenn live Text value number of characters größer gleich 8, wenn das der Fall ist, und das ist unser grüner Punkt, setzen wir den state von unserem Button nämlich Passwort ausreicht auf "ja". Wir kopieren das einmal und sagen rot, wenn kleiner 8, dann setzen wir ihn auf "nein". Hier könnt ihr natürlich auch weitere Bedingungen anlegen, wie zB mindestens ein Großbuchstabe oder ein Sonderzeichen.

Wir gehen jetzt auf Preview. Ihr seht der Button ist nicht aktiviert. Wir haben jetzt acht Zeichen und der Button ist möglich zu nutzen. Wenn wir 7 haben, geht er nicht. Somit könnt ihr eben wunderbar eine Validierung machen und dadurch euren Nutzern nur erlauben sichere Passwörter festzulegen. In diesem Zusammenhang möchte ich auch noch eine Funktion zeigen von Bubble, die auch password policies erlaubt. Ihr geht nämlich auf Settings und Privacy & Security. Und hier könnt ihr defnina a password policy anklicken. Ihr müsst das auswählen und seht nun das auch Bubble. euch direkt diese password policies gibt. Wie z.b. eine Minimum lengths von 5 oder das mindestens eine Zahl dabei sein muss oder ein Großbuchstabe oder ein Sonderzeichen.

Ich mache mal minimum 5 und eine Nummer. Hierzu gibt's ein paar Sachen zu beachten und die möchte ich euch zeigen. Wir gehen in Design Tab, wählen das input field und ihr habt jetzt hier "check the password while typing". Der Grund hierfür ist diese Validierung, ob die password policy richtig ist, passiert nur im Back-End von Bubble. Das heißt, nur wenn ihr den Workflow habt, erstelle einen neuen Nutzer oder sign the User up, und nehmt das Passwort, nur dann. Wenn ihr aber Passwort typing macht, wird das auch im Frontend aktiviert. Und das möchte ich euch einmal zeigen. Wir fügen einfach ein Textfeld hinzu beispielhaft und nehmt input und dann ist die Frage "is  valid" oder "is not valid".

Ich mache hier formatieren als Text, ums besser darzustellen. Und hier gibt's noch eine zweite Sache. Nämlich, wenn ihr gar nichts eingebt bei Bubble, dann ist es auch nicht "is valid" und nicht "is not valid", sondern ihr müsst auch noch hinzufügen: Input's value is not empty und auch das einmal als Text. Wir machen hierr noch ein Leerzeichen rein, um das besser darzustellen. In unserer policy haben wir festgelegt Minimum fünf Buchstaben und eine Zahl.

Wir gehen einmal auf Preview. Und wir sehen jetzt hier: wir haben nichts eingegeben, es wurde noch kein Passwort eingeben, aber "yes" das Passwort ist valide. Also hier genau müsst ihr eben eine "und" Formel haben, wenn ihr das validieren wollt. Es wurde etwas eingeben. Wir haben aber keine Zahl und sobald wir auch eine Zahl haben, geht das ganze. Dann habt ihr zweimal ja. Wenn ihr nur von Bubble diesen Import wollt, dann müsst ihr einfach in den Workflow statt eben jetzt value number of characters, müsstet ihr jetzt genau die Formel eingeben wie hier das eben Input valid ist ja und es ist nicht empty.

Wir gehen noch einmal auf Preview. Ich finde es faszinierend, wie einfach man selbst komplexe Passwort Validierungen in Bubble erstellen kann und somit seine Seite für die Nutzer viel sicherer machen kann, aber gleichzeitig auch eine tolle user experience schaffen kann. Ich wünsche euch weiterhin viel Erfolg und auf bald.