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

Facebook Login & Open Graph Introduction

Embed Size (px)

Citation preview

Facebook Login & Open Graph

王致平(Eric Ping)

多奇數位創意有限公司(本範例使用 Facebook Graph API v2.3)

Contents

Facebook API

Oauth

Facebook Login (Website)

Facebook Login (Server)

Exchange Access Token

Open Graph

What's API?

The Library offered by OS or Third Party to do something

What's Facebook API

Website & Application can get user data from Facebook

What's OAuth

Log in different application by same service

Facebook Login (Website)

Users can log in your website by Facebook

You can get user data over Facebook API

How to ImplementFacebook Login

Add a New App

App IDApp Secret

Website URLex: http://sudo.tw

Mobile URLex: http://m.sudo.tw

Facebook Login(Browser)

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.

Facebook Login(Request From Your Server)

Redirect To FB Login URL (HTTP 302)

https://www.facebook.com/dialog/oauth?

client_id={APP-ID}&

redirect_uri={REDIRECT-URI}

After Login Success

{REDIRECT-URI}?code={CODE}

CODE is the one time token in order to get the real AccessToken

Request For AccessTokenRequest 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}

Request For AccessTokenResponse Body

access_token={ACCESS-TOKEN}&expires={EXPIRE-SECOND}

(P.S. the CODE will be expired after requesting the AccessToken,

please remember this AccessToken)

If you request it again from your server with the same parameter…

Response Body

Hey, It’s JSON Format

Request For Long-LivedAccessToken

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}

Request For Long-LivedAccessToken

Response Body

access_token={ACCESS-TOKEN}&expires={EXPIRE-SECOND}

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/how-to--handle-expired-access-tokens/

Image via from Facebook

Short-Lived(about 2 hours)

Long-Lived(about 60 days)

Open Graph

http://ogp.me/

Make your website shared to facebook richer

Share Your Page to Facebook

Facebook Robot will read Metadata

og:image or og:video og:title

og:description

author

Set Your Open Graph

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