Login/Sign-up-Funktion in Bubble.io bauen

Da so ziemlich jede App mit dem Login- bzw. der Anmeldung eines Nutzers beginnt, zeige ich dir, wie du ganz einfach eine Seite bauen kannst, mit der sich deine Nutzer anmelden und einloggen können. Bubble bietet dir die Möglichkeit das Ganze so zu bauen, wie du willst. Egal, ob als Pop-up oder auf einer extra Seite. Letzteres zeige ich dir hier.

Ziel sollte sein, eine Login- und Anmeldeseite zu bauen, welche innerhalb der gleichen Seite, eine Login- und/oder Anmeldefunktion zeigt, je nachdem, ob der User bereits einen Account hat oder nicht.

1. Login-/Sign-up-Seite erstellen

Ich habe hierfür eine neue Seite angelegt. Hierzu klickst du Links oben auf das Dropdown-Menü „Page“ und klickst auf „Add a new page…“.

In meinem Fall habe ich die Seite „Login“ genannt und den Punkt „Clone from“ leer gelassen. Hier hättest du die Möglichkeit, eine andere Seite deiner App als Vorlage zu nutzen. In diesem Fall ist das jedoch nicht nötig.

Seite beschriften

Nun erscheint die neue Seite in dem Dropdown der Page-Übersicht und du kannst mit dem bearbeiten beginnen.

Neue Seite bubble.io

Ich habe die Seite so gestaltet, indem ich eine „Shape“ gezogen habe, welches den halben Bildschirm einnimmt und den grauen Hintergrund gebildet. Rechts daneben hab ich ein Bild-Element genutzt, welches aus einer einfachen Grafik besteht.

Der Bereich, der für das Login- bzw. Sign-up-Feld vorgesehen ist, ist ein „Group“-Element, welches du in deinem linken Auswahlmenü unter dem Reiter „Design“ und der Kategorie „Containers“ findest. Dieses platzierst du per Drag-and-Drop auf die Position, wo du es in deiner App haben willst und kannst es anschließend nach Belieben anpassen. Bei mir sieht das Ganze folgendermaßen aus:

Group Login

Anpassbar ist das Ganze in dem Menü, welches sich nach dem Platzieren öffnet. Hier kannst du z.B. die Hintergrundfarbe und die Rundungen an den Ecken etc. einstellen. Diese Gruppe habe ich „Group Login/Signup genannt“. Das kannst du einfach ändern, indem du per Klick die Überschrift und damit den Namen der Gruppe änderst (roter Kreis). Eine übersichtliche Beschriftung der Elemente hilft uns nachher bei der weiteren Entwicklung, aber gleich mehr dazu.

Group beschriften

2. Sign-up-Möglichkeit bauen

Nun wollen wir die Login- und Sign-up-Möglichkeit bauen, damit sich deine Nutzer auch anmelden und einloggen können.

Hierzu fangen wir mit der Sign-up-Möglichkeit an.

Wir platzieren innerhalb unserer gerade erstellten „Group Login/Signup“-Group eine weitere Group. Diese platzieren wir wieder per Drag-and-Drop und benennen diese Group z.B. „Group Signup“.

Group in group

Innerhalb dieser Gruppe platzieren wir jetzt unsere Elemente, welche für die Anmeldung neuer Nutzer benötigt werden.

In meinem Falle habe ich hierzu ein „Text“-Element genommen, welches du unter den Visual elements in deinem Auswahlmenü links findest und habe dies als Überschrift verwendet und mit „Anmelden“ beschriftet.

Weiter habe ich noch drei normale „Input“-Felder (keine „Multiline Input“-Elemente) hinzugefügt, diese dienen dem Nutzer später dazu, dass er seine Daten für die Anmeldung eingeben kann. Diese Elemente findest du in deinem linken Auswahlmenü unter Input forms.

Zum Schluss noch einen Button (auch unter „Visual elements“ zu finden) der dafür sorgt, dass der Nutzer letztendlich seine Anmeldung abschließen kann und ein weiteres Textfeld, welches per Klick später dafür sorgt, dass der Nutzer die Möglichkeit hat sich einzuloggen, falls er schon einen bestehenden Account besitzt.

Nun sieht das Ganze folgendermaßen aus:

