This is a ppt about facebook login & Open Graph

1. Facebook Login & Open Graph
王致平(Eric Ping)
多奇數位創意有限公司
(本範例使用 Facebook Graph API v2.3)

2. Contents
Facebook API
Oauth
Facebook Login (Website)
Facebook Login (Server)
Exchange Access Token
Open Graph

3. What's API?
The Library offered by OS or Third Party to do something

4. What's Facebook API
Website & Application can get user data from Facebook

5. What's OAuth
Log in different application by same service

6. Facebook Login (Website)
Users can log in your website by Facebook
You can get user data over Facebook API

7. How to Implement
Facebook Login

8. Add a New App

9. App ID
App Secret
Website URL
ex: http://sudo.tw
Mobile URL
ex: http://m.sudo.tw

10. Facebook Login
(Browser)

13. Short-Lived Token
(about 2 hours)
For security reason, please send the accessToken back to
your Server and request a new accessToken from Server
directly in order to protect your accessToken leaked from
the Client-side.

14. Facebook Login
(Request From Your Server)

15. Redirect To FB Login URL
(HTTP 302)
https://www.facebook.com/dialog/oauth?
client_id={APP-ID}&
redirect_uri={REDIRECT-URI}

16. After Login Success
{REDIRECT-URI}?code={CODE}
CODE is the one time token in order to get the real
AccessToken

17. Request For AccessToken
Request from your server
GET https://graph.facebook.com/oauth/access_token?
client_id={APP-ID}
&redirect_uri={REDIRECT-URI}
&client_secret={APP-SECRET}
&code={CODE}

18. Request For AccessToken
Response Body
access_token={ACCESS-TOKEN}&expires={EXPIRE-SECOND}
(P.S. the CODE will be expired after requesting the AccessToken,
please remember this AccessToken)

19. If you request it again from your
server with the same parameter…
Response Body
Hey, It’s JSON Format

20. Request For Long-Lived
AccessToken
Request from your server
GET https://graph.facebook.com/oauth/access_token?
grant_type=fb_exchange_token
&client_id={APP-ID}
&redirect_uri={REDIRECT-URI}
&client_secret={APP-SECRET}
&fb_exchange_token={ACCESS-TOKEN}

21. Request For Long-Lived
AccessToken
Response Body
access_token={ACCESS-TOKEN}&expires={EXPIRE-SECOND}

22. Check Token is valid or not
Send any graph API request.
If failed, please follow this
https://developers.facebook.com/blog/post/2011/05/13/ho
w-to--handle-expired-access-tokens/

23. Image via from Facebook
Short-Lived
(about 2 hours)
Long-Lived
(about 60 days)

24. Open Graph
http://ogp.me/
Make your website shared to facebook richer

25. Share Your Page to Facebook

26. Facebook Robot will read Metadata
og:image or og:video og:title
og:description
author

27. Set Your Open Graph

28. Q & A
Some Link
Facebook Developers https://developers.facebook.com/
Facebook Access Tokens https://developers.facebook.com/docs/facebook-
login/access-tokens
The Open Graph protocol http://ogp.me/
Example Project https://github.com/EricPing/NodeJsFacebookExamle