Instagram new API with Auth

Hi! since Instagram is going to delete their old API “Legacy API” and instead of this they gonna implement " Instagram Graph API " and " Instagram Basic display API " i need to work to get the instagrams photos of some clients accounts inside their websitites with Instagram Basic display API

So i started reading this: https://developers.facebook.com/docs/instagram-basic-display-api

And this: https://developers.facebook.com/docs/instagram-basic-display-api/reference/media

Once i had my app id and registered my account as a tester, generating the id_code (id of the app), app secret id and finally getting the token; i sarted puting this information inside Wappler:

And im stuck here trying to fetch the schema but i got an error.

So what im trying to achieve? just want to show all the media (photos and some videos) of an instagram account inside a html page.

I think, if i can fetch the schema i can use a server connect from client side to get the images and some info about each post.

I must say i have a very short experience with API’s so i’ll apreciate some help here. I completed succefully this example by @Teodor Using API Data Source
But instagram API is another level.

Thnks in advance.

1 Like

If I read it correctly, the new Instagram Graph API, needs a facebook login/authorization?

Did you try to use facebook as oauth2 provider?

Hi George, yes thats for Graph API, but not for Instagram Basic display API i think. I gonna check this again and try to find something about it in other forums. Thanks!

1 Like

Actually if it is for your own Instagram authorization you can do the client credentials authorization flow.
Then you don’t need all the extra oauth2 redirects and can use straigth the facebook app id and app secret.

You just need to enter it like this:

image

Let me know if this works for you.

Hi George, yes it is my account. I did what u said and clicked the client credentials and deleted the params, but still can’t fetch the schema:

This is what i got in my instagram account, so i think i got that part right.

Yes the schema editor in Wappler - doesn’t know yet unfortunately about your oauth2 authorization (yet)

Can you just run the server connect action in the browser? Do you get the right results then?

I tryed but all i got is this:

No I mean just run the server action in the browser:

image

and see the output there

Oh ok, i got this:

Select your server action in the server connect panel and then click Open In Browser.
Screenshot_14

Oh sorry :man_facepalming: haha, here:

try this:

If you want to use the API with user credentials then your first setup with the instagram provider was good. You should not set the Params in the Provider and Authorize step, it will be adding the correct ones for you. The Authorize step you should set the required scopes for you use-case. Also the https://graph.instagram.com/ is not a valid endpoint. I will see if I can get a working example.

That would be greate, thnks Patrick.

Here are the settings I tested the oauth of instagram with:


The second step gave me back the access_token and user_id after giving permission.

Hi Patrick, first of all thanks for taking the time to help me. I did what u showed me, but still cant show the instagrams photos from my account in an HTML page. Can u show me what u did in your action step “API Action” please? Thnks

Is any advance on this?

That’s an almost 4 years old topic, if you have any issues setting up Instagram API for your project, post a new one and explain your problems there.