Login Group Darstellung

3. Login-Möglichkeit bauen

Bevor wir dem Ganzen Leben einhauchen und die Funktionen erstellen, bauen wir noch eben die Login-Möglichkeit für User, die bereits einen Account besitzen.

Hierzu suchen wir in unserem „Element tree“, welcher sich im Auswahlmenü links oben befindet, nach der Group, die wir gerade für das Sign-up erstellt haben. Dadurch dass wir das Ganze im vorherigen Schritt ordentlich beschriftet haben, fällt uns die Suche hier leichter.

Elements tree signup

Mit einem Klick auf das kleine Augen-Symbol neben der „Group“ können wir diese ausblenden, sodass sie fürs Erste nicht mehr sichtbar ist. Das bietet uns die Möglichkeit, dass wir erneut innerhalb der „Group Login/Signup“ etwas erstellen können, ohne dabei von anderen Elementen irritiert zu sein.

Damit können wir die Funktion nachher so bauen, dass der Nutzer zwischen Anmelde- und Login-Möglichkeit hin und her wechseln kann, ohne dass er für jede Option eine neue Seite braucht.

Ist die Gruppe ausgeblendet, sieht das Ganze wieder so aus:

Nun wiederholen wir die gleichen Schritte, wie für die Sign-up-Möglichkeit.

Wir fügen innerhalb der „Group Login/Signup“ eine neue „Group“ hinzu, nennen diese „Group Login“ und fügen alle Elemente ein, die für das Login benötigt werden.

Das Ganze kann beispielsweise so aussehen:

4. Sign-up-Funktion bauen

Jetzt haben wir zwei „Groups“ innerhalb der „Group Login/Signup“, welche die Ausgangslage für unsere Anmelde- und Login-Funktion bildet.

Also, starten wir mit der Sign-up-Funktion. Hierzu blenden wir die „Group Login“ mittels unseren „Elements tree“ wieder aus und blenden die „Group Signup“ wieder ein (graues Augen Symbol neben den Elementen im „Elements tree“).

Anschließend lässt sich mit einem Doppelklick auf den Button das Menü zum Bearbeiten öffnen. Hier finden wir neben ein paar kosmetischen Einstellungsmöglichkeiten auch die Schaltfläche „Start/Edit workflow“. Mit Klick hierauf kommen wir zum „Workflow“-Menü, welches auch über die Schaltfläche „Workflow“ im linken Auswahlmenü erreichbar wäre. Der Vorteil, wenn du es über das Element direkt aufrufst, dann kannst du gleich das ausgewählte Element mit einem Workflow ausstatten (roter Kreis).

Signup Funktion

Angekommen im „Workflow“-Menü können wir der App sagen, was passieren soll, wenn jemand den Button klickt (ich hab das Ganze schon vorbereitet, daher sind ein wenig mehr Workflows in meiner Übersicht, zu den restlichen kommen wir aber gleich).

Das Erste, was wir wollen ist, dass der User sich registrieren bzw. anmelden kann. Hierzu wählen wir den Workflow „Sign the user up“, welchen wir unter „Account“ finden. Damit sagen wir der App, dass sie einen neuen User in der Datenbank anlegen soll.

Account anlegen workflow

Mit Klick hierauf, öffnet sich ein weiteres Menü, womit wir bubble.io sagen, welche Felder der Nutzer mit seinen Daten befüllt, um diese in die Datenbank zu speichern.

Nachdem unsere Anmeldemöglichkeit aus drei Feldern besteht, einmal E-Mail-Adresse, einmal Passwort und einmal Passwort wiederholen, müssen wir diese Felder auch in dem Workflow hinterlegen, damit unsere App weiß, wo die Daten herkommen.

Das geben wir in dem sich öffnenden Menü an. Unter dem Feld „Email“ suchen wir unser „Input“-Feld für die E-Mail-Adresse (welches wir zuvor in der Designübersicht für unsere Anmeldefunktion platziert haben). Bubble.io liefert hierzu eine kleine Vorschau, welches uns das Ganze erleichtert (ich habe das Feld zuvor als „Input E-Mail-Adresse“ benannt). Mit einem Klick darauf erhalten wir noch ein paar weitere Optionen von denen wir „’s value“ auswählen. Damit sagen wir der App, dass sie den Wert, der in diesem Feld steht, als Datensatz übernehmen soll. Das Ganze sieht folgendermaßen aus:

