Getting auth (The OAuth flow)

[obink]

I'm following the tutorial you made, https://github.com/Dymantic/laravel-instagram-feed/blob/master/tutorial.md

and I think something is wrong with the auth link <a href="{{ $instagram_auth_url }}">Click to get Instagram permission</a> it turns out I get the wrong link. Even though I already fill the config/instagram-feed.php

the link calls back into this. https://api.instagram.com/oauth/authorize/?client_id=YOUR%20INSTAGRAM%20CLIENT%20ID&redirect_uri=127.0.0.1/instagram/auth/callback&scope=user_profile,user_media&response_type=code&state=1

so the data I already put in config/Instagram-feed.php doesn't change the client_id and redirect_uri

another thing is, in the tutorial under auth_callback_route part, you were saying

Then your config should have the route that matches everything after the forward slash following your app_url (https://example.test/ in this case).

Note that you can use more than one url in your Facebook settings, so you can add a url for local dev as well.

you were saying, we can also put the local URL for local dev. But it turns out, Instagram asking for HTTPS in OAuth Redirect URIs

Actually, I already have done Instagram feed using a CURL PHP script, but I want to know how it does in Laravel 7 with this package. I hope this package can link our website with social media faster than CURL opt.

[michaeljoyner]

Hi @obink, thanks for the feedback.

For the first part, it seems like there is an issue with the config, as your config values are still the default values. Have you checked if your config details are available and correct?

For the redirect url and https requirement, I was not aware of that issue, sorry. I use Laravel valet, which makes installing local certificates easy. I will update that tutorial to include this information, but unfortunately I can't help with your specific situation, as I have no idea of your dev environment.

Finally, for the speed of this package vs using curl, I am sure raw curl will be faster. However, this package takes care of the caching, so your users should never have to wait for the network request of making the api call to Instagram.

[obink]

I can say, I'm pretty sure about my laravel config/app and your config/instagram-feed. I'm telling you, I tried this package twice, as twice I'm following the tutorial. So I doubt making a mistake.

yes please check again. I think I like your package.

[michaeljoyner]

Is your site/project on Github, or is there anyway where I can take a look? Or can you share your controller code, or whatever code you use the package with?

[obink]

I'm sorry, I don't have this certain project on Github. Which part do you want to see? I can paste bin it for you.

but according to my steps, this is what I have done PHP version 7.3.12 Laravel 7.x database MySQL

1. Installed this package using composer composer require dymantic/laravel-instagram-feed
2. Publishing it and Migrating it php artisan vendor:publish and php artisan migrate:fresh
3. creating a profile php artisan instagram-feed:profile xuele
4. Updating the file of the credential in here config/instagram-feed.php
5. Creating View file, named Instagram-Auth-Page.blade.php
6. Creating controller named InstagramController, inside of the controller I got this

public function show() { $profile = \Dymantic\InstagramFeed\Profile::where('username', 'xuele')->first();

    return view('instagram-auth-page', ['instagram_auth_url' => $profile->getInstagramAuthUrl()]);
}

7. lastly Routing Route::get('instagram-get-auth', 'InstagramController@show')->middleware('auth')->name('InstagramAuth');

and when I open up this Instagram-Auth-Page, I clicked the link, well it changes now. Maybe because I clear config and cache. Into this https://www.instagram.com/oauth/authorize/?client_id=1087862..&redirect_uri=127.0.0.1/https://xuele.ac.id/&scope=user_profile,user_media&response_type=code&state=1

You see this redirect_uri starting with 127 etc. and this is the laravel server. I believe this is from the .env file. after I clicked the link (with or without laravel IP of 127), it returns

{"error_type": "OAuthException", "code": 400, "error_message": "Insufficient developer role"}

I don't understand, do I still need to asking another oauth/authorize link when I already got one? Or should I just go to the view?

PS. I put the view on my welcome page

web Route

Route::get('/', function () { $feed = \Dymantic\InstagramFeed\Profile::where('username', 'xuele')->first()->feed(); return view('welcome', compact('feed')); });

Welcome.blade.php

@foreach($instagram as $post) imgtag src="{{ $post['url']}}" @endforeach

[michaeljoyner]

Okay, we seem to be making progress, as the config seems to be working.

One problem is that the redirect url the package uses is the app url (which I guess is set to 127.0.0.1 in your case) followed by the value you put in your config file. This means you can't put an absolute url in your config. However, that is not the problem that is causing the oauth request to fail (yet).

The message "Insufficient developer role" means something is wrong or missing in your Facebook/Instagram Basic Display settings. Did you add your IG account as a test user?

[obink]

One problem is that the redirect url the package uses is the app url (which I guess is set to 127.0.0.1 in your case) followed by the value you put in your config file.

Yes it is, and if I put the app URL into the real sites wouldn't it become redirect_uri=https://xuele.ac.id/https://xuele.ac.id/ ?

Did you add your IG account as a test user?

yes, I did.

What's the mistake I made? what should I do?

[michaeljoyner]

Your app_url should be different for your dev site and the real site. So in your config file, for the auth_callback_route you can put a relative path like "instagram/auth/callback". Then your redirect_url will be 127.0.0.1/instagram/auth/callback for local development, and https://xuele.ac.id/=https://xuele.ac.id for the real site.

[obink]

I just changed that, and it still returns the same error code and message.

{"error_type": "OAuthException", "code": 400, "error_message": "Insufficient developer role"}

Is this because the localhost of 127.0.0.1 is not registered in the Valid OAuth Redirect URIs (on Facebook developer Instagram basic display app)?

[michaeljoyner]

Possibly, try add it to your FB settings to see. But I do suspect the issue comes from somewhere in your settings

[obink]

I just finished testing it online on the real site and the redirect is not working, again.

https://www.instagram.com/oauth/authorize/?client_id=10878...&redirect_uri=https://xuele.ac.id/=https://xuele.ac.id/&scope=user_profile,user_media&response_type=code&state=1

returns

{"error_type": "OAuthException", "code": 400, "error_message": "Insufficient developer role"}

and the foreach-loop of images output doesn't work either.

`web Route

Route::get('/', function () { $feed = \Dymantic\InstagramFeed\Profile::where('username', 'xuele')->first()->feed(); return view('welcome', compact('feed')); });

Welcome.blade.php

@foreach($instagram as $post) imgtag src="{{ $post['url']}}" @Endforeach`

[obink]

Possibly, try add it to your FB settings to see. But I do suspect the issue comes from somewhere in your settings

yea exactly, where is that somewhere. It seems I can't find it.

[michaeljoyner]

Can you please paste in your config file? If you want me to check your FB settings you can email me screenshots or something, but otherwise it is impossible for me to tell.

[obink]

I just sent an email to you.

sent to michael@dymanticdesign.com