Duplicate basic functionality for Facebook

[mbod]

1. setup Facebook app
2. duplicate setup/oauth steps and display of recent image posts from a Facebook account instead of Instagram

[mbod]

@atnjqt I think we can probably use the same meta app as the apis seem to cover both platforms - can you move me to an app administer so I can set up a test user

[mbod]

can probably hack this and use the

https://www.quod.ai/post/how-to-integrate-facebook-login-api-into-your-react-app

react-facebook-login package

[atnjqt]

Thanks you are now an administrator

[atnjqt]

https://www.quod.ai/post/how-to-integrate-facebook-login-api-into-your-react-app

This does look promising as well, I won't be able to look today but hopefully tomorrow I'll dive in!

[atnjqt]

Thanks for this issue, I did review the referenced guide here and changed the frontend login from instagram to facebook.

Significantly to test any permission scopes beyond email & public_profile this needs App Review, though you can setup tester accounts (up to 10) with specific permissions. More info here: https://developers.facebook.com/docs/permissions/reference#login_permissions

We can start to post on tester accounts to review the user_photos permission, see here.

[atnjqt]

[atnjqt]

Example of the full user permissions app (on accepting this I think it blocked the app, as it no longer shows up in my settings > apps & websites... best to use test users instead of unreviewed app I guess 😅

[atnjqt]

Quick Update before our meeting 04/13/22

Using Facebook JavaScript SDK vs a random package react-facebook-login

The suggested react-facebook-login package here is helpful for quickly introducing a login button, but this isn't really actively maintained so introduces some broken dependencies (which we want to avoid, see here)...

• Facebook has a lot of documentation on implementing this from scratch, probably recommended for the long run:
  • https://developers.facebook.com/docs/javascript/quickstart
  • https://developers.facebook.com/docs/javascript/examples#login

Testing Graph API

there is a really nice tool provided by Meta Developer to test Facebook's Graph API calls:

• https://developers.facebook.com/docs/graph-api/overview

• https://developers.facebook.com/docs/graph-api/guides/explorer#query-string-field

I think the initial example from our instagram test had some helpful async axios functions for fetching & displaying that I need to review and incorporate here.. In this case we need to

• login
  • me/picture (profile picture as key url in json response )
  • me/friends
  • per friend {user-ID}/picture get the url for photo!

[mbod]

@atnjqt good work on this - and I agree re. that particular react package - just seemed worth trying as the instagram one had helped rapid testing.

• So I think working with the graph api tester and some generated test users to figure out the appropriate calls is the next step as you say.

• I think we do want:

  • me/picture (profile picture as key url in json response )
  • me/photos before we look at:
  • me/friends
    • per friend {user-ID}/picture get the url for photo because they have to also be app users to get any information

[atnjqt]

Thanks @mbod for the note, using Axios really is just so simple compared to what I was expecting... also feeling grateful for the work done on the Instagram project as the component structure is nearly identical and really nicely plugged in for FB, on the latest commit.

I'm going to try and get the images to dynamically show for your friends who also allowed the app (in this case, our network of up to 10 tester roles) by our meeting later on

[atnjqt]

Thanks, on reviewing today after our meeting I was able to add the dynamic friend profile picture displaying.

At this point I think we have somewhat duplicated the instagram example, I'll go ahead and merge to mark this issue as resolved.

Pivoting next to getting images turned, plus storing all in mongo.