Bubble Tutorial - Magic Link in Bubble erstellen

In diesem Video lernt ihr, wie man das neue Feature "Magic Link" in Bubble einfügen kann.  Am 14. August hat Bubble das Magic Link Feature veröffentlicht (https://forum.bubble.io/t/new-feature-magic-login-link-workflow-action/164532).

Video-Transkript:

Mein Name ist Chris Strobl und ich zeige euch heute, wie wir im Bubble einen Magic Link erstellen können. Normalerweise muss man sich auf Webseiten anmelden, mit Passwort und Email, aber Services wie Slack oder Coinbase bieten es dem Nutzer an, die Sache zu vereinfachen, nämlich über einen Magic Link.

Das heißt, ich gebe meine E-Mail-Adresse ein und bekomme dann als E-Mail einen Magic Code und kann mich damit im Service anmelden. Das Ganze ist sicher und Bubble hat vor kurzer Zeit vor nur ein paar Tagen auch dieses Feature eingebaut, um es jedem zu ermöglichen, einen Magic Link zu haben. Ich habe mich den Forum Post einmal hinzugefügt und wir legen direkt mal los im Editor. Ich habe bereits mehrere Sachen erstellt. Die Gruppen sind alle per Default nicht sichtbar und wir gehen in die erste Gruppe rein.

Das ist die Crew Magic Link, nicht visible um Page is loaded. Und wenn ein User nicht eingeloggt ist, dann ist dieses Element sichtbar. Diese Gruppe besteht aus drei Elementen. Zunächst mal die Überschrift, dann ein Input Field für die E-Mail und den Button Magic Link anfordern. Das heißt, wenn der Nutzer nicht eingeloggt ist, dann kommt diese Gruppe, in der quasi den Magic Link anfordern kann. Die zweite Gruppe ist die Group Login. Dieses wiederum nicht sichtbar um Page is loaded. Aber wenn der Nutzer eingeloggt ist, dann wird diese sichtbar. Diese Gruppe besteht aus drei Elementen.

Einmal heißen wir den Nutzer willkommen als Textfeld und wir haben hier rein dekorativ ein Input Field, indem wir noch einmal validieren, dass es der richtige Nutzer ist und die Funktion ausloggen. Hier würde quasi normalerweise eure Applikation stattfinden. Der Workflow für den Button Ausloggen habe ich bereits angelegt. Das heißt, wir gehen einfach auf Account und lockte User und. Und schließlich haben wir noch zwei Popups, einmal sein ab. Wenn der User sich registriert hat und bisher nicht existiert, bekommt er einen Magic Link in der Inbox und das Popup Login. Das heißt, der Nutzer ist bereits registriert, hat seine E-Mail-Adresse erneut eingegeben, um den Login durchzuführen. Und wir gehen jetzt in die Group Magic Link, um die Workflows zu definieren. Der erste Workflow ist, wenn wir noch keinen Nutzer haben und den Nutzer neu registrieren, also Zainab, das heißt Start/edit workflow in dem Button Magic Link anfordern. Nur wenn du es Search for user.

Und wir nehmen die E-Mail ist Input E-Mails seiner Value. Wenn diese E-Mail hier der Count, also die Anzahl an E-Mails. Gleich Null ist also, wenn wir nicht einen anderen Nutzer mit der gleichen E-Mail haben Account seien die User ab.

Wir nehmen den Input E-Mails als Value und erstellen hier nun ein sicheres Passwort Chocolate Formular. Chocolate random String. Die Anzahl an Charakter ist 16 und wir nutzen alle Sicherheits Möglichkeiten. Und als nächstes gehen wir auf Account Sand, Magic Login Link. Wir nutzen wiederum Input E-Mails seiner Value. Navigator ohne Login Nehmen wir die Seite, die wir hier haben Magic Link und Navigator von Feiler. Nehmen wir die 4.0 4.

Hier können wir den Button Text des Links verwenden. Wir schreiben sie ab hier, weil das ja das Signal ist und wir können natürlich auch hier die E-Mail anpassen und ändern jederzeit nach eurer Experience. Als nächstes müssen wir noch Account lockt, der User Mut machen, damit der Nutzer nach dem Seine automatisch nicht eingeloggt wird. Und wir nehmen Element actions. Show und nehmen das Pop up sein ab. Wir gehen jetzt einmal auf Preview, um uns das Ganze anzuschauen. Wir haben hier den E-Mail Magic Link anfordern. Und das Pop up Registrierung erfolgreich. Ich gehe jetzt in meine E-Mail Inbox und sehe, ich habe eine neue E-Mail bekommen von unserer App mit dem Button sein hier. Wenn ich auf diesen klicke. Und sehen nun hier, wie wir eingeloggt sind und die Group. Login sichtbar ist.

Wir loggen uns nun aus. Schließlich wollen wir noch den Magic Link machen, um uns einzuloggen. Wir gehen wieder in die Group Magic Link Start/edit workflow Wir kopieren diesen Workflow. Und sagen Wenn der Count größer null ist, das heißt, wenn wir eine E-Mail haben, dann. Nehmen wir Account. Send magic link. Input E-Mails seiner Apps Value. Wir nehmen wiederum die Magic Link. Die Website wiederum 4.0 4 Wenn der Link nicht funktioniert, behalten hier den Button bis Links Login hier bei. Und zeigen anschließend. Das Pop up Login. Lass uns das auch jetzt testen mit der gleichen E-Mail wie vorher. Magic anfordern. Wir haben gesehen Loggien erfolgreich willkommen zurück.

Dein Magic Link wartet auf dich und wir haben hier eine neue E-Mail bekommen mit dem Button Login hier anstatt Zainab hier. Wir klicken darauf. Und es sind nun wiederum eingeloggt. Somit konnten wir sehen, wie wir im Bubble einen Magic Link erstellen können und es dem Nutzer einfacher machen, sich einzuloggen, obwohl gleichzeitig die Sicherheit gewährleistet ist.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button. Oder subscribed unseren Channel. Bei Fragen nutzt die Kommentare.

Ich wünsche euch weiterhin viel Erfolg und auf bald.