Facebook API for Kottans

Transcript

1. Facebook API
2. Overview • App creation and set up • Facebook Login • Graph API • Facebook JS SDK • Creating sample app
4. App creation • https://developers.facebook.com/apps/
5. OAuth 2.0 and Facebook 1. YourApp registers on Facebook 2. User in YourApp clicks “login via FB” and browser redirects it to FB 3. User authorises access to his FB info for YourApp, YourApp gets access token that uses for requests to FB
6. OAuth 2.0 +--------+ +---------------+ | |--(A)- Authorization Request ->| Resource | | | | Owner | | |<-(B)-- Authorization Grant ---| | | | +---------------+ | | | | +---------------+ | |--(C)-- Authorization Grant -->| Authorization | | Client | | Server | | |<-(D)----- Access Token -------| | | | +---------------+ | | | | +---------------+ | |--(E)----- Access Token ------>| Resource | | | | Server | | |<-(F)--- Protected Resource ---| | +--------+ +---------------+
7. Check Login Status FB.getLoginStatus(function(response) {
 statusChangeCallback(response);
 }); // response status {
 status: ‘connected’, // connected || not_authorized || unknown
 authResponse: { // returns only if connected
 accessToken: '...',
 expiresIn:'...',
 signedRequest:'...',
 userID:'...'
 }
 };
8. Login Button <div
 onlogin="onLogin()"
 className="fb-login-button"
 data-max-rows="1"
 data-size="large"
 data-show-faces="false"
 data-auto-logout-link="false"></div> FB.login(function (response) {
 // handle the response 
 }, {scope: 'email,user_likes'});
9. Graph API • The idea of a ‘social graph’ - information composed of: • nodes - basically "things" such as a User, a Photo, a Page, a Comment • edges - the connections between those "things", such as a Page's Photos, or a Photo's Comments • fields - info about those "things", such as a person's birthday, or the name of a Page
10. /me Returns info about current user GET graph.facebook.com /me Returns info about current user’s photos GET graph.facebook.com /me/photos
11. Choosing fields Returns id, name and picture of user GET graph.facebook.com /user_id_or_name?fields=id,name,picture
12. Ordering Returns photo’s comments in reverse chronological order GET graph.facebook.com /{photo-id}? fields=comments.order(reverse_chronological)
13. Nested requests and limits Returns 5 of current user’s albums (name and 2 it’s photos) and 5 posts GET graph.facebook.com /me? fields=albums.limit(5){name, photos.limit(2)}, posts.limit(5)
14. Pagination • Cursor-based pagination {
 "data": [
 // Endpoint data is here
 ],
 "paging": {
 "cursors": {
 "after": "MTAxNTExOTQ1MjAwNzI5NDE=",
 "before": "NDMyNzQyODI3OTQw"
 },
 "previous": "https://graph.facebook.com/me/albums? limit=25&before=NDMyNzQyODI3OTQw"
 "next": "https://graph.facebook.com/me/albums? limit=25&after=MTAxNTExOTQ1MjAwNzI5NDE="
 }
 } • Time-based pagination • Offset-based pagination
15. Updating and deleting POST graph.facebook.com /{node-id}? {updated-field}={new-value}& access_token={access-token} DELETE graph.facebook.com /{node-id}? access_token=...
16. Searching GET graph.facebook.com /search? q={your-query}& type={object-type} GET graph.facebook.com /search? q=coffee& type=place& center=37.76,-122.427& distance=1000
17. Graph API in JS SDK FB.api('/me', function(response) {
 console.log(response);
 });
 // { id: 'user_id', name: 'John Doe' }
18. Dialogs // Share to my wall FB.ui({
 method: 'share',
 href: 'http://kottans.org',
 quote: 'Kottans are awesome!',
 }, (response) => {
 console.log('Share response', response);
 }); // Send a message FB.ui({
 method: 'send',
 link: 'http://kottans.org/kottans-calendar/',
 });
19. Graph API exporer https://developers.facebook.com/tools/explorer
20. Graph API in JS SDK
21. Test Users
22. Sample app • Stack • npm • ES Latest • Webpack • Babel • React • React-router • scss
23. Sample app • https://github.com/viattik/kottans-facebook-api • https://jsfiddle.net/viattik/6Ldd6s7a/2/ #&togetherjs=ESoSgs9PKf
24. Links • https://developers.facebook.com/ • https://developers.facebook.com/docs/ reference/login/extended-permissions • https://developers.facebook.com/tools-and- support/