Workflow sign up

Dasselbe machen wir mit dem Passwort-Feld, setzen den Haken bei „Require a password confirmation“, wodurch wir sicherstellen, dass der Nutzer sein Passwort nicht falsch eingibt und geben auch hier das Feld für die Passwort-Bestätigung an. Letztendlich sieht das Ganze dann so aus:

User signup

Nun haben wir den Teil, mit dem sich der User für unsere App registrieren kann, fertiggestellt.

Da ich hier ohne E-Mail-Bestätigung arbeite, will ich, dass der User nach der Registrierung gleich auf die Startseite meiner App weitergeleitet wird.

Hierzu setze ich einen weiteren Workflow. Unter „Navigation“ gibt es den Befehl „Go to page…“. Hier kann ich hinterlegen, wo ich meinen Nutzer nach der Registrierung hinschicken will.

Go to page signup

In meinem Fall ist es die „index“-Seite, welche ich in dem Feld „Destination“ auswähle. Alle weiteren Felder hier sind erst einmal uninteressant.

Go to index signup

5. Login-Funktion bauen

So, nachdem die Anmelde-Möglichkeit besteht, wollen wir, dass sich unser User auch einloggen kann. Hierzu gehen wir wieder auf die Design-Seite, blenden unsere „Group Signup“ im Elements tree aus, blenden unsere „Group Login“ ein und setzen den Workflow für den „Login“-Button.

Unter „Account“ finden wir den Befehl „Log the user in“.

Log the user in

Dort hinterlegen wir wieder alle Felder, die der Nutzer zum Einloggen benötigt. Das Feld „Stay logged in“ habe ich auf „Yes“ gestellt, was wiederum dafür sorgt, dass sich wiederkehrende Nutzer nicht jedes Mal neu anmelden müssen.

Log the user in workflow

Im Anschluss legen wir mit einem weiteren Workflow wieder fest, wo unser User nach dem Login landen soll. In meinem Fall ist das wieder die Index-Seite.

go to index login

6. Custom States festlegen

Nun haben Nutzer der App die Möglichkeit, dass sie sich sowohl anmelden als auch einloggen können. Allerdings funktioniert das Ganze noch nicht wie in dem Video am Anfang dargestellt, da man nicht zwischen Login- und Anmelde-Möglichkeit hin und her wechseln kann.

Um das zu erreichen, nutzen wir „Custom States“. Damit sagen wir bubble.io, wie in unserem Fall, dass wenn jemand auf den Text „Noch keinen Account? Hier anmelden.“ klickt, dass die App die Möglichkeit zum Anmelden zeigen soll. Klickt jemand dort hingegen auf den Text „Bereits einen Account?“ Hier einloggen.“, dann soll die App die Möglichkeit zum Einloggen anzeigen.

Hierfür verpassen wir unserer übergeordneten Gruppe, der „Group Login/Signup“, in der sich unsere Login- und Signup-Group befindet, einen Custom State. Diese Einstellung befindet sich in dem Menü der Group unter dem kleinen Info-Symbol (roter Kreis).

Custom states

Hier können wir einen Custom State hinzufügen. In meinem Fall habe ich dem Ganzen den Namen „Var1“ verpasst, abgekürzt für Variable, und dem State type „text“ zugewiesen, da wir hier mit einer Variable arbeiten, welche aus Text besteht.

Die „Default value“ habe ich „login“ genannt, da wenn jemand die Seite besucht, zuerst die Login-Möglichkeit angezeigt werden soll (aber Vorsicht: das Ganze könnte auch jeden x-beliebigen Namen tragen. Das alleine sorgt noch nicht dafür, dass die Login-Möglichkeit gezeigt wird. Das ist nur ein vorgegebener Wert von mir – später mehr dazu.).

Default value custom state

Jetzt können wir einen Workflow definieren, der entweder die Möglichkeit des Logins oder die Möglichkeit der Anmeldung zeigt. Diesen Workflow weisen wir dem Textfeld in der jeweiligen Gruppe zu. Starten wir mit der Anmelde-Möglichkeit, mit einem Klick auf das Textfeld und dort mit Klick auf „Start/Edit workflow“.

