Facebook Graph API shows a complex, multi-step dialog to grant OAuth access. A web service we use only needs a single button click. How do they do it?
I'm creating an app to use the Facebook Graph API to load posts from an Instagram Business Profile onto a website. Following Facebook's OAuth guidelines, it opens a dialog where you select your account, select your businesses, select your pages, and then grant all the permissions to the app. (I may have gotten those steps wrong, either way it's not simple.) Some of our clients use Flockler for their Instagram feeds, and connecting their account to the app only requires a single click on a "Continue as YOUR_NAME" button. After clicking the button everything else takes place within Flockler.
How are they doing that? The only info I can find on Meta for Developers is the same method I'm using: https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/ The URL that Flockler uses for auth is facebook.com/privacy/consent/gdp/ and searching for the terms in the URL isn't turning up anything either.
I have investigated this issue and the reason you are getting such login window is that you have User Access Token in your app Configuration:
If you select User access token, then you authentication flow will be one-step only, in case of using System-user access token, you will have multiple steps during authentication where you will have to select your businesses, Facebook pages etc.
By the way, after the configuration is created, do not forget to use in your athentication url. Here is an example of your authentication url:
https://www.facebook.com/v20.0/dialog/oauth?client_id=123456789&redirect_uri=https%3A%2F%2Fexample.com%2Fauth%2Ffacebook%2Fcallback&state=randomstatevalue123&response_type=code&scope=email%2Cpublic_profile%2Cpages_show_list&config_id=9876543472874221
where 9876543472874221 is your configuration id
Thanks! I'm not able to test this out yet but I'm very excited to. I thought I was never going to find a solution...
By the way, I’m not sure the flow I described will give one screen, because it shows one screen only after second reconnect, but @Gavin I’ve found on Youtube - Facebook authentication flow implementation by link: youtu.be/NP5pa1FNdjk?si=yBzi1WVzOBl4EvkI and at 31:37 he has exactly the same window as you showed there. So maybe you can try to create app and configure the same way it was done in video. I’ll try to do it tomorrow and write you back if it helped.
yeah after the first time connecting even my current auth flow is only a single step. But on Flockler I created a brand new account with brand new Facebook/Instagram businesses and even on the first connection it was still only a single button click. I'll check out the YouTube video and see what I can gather from that. Thanks a lot!
Cool that login screen in the video tutorial looks exactly the same as Flockler's! I'm going to work on duplicating their app config and process. I really like that Auth.js library he's using, but unfortunately I'm doing this in PHP. Thank you!!!
Well, I haven't been able to get this working. The login flow in the video is not for business apps, but it needs to be a business app to request the permissions needed to pull their pages and then instagram business accounts to read their photos. The permissions I request are the same that Flockler requests: pages_show_list,instagram_basic,instagram_manage_comments,instagram_manage_insights,pages_read_engagement,ads_management,business_management I also created a new business app and added a User access token configuration with the permissions needed and it uses the complex login process
it seems as if you using the wrong "Login Flow Experience". Taken from this official site (scroll down to the middle more or less), you want to use the "User access token login flow" and not the "Business Integration User access token login flow".
Thanks. Under "User access token login flow" there's a little video that shows the steps for that login flow, and there's still 4 additional screens you need to click through before you're done. The one on Flockler is just a single button click and you're done. Flockler handles selecting the account to pull posts from within their app, not in the Facebook dialog. The dialog opens, you click "Continue as NAME", and the dialog closes.
Hi @Gavin, were you able to implement the single button flow later by any chance?
@MayomiAyandiran Nope, I haven't been able to find any information on it at all. I even posted a paid job on Fiverr hoping to get somewhere and didn't get a single bid on the job :/
@MayomiAyandiran just letting you know that in another answer's comments there's a YouTube video that goes through creating a login and it's using the same Facebook login process I'm trying to accomplish.