In Bubble Google Login hinzufügen

Video Transkript

Unser Ziel ist es in wenigen Minuten einen Google Login mit Bubble hinzubekommen. Geht zunächst mal auf developers.google.com/identity und hier in den Google Sign-in. Wichtig ist, dass ihr auf Web klickt. Diese Sachen Sind der der normale Source-Code. Den könnt ihr ignorieren, weil wir das Ganze mit einem Plugin lösen von Bubble. Das heißt, wir klicken auf Get started. Haben jetzt noch mal die konkrete Developer Dokumentation. Auch hier könnt ihr euch natürlich einlesen, aber wir machen das also go to credentials Page und liegen jetzt bei developers.google.com einen Account an. Wenn ihr  jetzt in Credentials reingeht, müssen wir als Erstes ein neues Projekt anlegen: Babbel login, dann ist das Ziel, dass wir eine OAuth Client ID anlegen. Als ersten Schritt seht ihr, dass wir einen Consent Screen brauchen, das hat mit Compliance und rechtlichen Sachen zu tun. Die Applikation kann entweder intern sein, das heißt nur Leute mit eurem G-Suite Account können das nutzen oder extern, wobei natürlich weitere Sachen genutzt werden. Wir nennen die Applikation Bubble login. Wir können ein Logo anlegen. Entscheidend ist hier nun eure autorisierten Domains der erste Punkt ist, dass wir unsere Bubble App das ist natürlich fraglich ob wir eine Top-Domain habt oder die Bubble selbst, dass ihr eure Bubble App hier rein kopiert und gleichzeitig auch eure AGBs und Datenschutzerklärungen in den Consent Screen. und den Terms of Service rein packt. So, ihr seht jetzt, dass wir dieses Problem haben, dass die top-domains nämlich die autorisierten nicht da sind und heißt wir müssen einmal Bubble's Appseite .io autorisieren und wir müssen einmal gitbook.io in meinem Fall, weil dort die AGBs liegen, autorisieren. Jetzt können wir die Applikation speichern. Im nächsten Schritt können wir nur noch mal den oAuth Cliennt anlegen. Wir machen eine web application, nennen sie Login mit Gmail. Und müssen nun die Redirect URL anlegen und und freigeben. Bevor wir das erstellen, gehen wir jetzt zurück in Bubble und laden das Google Bubble Plugin hoch. Wir haben hier das Original von Bubble erstellte Plugin, welche 14.000 mal installiert wurde. Und sehen hier folgendes, das ist ganz wichtig, dass ich hier diesen Button anklickt: Use a generic redirect URL und ihr seht auch hier die Adresse. Leider kann man bei Bubble ja das nicht kopieren, das heißt wir müssen es manuell machen. Wir nehmen die URL und das ist auch die Redirect und dann ein Jetzt kriegt ihr hier die beiden Sachen. Die client-id , die ihr sowohl in die Development als auch in die Live-Version rein packt und ihr kriegt auch das Secret, dass ihr ebenfalls kopiert. Im nächsten Schritt müssen wir jetzt noch einen Button definieren. Login mit Google. Hier draufklicken in den Button klicken, dann geht dir rein in Sign up/ login with social network Google als Authorisierungsmethode und jetzt I'm zweiten Schritt noch ein Logout Button um das zu testen. Ob der User und dann was kriegen wir von der API: ihr könnt das eben hier finden unter current user Google und dann profile picture. Roundness von 250 damit und testen auch noch. Nachnamen und die E-Mail-Adresse Wir testen jetzt das Ganze: ihr seht die Applikation. Login mit Google. Wir nehmen hier mein Account. Und wir sehen wie die Information das Profilbild, der Vorname und der Nachname und die E-Mail-Adresse aus der Google API kam, das heißt das ermöglicht jetzt eure Nutzern sich leichter einzuloggen für euer Produkt.

Vielen Dank für die Aufmerksamkeit und auf bald.