start workflow custom state

Nun wählen wir den Workflow „Set state“ unter „Element Actions“ aus. Damit weisen wir einem Element einen bestimmten „State“ zu. Das gib uns die Möglichkeit, dass wir bubble.io sagen, dass wenn z.B. State „login“ aktiv ist, dann soll „Group Login“ gezeigt werden.

set state

Hierzu wählen wir unsere übergeordnete „Group Login/Signup“ aus (welche die anderen beiden Groups beinhaltet) und wählen den zuvor gesetzten Custom state „Var1“ aus. Diesen geben wir den Value „login“ (hierzu schreiben wir „login“ einfach in die Zeile rein).

login set state

Damit sagen wir bubble.io, dass wenn jemand auf den Text „Bereits einen Account?…“ klickt, dann nimmt „Group Login/Signup“ den State „login“ an (wodurch wir einstellen können, dass die Login-Möglichkeit angezeigt wird).

Dasselbe machen wir auf der Seite der Login-Möglichkeit. Hier weisen wir den Text „Noch keinen Account? …“ Den gleichen Workflow zu.

Also: „Set state“ unter „Element actions“, „Group Login/Signup“ und Custom state „Var1“ auswählen. Dieses Mal geben wir dem Ganzen aber den Value „signup“. Das heißt, sobald jemand auf den Text „Noch keinen Account…“ klickt, nimmt „Group Login/Signup“ den State „signup“ an.

7. Wechsel zwischen Login/Anmeldung-Möglichkeit bauen

Nun müssen wir der bubble.io-App noch sagen, dass sie, je nach State der „Group Login/Signup“, das Richtige anzeigt.

Hierzu vergeben wir den Groups innerhalb der „Group Login/Signup“ (also „Group Login“ und „Group Signup“) entsprechende Conditions. Angefangen bei der „Group Signup“, sagen wir der App, dass wenn „Group Login/Signup“ den Custom State „signup“ annimmt, dann soll „Group Signup“ sichtbar sein. Als zweite Condition setzen wir fest, dass wenn „Group Login/Signup“ nicht den Custom State „signup“ hat, dann ist diese nicht sichtbar.

Das Ganze sieht folgendermaßen aus – Über die Checkbox „This element is visible“ steuern wir, ob etwas sichtbar ist oder nicht.

Conditions

Ist dies gesetzt, machen wir das Gleiche mit der „Group Login“. Allerdings setzen wir hier die „Var1“ des Custom states auf „login“. Das Ganze sieht dann folgendermaßen aus:

Conditions login

Mit einer Condition legen wir fest, wie die bubble.io App auf etwas reagieren soll. In dem Fall haben wir zuvor in dem Workflow definiert, welchen Custom State unsere übergeordnete „Group“ einnehmen soll. Mit den Conditions haben wir unserer App nun gesagt, was sie anzeigen soll, wenn die übergeordnete Gruppe den entsprechenden Custom State (login/signup) annimmt.

Öffnen wir das Ganze jetzt in der Vorschau, mit Klick auf Preview in der rechten oberen Ecke, können wir uns sowohl anmelden, einloggen als auch zwischen den zwei Optionen hin und her schalten. Damit haben wir die Login/Sign-up Funktion fertig entwickelt.

8. Passwort vergessen

Fehlt noch die Funktion, mit der der Nutzer sein Passwort zurücksetzen kann.

Hierzu habe ich innerhalb der „Group Login“ ein Textfeld mit der Beschriftung „Passwort vergessen?“ platziert. Nun will ich, dass sobald der Nutzer auf „Passwort vergessen?“ klickt, ein Popup geöffnet wird, welches die Möglichkeit bietet, dass ein Nutzer sein Passwort zurücksetzen kann.

Also habe ich unter „Containers“ im linken Auswahlmenü, das Element „Popup“ ausgewählt, welches ich per Drag-and-Drop auf den Bildschirm gezogen habe. Dadurch legt sich ein „Layer“ über die Oberfläche, welcher ermöglicht, dass nur das Popup bearbeitet werden kann. Das Popup habe ich mit „Popup Passwort zurücksetzen“ beschrieben.

