Manual Oauth login for Facebook

[steve10]

Can anyone explain how to go about doing a manual OAUTH login flow for Facebook? I need to do this so I can get the access token that comes back.

[NigelG]

Hard Mode … (this assumes you know what you are doing)…

Set up your app on facebook developer portal. Add in the callback URL on your app.

In bubble … Have button that launches an external website …

https://www.facebook.com/v3.3/dialog/oauth? client_id=xxxxx&redirect_uri=https://yourapp.bubbleapps.io/version-test/callback

Once that is working you will see that you get a code back on the redirect … something like …

https://yourapp.bubbleapps.io/version-test/callback?code=AQD7c7A2av7NkgSmsRqeRp1kx7GZsmliCOIrd4tzkNw10vLNhdJ3sJImBUbJ8HOv3yNj0gBTG_3Cz2zs7XQQgXgYKHlFXZuOEry_-fWHcf3FkKfSdCrcnVBlR4sX6CscMmN2HgeTP4eoZuTzZHAlykZoZ7HOdPnCB6xCWOUN084IMG7fEr63J0xuTRnvrq2rddllT61fnKHG4QkmZFvjBUaHg5UWeDuQtwcDdVK4Fa_lV4Y4oXHi44bOk-D1R2cJIbbUHV3QpElu-1vNsW0yzY1ner4B4nToxHLXFT1srQKMZ2xVBwITAfZuPHmH0JQKdIU#_=_

(note I haven’t used “state” here … you probably should but it is ok for now).

Set up a call in the API Connector (don’t connect it to the page yet !)…

GET https://graph.facebook.com/v3.3/oauth/access_token

client_id = xxxx
redirect_uri = the same as the one above
client_secret = yyyy
code = grab the code from the URL above

Don’t do anything else at this point, as it takes a lot of manual stuff to get the bits working, do it all manually in the editor, don’t do it automatically (e.g. the code is one time, so if you have a page action on load early on, it will use up the token straight away, so leave it be until you have initialised all the API calls).

Now, you have have your access token, you will have basic profile scope only (name and id). If you need more you can request in the first step (add… ,scope=user_gender or whatever you need but bear in mind you may need an app review).

Simplest thing to test … get the profile using another API connector…

GET https://graph.facebook.com/v3.3/me

access_token = from the call above.

Now on page load on callback call an API Connector and grab the code parameter from the URL and pass it.

Once all these are up and running, you can call the API connector on page load. Get the token, and then display the name on the page.

This is current as of now. It will most probably change

[steve10]

@NigelG

code

Thanks so much, this worked great!

[ambroisedlg]

Hey @steve10 @NigelG

I might need your help regarding the above.

As @lottemint.md advised in this post, we decided to build a manual OAuth flow.

1. We’re successfully grabbing the ‘authorization_code’ from the URL using the API Connector User-Agent Flow, with the following config:

2. Then, as instructions above (thanks @NigelG!), we’re using the GET /access-tokens to retrieve the generated token using the authorization_code:

We’re getting this error when trying to initialize it:

Any idea why? Any advice would be helpful

[NigelG]

The clue is in the error

Use the POST method not the GET

[ambroisedlg]

Ah thanks @NigelG, I thought we needed to use a GET here as for the FB example above.
I’ll try that asap and let you know how it goes!

[NigelG]

Annoyingly it can be different for each OAUTH.

Get OAuth 2.0 access and refresh tokens

[ambroisedlg]

I tried that and now getting a different error but I feel we’re almost there thanks to your help.

Config:

And the error:

According to some Hubspot forum posts, the config seems correct (and we’re obviously grabbing a new code for each initialization request we make).

I’m thinking it might be due to the fact that the token is already generated through the OAuth User-Agent flow (therefore the code we’re getting is already linked to one) and that we’re trying to generate a new one through the POST request.

To be honest I’m fairly new to all this - I’m not sure I’m right about this. Please do tell me if I’m completely off track here

[NigelG]

Bear in mind that the code you get back from the first call … that is a one shot thing.

It is a pain to test. So you need to do the first call and stop any work flows.

The copy the code from the redirect back to your page and copy it into the API connector.

[ambroisedlg]

@NigelG that’s exactly what I’m doing, unfortunately no clue why I’m getting this error

[NigelG]

Try unticking query string ?

Try putting it all into the URL ?

/oauth/v1/token?grant_type=authorization_code&client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&client_secret=yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy&redirect_uri=https://www.example.com/&code=zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz

[ambroisedlg]

@NigelG when I untick query string (for any of the parameters), it returns this error:

Putting it all into the URL returns the same error as before:

[NigelG]

You may need to URL encode the URL first ?

%2Foauth%2Fv1%2Ftoken%3Fgrant_type%3Dauthorization_code%26client_id%3Dxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx%26client_secret%3Dyyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy%26redirect_uri%3Dhttps%3A%2F%2Fwww.example.com%2F%26code%3Dzzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz

I think the issue is that it wants it in Form Encoded ?

[ambroisedlg]

Thanks @NigelG for taking the time to help ! Still no luck unfortunately

I get the following error when encoding the whole URL:

[NigelG]

Sorry, I encoded too much.

https://api.hubapi.com/oauth/v1/token?grant_type=authorization_code&client_id=108ff756-56ec-4bbe-aa98-fae50bd7e329&client_secret=09b3c8ce-f6d5-4dd6-95b9-6383237f8545&redirect_uri=https%3A%2F%2Ftrese11.bubbleapps.io%2Fversion-test%2Fhubspot&code=0e8e3f6d-b3f2-4cf6-9a69-d11138cdc044

So just encode the redirect URI.

That is why it was failing to find the code… it got lost !

You could probably stuff it in the JSON Body … but this works !

That is a 6 hour token, so if you are storing it for later use you will need to use the refresh token to grab another one. So calculate the expiry time (now + expiry) and when you want to do the call check if it has passed and grab a new token.

[ambroisedlg]

@NigelG thanks! I’m going nuts. I did exactly as you did and still getting this Bad Auth Code error:

Did you set it the same way?

I’m thinking it could be linked to wrong Bubble settings too - as I mainly worked on the design for this one (and not so much on workflows), the ‘Current User’ data when navigating from Page → Grant Access → Redirect to Page isn’t passed along correctly. Therefore the auth_code is assigned to the wrong user.

But still, as we’re initializing the call manually it should return the same values as yours above right? Or do you think that could be the reason it returns this error?

[NigelG]

Can you post your URL ?

[ambroisedlg]

Hi @NigelG! Sorry for the delayed reply and thanks again for your help!

Thankfully @lottemint.md very kindly offered his help as well and walked me through all the steps on a test app. Works like a charm now!

In a few words: instead of going through the ‘User-Agent flow’ which I was desperately trying to use, we had to go through a ‘None or self-handled’ method.

I’ll very soon post a showcase with a step-by-step guide for everyone to see. I’ll post the link to the showcase on this topic as well.

Thanks again guys for your help and understanding! Much appreciated

[ambroisedlg]

As promised, here is the link to the showcase: [Showcase] Manual OAuth2 Token from 0 to 1 - Integrations

[jrmayhew]

Been trying this for two days…I have followed your process (even tried as backend flow to get the toekn) I so confused in that when I initialize the API using the code returned it runs fine and I get a token back … I can then take that token and initialize the info API and works fine but when I try to make the call on page load of the callback url and pass the url param I keep getting a blank returned for the token … any ideas? Thanks!