In Bubble Login mit LinkedIn hinzufügen

Schritt-für-Schritt Anleitung, um in Bubble einen LinkedIn Login hinzuzufügen und dadurch Daten von der LinkedIn API zu erhalten.

Chris Strobl
Chris Strobl

In diesem Tutorial lernst Du in wenigen Minuten einen Social Login mit LinkedIn in deine eigenen Apps mit Bubble zu integrieren.

Video-Tutorial: LinkedIn Login mit Bubble

Gehe zunächst auf LinkedIn's Developer Portal und erstelle eine neue App. Neben einem Namen für die App und einer Datenschutzerklärung (Privacy Policy) benötigst du vor allem eine eigene Firmenseite. Diese kannst du jederzeit selbst auf LinkedIn erstellen (Hier gibt es eine Anleitung).

Sobald du die LinkedIn App erstellt hast, gilt es diese mit dem Link zu verifizieren. Hierzu musst du als Admin der Firmenpage eingeloggt sein.

Anschließend gehst Du in Auth und kopierst Du sowohl die Client ID und Client Secret. Dann gehst du in Bubble und unter Plugins wählst du das von Bubble entwickelte LinkedIn Plugin aus. Hier fügst Du Client Secret und Client ID ein.

Wichtig ist, dass du jetzt die Redirect URL meinebubbleapp.bubbleapps.io/api/1.1/oauth_redirect als Redirect URL bei LinkedIn Developers unter Auth, OAuth Settings, Authorized redirect URLs for your app hinzufügst und vor allem im Bubble Plugin die Checkbox selbst aktiviert. Dies ist wichtig, um die Authentifizierung des Services zu gewährleisten.

Final musst du noch den Scope der API bei LinkedIn festlegen. Wähle hierfür unter Products, Sign in with LinkedIn aus. Hierfür musst du den AGBs von LinkedIn für den Social Login zustimmen und wirst dann verifiziert. Die Verifizierung dauert in etwa 24 Stunden, jedoch ist die API sofort nutzbar.

Anschließend erstellen wir in Bubble einen Button mit dem Workflow Account Signup/login with a social network und wählen LinkedIn aus.

Um zu validieren, ob wir Informationen von LinkedIn zurück bekommen, erstellen wir einen Text und wählen dynamisch Current User, Linkedin, First Name und Last Name, den wir aus LinkedIn bekommen und anschließend ein Bild, welches wir uns über Current User, LinkedIn, Profile image holen.

Diese Informationen können wir natürlich jederzeit auch direkt in der Datenbank speichern, anstatt die Daten von der API zu holen.

Schließlich beweist uns die Live Demo, dass der Login funktional ist.

APIsTutorials