Add LinkedIn (auth openID) Login To Your Bubble.io App || 2024 Updated tutorial ENGLISH

Content / Articles
1

Link to LinkedIn developer console: https://developer.linkedin.com

When creating API Connector endpoint, use the following values:
Linkedin OpenID API docuentation : https://learn.microsoft.com/en-us/lin…

API Name : LInkedin API
Scope: profile email openid
App Secret: paste from linkedin developer App
App ID: paste from linkedin developer App
Login dialog redirect: / authorization
Access token endpoint: / accesstoken
User profile endpoint: https://api.linkedin.com/v2/userinfo?…)

User ID key path: sub
User email key path: email

API CALL::::::::
Name : Linkein CAll
Use as : Data
GET: https://api.linkedin.com/v2/userinfo?…[projection]
KEY: projection
Value: (sub,name,given_name,family_name,picture,locale,email_verified,email)

What you will learn In this video

  1. How to create a LinkedIn developer account
  2. How to generate LinkedIn authentication API keys
  3. How to create the workflows that power LinkedIn authentication
  4. How to display a users LinkedIn account data within your app

timeline:

00:00 Quick review About login with LinkedIn in bubble.io
00:30 How to create LinkedIn developer account
00:40 how to create app in LinkedIn developer account
01:53 Adding signIn with LInkedIN using open ID connect
02:46 How to connect LinkedIn with Bubble.io API connector
04:48 how to get LinkedIn open ID Documentation
05:03 LinkedIn authentication Demo
06:00 Initializing the call

FIND OUT MORE:

Multi screen navigation on single page | Option set & states | Single-page App navigation in bubble: https://youtu.be/B4IWB27lq68

Easy Select & Unselect Checkboxes in Bubble.io | TUTORIAL || Urdu hindi: https://youtu.be/RA8j_lL--So

Your First Bubble.io web App Development Part 2 UNDER 10 MIN Urdu/Hindi Beginners Tutorial : https://youtu.be/kKW92kvPMIs

Change your bubble.io App font : https://youtu.be/DBocKUAZJZ0

2

erro
erro784×289 15.2 KB

Hello, I tried the exacly same thing of the video, but returns with the error of acess toke, could you please help me?

3

Sure, I can help you.

4

Did you copy pasted correctly, or can you send me screenshot of your API calls n API setup

5

Send me screenshot

6

I have same issue. I can’t initialize API call to get user’s profile info. I uploaded image of issue down below and hope you help me out. @sukainaturget
Thank you

image
image1743×800 149 KB

7

Kindly initialize the call first.

8

I managed it, appreciate it

9

Good to hear. :cowboy_hat_face:

10

Hi,
Looks like I got stuck here as well despite following instructions. (call won’t initialize).
How did you fix it?

Thank you!

11

Kindly send me screenshot

12

image
image1854×1178 323 KB

image
image1814×1044 75.7 KB

image
image1264×490 16.1 KB

image
image1770×934 42.6 KB

When I click on the test button, it does bring me to the linkedin authentication page where I can log in. But the API call still won’t initialize.

13

Also getting this error in the debugger:

API Connector error: the Oauth2 API LinkedIn is not configured properly - Received error from api The service this service just returned an error (HTTP 403). Please consult their documentation to ensure your call is setup properly. Raw error:

Unauthorized html, body, pre { margin: 0; padding: 0; font-family: Monaco, 'Lucida Console', monospace; background: #ECECEC; } h1 { margin: 0; background: #333; padding: 20px 45px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.3); border-bottom: 1px solid #111; font-size: 28px; } p#detail { margin: 0; padding: 15px 45px; background: #888; border-top: 4px solid #666; color: #111; text-shadow: 1px 1px 1px rgba(255,255,255,.3); font-size: 14px; border-bottom: 1px solid #333; }

Unauthorized

You must be authenticated to access this page.