popup pw vergessen

Jetzt habe ich innerhalb des Popups eine Group eingefügt, welche die Überschriften, sowie ein Eingabefeld für die E-Mail-Adresse und einen Button enthält.

popup pw vergessen inhalt

Fehlen nur noch die Workflows.

Mit Klick auf den Text „Passwort vergessen?“ starten wir den Workflow „Show“ unter „Element Actions“.

workflow popup

Und wählen hier unser Popup aus. Damit sagen wir bubble.io, dass sobald jemand auf den Text „Passwort vergessen?“ klickt, das Popup gezeigt wird.

show popup

Jetzt können wir den Workflow für das Passwort zurücksetzen definieren. Dafür gehen wir zurück auf das Popup (über den Elements tree) und definieren den Workflow für den Button.

Unter „Account“ finden wir den Workflow „Send password reset email“, welchen wir auswählen.

workflow pw reset.

Nun geben wir unter „Email to reset“ unser Input-Feld innerhalb des Popups an, wo unser Nutzer seine E-Mail-Adresse zum Zurücksetzen des Passworts einfügen kann. Anschließend haben wir noch die Möglichkeit, den Text und den Betreff unserer E-Mail für das Zurücksetzen anzupassen.

pw reset mail

Ist dieser Workflow gesetzt, wollen wir, dass sich das Popup wieder schließt, sobald der Nutzer den Button geklickt hat. Also setzen wir einen weiteren Workflow, der „Hide“ heißt und unter „Element Actions“ zu finden ist. Auch in diesem Workflow wählen wir unser Popup aus.

hide popup

Damit ist unser Workflow abgeschlossen und unser Nutzer kann sein Passwort zurücksetzen. Hierfür erhält er eine E-Mail mit einem Link, um das Passwort neu zu vergeben. Über den Link kommt er zu der „reset_pw“-Seite, die standardmäßig schon hinterlegt ist. Diese kann von dir nach belieben angepasst werden.

Ich habe noch zwei kosmetische Sachen hinterlegt. Und zwar zum einen, habe ich eine „Only when“ Funktion auf den „Passwort zurücksetzen“-Button gesetzt. Diese sorgt dafür, dass der Button nur klickbar ist, wenn jemand auch wirklich eine E-Mail-Adresse zum Passwort zurücksetzen eingetragen hat.

Hierzu klicken wir in der Workflow-Übersicht auf den „When“-Auslöser des Button-Workflows (siehe roter Kreis im Bild). Anschließend können wir in dem Menü, welches sich öffnet, unter „Only when“ festlegen, dass sich dieser Workflow nur starten lässt, wenn das „Input E-Mail-Adresse“-Feld nicht leer ist (siehe grüner Kreis im Bild). Das heißt, es passiert nichts, wenn jemand den Button klickt und das Feld leer ist.

Only when pw vergessen

Und die zweite kosmetische Sache ist eine Benachrichtigung, sobald sich das Popup schließt, die den Nutzer darüber informiert, dass die E-Mail zum Zurücksetzen verschickt wurde.

Alarm bubble.io

Hierfür wählen wir im Auswahlmenü unter „Visual elements“ das Element „Alert“ aus und platzieren es dort, wo es in der App angezeigt werden soll. Anschließend können wir es beschriften und so designen, wie wir es wollen.

Alarm bearbeiten

Nun fügen wir dem Workflow des „Passwort zurücksetzen“-Buttons noch den Workflow zum Anzeigen des Alarms hinzu. Dieser findet sich wieder unter „Element Actions“ mit dem Namen „Show message“.

Alarm workflow

Anschließend wählen wir unseren Alert aus, stellen noch ein, wie lange er angezeigt werden soll und fertig ist das Ganze.

Alarm dauer

Das wars. Jetzt hast du ein vollständig funktionsfähiges Anmeldesystem für deine App, mit der sich Nutzer registrieren und einloggen können.


Du hast Fragen? Willst dich austauschen? Oder brauchst Unterstützung bei deinem nächsten MVP oder deiner Growth Marketing Strategie? Schreib mir gerne eine Nachricht: just@just-growth.com oder nutze das Kontaktformular. Ich freu mich von dir zu hören!

Beitrag teilen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.