An entertaining intro to Graph Theory, the Facebook Platform and the new, NEW PHP SDK

An uncon talk at Sunshine PHP 2015

Transcript

1. Sammy Kaye Powers February 7th, 2015 new, new An entertaining intro to Platform Graph theory Facebook the and the PHP SDK
2. Does not work @
3. Goal overview To get an
4. photo: harryritchies.com History lesson A slightly embellished
5. 1736 The year is
6. People wore Funny Bathing suits
7. riddles People solved
8. like this one
9. seven bridges
10. seven bridges Here
11. seven bridges Here Here
12. seven bridges Here Here Here
13. seven bridges Here Here Here Here
14. seven bridges Here Here Here Here Here
15. seven bridges Here Here Here Here Here Here
16. seven bridges Here Here Here Here Here Here There
17. cross all the bridges ONCE and only once?
19. enter Leonhard Euler
20. invents Graph theory
21. uses graph theory to Answer
22. No.
24. 268 Fast-forward years…
25. Facebook is Born! photo: bzd1 on Flickr
26. I guess I should back up a bit…
27. Graph Theory What is
28. Describes rela tion ships
29. Guitars haveStrings
30. David likes pickles
31. to model relations Graphs we use
32. Graph? What kind of
33. This?
34. Nope This?
35. This?
36. Nope This?
37. This?
38. Nope This?
39. This?
40. Nope This?
41. Aw, kitty…
42. So what kind?
43. This
44. A simple graph
45. Dots
46. Dots Lines
47. Dots Lines
48. Nodes Lines
49. Nodes Lines a.k.a vertices
50. Nodes Lines a.k.a vertices
51. Nodes Edges a.k.a vertices
53. A “Thing”
54. the relation between the things
55. In the Back-end uses graph theory
56. Social Graph It’s called the
57. Social Graph It’s called the
58. …as in the Graph Theory kind of graphs
59. Social Graph photo: uberhumor.com
60. Social Graph It’s called P.S. That’s the open graph logo (a little different)
61. Describing this with Social Graph
64. Jordan
65. Jordan
66. Tatiana Jordan
67. Tatiana Jordan
68. Tatiana Jordan Kisses
69. Tatiana Jordan Kisses (instances of kissing)
70. Tatiana Jordan Kisses
71. Scott Tatiana Jordan Kisses
72. Scott Tatiana Jordan Kisses
73. Scott Tatiana Jordan stalks Kisses
74. Scott Tatiana Jordan stalks Kisses (instances of stalking)
75. Scott Tatiana Jordan Kisses stalks
76. Scott Tatiana Jordan stalks Kisses stalks
77. Scott Tatiana Jordan stalks Kisses stalks
78. Scott Tatiana Jordan stalks Kisses stalks people stalking people
79. “Facebooky” example
81. Social Graph (Facebook)
82. PHP Nerd (you) (Facebook) Social Graph
83. (you) (Facebook) ?? link ?? Social Graph PHP Nerd
84. (you) (Facebook) Graph API Social Graph PHP Nerd
85. (you) (Facebook) Graph API Hi! Social Graph PHP Nerd
86. (you) (Facebook) Graph API Social Graph PHP Nerd
87. <tangent>
88. AN API? What’s
89. application program interface
90. specifies how software components should interact
91. API Laravel $user = DB::table(‘users')! !!!->where('name', ‘John')! !!!->first();
92. Http protocol API’s over the
93. HTTP API over Host: silly.com! ! GET /users/123
94. HTTP API over HTTP/1.1 200 OK! Content-Type: application/json! ! {! !“id”: 123,! !“name”: “Foo User”! }
95. Web API’s These are
96. API Graph API The is a Web
97. API’s Web • REST! • HATEOAS! • OAuth! • etc…
98. Graph API The • REST! • HATEOAS! • OAuth! • etc…
99. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope
100. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope
101. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope ✓ Yep! (2.0)
102. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope ✓ Yep! (2.0) Don’t have to know!
103. </tangent>
104. PHP App Graph API Social Graph
105. Graph API Can I haz user 123? Social Graph PHP App
106. Graph API Can I haz user 123? Can I haz user 123? Social Graph PHP App
107. Graph API Yes: Social Graph PHP App
108. Graph API Yes: {! name “Scott”,! title: “Creeper”! } Social Graph PHP App
109. Graph API tl;dr
110. https://! graph.facebook.com Lives here
111. /v2.2/foo-bar URL prefix versioned with a
112. Not RESTful so developers be like
113. OAuth 2.0 Uses a flavor of Don’t have to know!
114. Every “Thing”…
115. Users Every “Thing”…
116. comments Users Every “Thing”…
117. photos comments Users Every “Thing”…
118. photos comments Users Nodes Every “Thing”…
119. photos comments Users Nodes Every “Thing”… Yay! Nodes!
120. A photo A comment A User Nodes id:12..3 id:”45_90” id:45..90 Every “Thing”…
121. A little Weird ID’s are
122. id:972343284723449 A User A little Weird ID’s are
123. id:972343284723449 A comment A User id:”45_90” A little Weird ID’s are
124. Graph API request/response
125. photo id:4590
126. photo id:4590 Host: graph.facebook.com! GET /v2.2/4590
127. photo id:4590 Shouldn’t That Be /v2.2/photos/4590 ??? Host: graph.facebook.com! GET /v2.2/4590
128. photo id:4590 HTTP/1.1 200 OK! {! "id": "4590", ! "name": "Plane!", ! . . .! } Host: graph.facebook.com! GET /v2.2/4590
129. Nodes a list of
130. comments Nodes a list of a list of
131. comments Nodes a list of Likes a list of a list of
132. photos comments Nodes a list of Likes a list of a list of a list of
133. photos comments Nodes a list of Likes Edges
134. /v2.2/node/edge come after Edges Nodes
135. photo id:4590
136. photo id:4590 comments
137. photo id:4590 GET /v2.2/4590/comments comments
138. photo id:4590 GET /v2.2/4590/comments HTTP/1.1 200 OK! ! {"data": [! {"id": "4590_123",! "message": "Pickles!"},! {"id": "4590_456", ! "message": "Turtles!"}! ]} comments
139. Nodes have and fields edges
140. Graph API endpoint reference developers.facebook.com/! docs/graph-api/reference
141. User Node fields edges - id! - first_name! - last_name! - name! - email * /albums! /feed! /photos! /friends! /picture *
142. a note on permissions
143. Request GET /v2.2/123/turtles Graph API the
144. GET /v2.2/123/turtles be like Graph API
145. GET /v2.2/123/turtles be like Developers
146. B.T.Dubs… GET /v2.2/123/turtles
147. B.T.Dubs… GET /v2.2/123/turtles not a valid Edge
148. But! GET /v2.2/123/photos legit Edge
149. GET /v2.2/123/photos HTTP/1.1 200 OK! ! {"data": []} empty Response
150. GET /v2.2/123/photos user_photos Permission you’ll need the
151. GET /v2.2/123/photos login ask for permissions at (more on this later)
152. GET /v2.2/123/photos HTTP/1.1 200 OK! ! {"data": []} empty Response
153. How do we access the Graph API
154. With a Facebook App
155. but first…
156. Become a Developer
157. developers.facebook.com
158. developers.facebook.com
159. developers.facebook.com
160. developers.facebook.com
161. Three important points
162. 1. Read the Platform Policy Three important points
163. 1. Read the Platform Policy 2. Read the Platform Policy Three important points
164. 1. Read the Platform Policy 2. Read the Platform Policy 3. Read the Platform Policy Three important points
166. Yay! Now you’re a Developer
167. Creating a Facebook App
172. App Dashboard
173. Yay! You created a Facebook app
174. App Dashboard
175. App Settings
176. Anatomy of a Facebook App
178. Core
179. Core (not an official term)
180. Platforms Platforms
181. Core Facebook App
183. ID
184. Name ID
185. Secret Name ID
186. Secret Name ID
187. App Name Created by you
188. App Name My Awesome App Example:
189. App Id Numeric identifier
190. App Id Created by Facebook
191. App Id Doesn’t have to be secret
192. App Id 111417252289428 Example:
193. App Secret Created by Facebook
194. App Secret Used to validate data from Facebook
195. Secret!! App Secret Don’t show it to anyone who doesn’t need it
196. App Secret
197. Platforms Facebook App
199. Website
200. Website Canvas
201. Website Canvas Mobile
202. Website Canvas Page Tab Mobile
203. Website Canvas Page Tab Mobile ConSole
204. App Settings
205. App Settings
206. App Settings
207. Compare with new app
208. Website To configure Facebook Login Log in with Facebook
209. Website To configure Facebook Login Log in with Facebook
210. CANVAS To configure canvas apps
211. like…
213. CANVAS Canvas is just <iframe src=“”></iframe>
214. Page Tab To configure Page tabs
216. Page Tab Page tab is just <iframe src=“”></iframe>
217. Mobile For native mobile apps
218. P.S.
219. Remember what’s under there?
220. Ah?
221. Ah?
222. Ah?
223. Secret!!
224. Cereally guys… Secret!!
225. One last thing before we code…
226. Understanding Facebook Login
227. Login Flow • User clicks on link • Facebook asks to approve • Access token is obtained *
228. All about Access Tokens
229. Access Tokens look like CAACEdEose0cBAJHwVI2DydR M65PZAld1a8r2efvhZBEruyv TTr87xjR85sIrFYeZBzsh5WZ CpO5wrVxZAO6JDmf3a5mL…
230. Access Tokens are sent with API requests GET /v2.2/123?! !!! !access_token=CAACE…
231. Access Tokens Represent
232. Access Tokens Represent A User
233. Access Tokens Represent A User A Page
234. Access Tokens Represent A User An App A Page
235. Access Tokens Represent A User An App A Page Graph API
236. Access Tokens Represent A User An App A Page
237. App Access Tokens are concatenated from
238. App Access Tokens are concatenated from
239. App Access Tokens are concatenated from + |
240. App Access Tokens are concatenated from + | +
241. + | + Example: 123 appsecret
242. + | + 123|appsecret Example: 123 appsecret
243. + | + 123|appsecret Example: 123 appsecret But Wait!
244. + | + 123|appsecret Example: 123 appsecret
245. Access Tokens have two lifetimes
246. Short-Lived Access Tokens have two lifetimes (default)
247. Short-Lived Long-Lived Access Tokens have two lifetimes (default)
248. Short-Lived Long-Lived Access Tokens have two lifetimes (default) 2 hours
249. Short-Lived Long-Lived Access Tokens have two lifetimes (default) 60 Days 2 hours
250. Access Tokens request cycle Graph API
251. Access Tokens request cycle Graph API Can I haz Access Token?
252. Access Tokens request cycle Graph API Short-Lived
253. Access Tokens request cycle Graph API ThX, but… Can I HAz Longer? Short-Lived
254. Access Tokens request cycle Graph API Long-Lived
255. You haz Access token! …now send requests to the Graph API
256. Sound Complicated?
257. Sound Complicated? There’s An SDK For That
258. Facebook App Graph API So far… Facebook Dev Facebook Login
259. Facebook App Graph API So far… Facebook Dev Facebook Login ✓
260. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓
261. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓
262. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓
263. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓ Now What?
264. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓ Code Time!
265. Software development kits (SDK’s)
266. Two official SDK’s we care about
267. Two official SDK’s we care about php
268. Two official SDK’s we care about php Javascript
269. Two official SDK’s we care about php Javascript
270. v4.1 php SDK
271. php SDK v4.1 Do I even Need This?
272. OAuth 2.0 Remember… Facebook Login uses
273. Clients OAuth 2.0 PHP League $authUrl = $provider->getAuthorizationUrl();! $_SESSION['oauth2state'] = $provider->state;! header('Location: '.$authUrl);! ! // . . .! ! $token = $provider->getAccessToken(! ! 'authorization_code', [! 'code' => $_GET['code']! ]);! $user = $provider->getUserDetails($token);! printf('Hello %s!', $userDetails->firstName);
274. Clients OAuth 2.0 Laravel 5 public function redirectToProvider() {! return Socialize::with(‘facebook')! ! ! ! ->redirect();! }! ! public function handleProviderCallback() {! $user = Socialize::with(‘facebook')! ! ! ! ->user();! // $user->token;! }
275. php SDK v4.1
276. php SDK v4.1 Heads up
277. php SDK v4.1 • Handles login flow • Graph Nodes as collections • Signed request support • Easy-as-pie file uploads • Easy batch request support • Easy-peasy (deep) pagination
278. Install "require": {! "facebook/php-sdk-v4":! "~4.1.0@dev"! } composer.json
279. Install "require": {! "facebook/php-sdk-v4":! "~4.1.0@dev"! } composer.json
280. Config $fb = new Facebook\Facebook([! /* */! ]);
281. Config $fb = new Facebook\Facebook([! 'app_id' => 'app-id',! 'app_secret' => 'secret',! ]);
282. Config $fb = new Facebook\Facebook([! 'app_id' => 'app-id',! 'app_secret' => 'secret',! ]); SECRET! better: use env vars
283. Config $fb = new Facebook\Facebook(); if you have env vars FACEBOOK_APP_ID FACEBOOK_APP_SECRET and
284. Facebook Login
285. login from redirect $login_link = $fb->getLoginUrl();! ! echo '<a href="' . $login_link . '">'.! 'Log in!</a>'; Route: / php SDK v4.1
286. login from redirect $login_link = $fb->getLoginUrl([! 'email',! 'user_status',! ]); Route: / php SDK v4.1
287. callback URL Route: /facebook/login $token =! $fb->getAccessTokenFromRedirect(); php SDK v4.1
288. callback URL $token =! $fb->getAccessTokenFromRedirect(); Route: /facebook/login throws Facebook\Exceptions \FacebookSDKException php SDK v4.1
289. callback URL use Facebook\Exceptions\FacebookSDKException;! try {! $token = $fb->getAccessTokenFromRedirect();! } catch (FacebookSDKException $e) {! dd(‘Error:' . $e->getMessage());! } Route: /facebook/login php SDK v4.1
290. $token once you obtain user is logged in! :) (sort of…) php SDK v4.1
291. $token what do you do with php SDK v4.1
292. Store it for later… session Database $token php SDK v4.1
293. User Data Getting
294. Getting User Data $res = $fb->get(‘/123’, $token); Facebook\Facebook()
295. Getting User Data $res = $fb->get(‘/123’, $token); User node id Facebook\Facebook()
296. Getting User Data $res = $fb->get(‘/123’, $token); Can set Default Facebook\Facebook()
297. Getting User Data $fb->! setDefaultAccessToken($token);! $res = $fb->get(‘/123’); Set As Default Facebook\Facebook()
298. Getting User Data $fb->! setDefaultAccessToken($token);! $res = $fb->get(‘/123’); don’t need Facebook\Facebook()
299. Getting User Data $res = $fb->get(‘/123?! fields=id,name,email’); Facebook\Facebook()
300. Getting User Data $res = $fb->get(‘/123’); Facebook\FacebookResponse() Facebook\Facebook()
301. Getting User Data $a = $res->getHttpStatusCode();! $b = $res->getHeaders();! $c = $res->getBody();! $d = $res->getDecodedBody(); Facebook\FacebookResponse()
302. Getting User Data $node = $res->getGraphObject(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphObject()
303. Getting User Data $node = $res->getGraphObject(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphObject() Heads up
304. Getting User Data $node = $res->getGraphNode(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphNode() Heads up
305. Getting User Data Facebook\! GraphNodes\! GraphNode() extends from a collection
306. Getting User Data GraphUser! GraphPage! GraphAlbum Facebook\GraphNodes\GraphNode() sub nodes of namespace: Facebook\GraphNodes $res->getGraphUser();! $res->getGraphPage();! $res->getGraphAlbum();
307. Remember way back when…
308. User Node fields edges - id! - first_name! - last_name! - name! - email * /albums! /feed! /photos! /friends! /picture *
309. Getting User Data $id = $userNode->getId();! $name = $userNode->getName();! $partner =! $userNode->getSignificantOther(); Facebook\GraphNodes\GraphUser()
310. User’s Timeline Posting on a
311. Getting User Data $data = [! ! ! ‘message’ => ‘Hello from #ssp15’,! ];! ! $res = $fb->post(‘/me/feed’, $data); Facebook\Facebook()
312. Getting User Data $data = [! ! ! ‘message’ => ‘Hello from #ssp15’,! ];! ! $res = $fb->post(‘/me/feed’, $data); Facebook\Facebook()
313. WEB Framework Custom persistent store URL detection HTTP Client Tying into
314. *Phew* time for a kitty break
315. SDK Javascript Sharing with the
316. Javascript SDK installation <script>! window.fbAsyncInit = function() {! FB.init({! appId : 'your-app-id',! xfbml : true,! version : 'v2.1'! });! };! ! (function(d, s, id){! var js, fjs = d.getElementsByTagName(s)[0];! if (d.getElementById(id)) {return;}! js = d.createElement(s); js.id = id;! js.src = "//connect.facebook.net/en_US/sdk.js";! fjs.parentNode.insertBefore(js, fjs);! }(document, 'script', 'facebook-jssdk'));! </script> copy/paste before developers.facebook.com/docs/javascript/quickstart </body>
317. Javascript SDK installation <script>! window.fbAsyncInit = function() {! FB.init({! appId : 'your-app-id',! xfbml : true,! version : 'v2.1'! });! };! ! (function(d, s, id){! var js, fjs = d.getElementsByTagName(s)[0];! if (d.getElementById(id)) {return;}! js = d.createElement(s); js.id = id;! js.src = "//connect.facebook.net/en_US/sdk.js";! fjs.parentNode.insertBefore(js, fjs);! }(document, 'script', 'facebook-jssdk'));! </script> developers.facebook.com/docs/javascript/quickstart This
318. Javascript SDK installation FB.init({! appId : '{your-app-id}',! cookie : true,! version : 'v2.2'! });
319. Javascript SDK installation FB.init({! appId : '{your-app-id}',! cookie : true,! version : 'v2.2'! });
320. Javascript SDK share dialog FB.ui({! method: 'share',! href: ‘http://foo.com'! }, function(response){});
321. Javascript SDK share dialog FB.ui({! method: 'share',! href: 'http://foo.com'! }, function(response){});
322. Javascript SDK share dialog
323. Javascript SDK share dialog Customize?
324. Javascript SDK share dialog FB.ui({! method: 'share',! href: 'http://foo.com'! }, function(response){});
325. meta tags Open Graph
326. meta tags <meta property=“og:url"! content="http://foo" /> ! <meta property=“og:title"! content=“Foo Site" />! <meta property=“og:description"! content=“Foo description of bar" /> ! <meta property=“og:image"! content=“http://foo.c/bar.jpg” /> Open Graph
327. meta tags <meta property=“og:url"! content="http://foo" /> ! <meta property=“og:title"! content=“Foo Site" />! <meta property=“og:description"! content=“Foo description of bar" /> ! <meta property=“og:image"! content=“http://foo.c/bar.jpg” /> Open Graph
328. meta tags <meta property=“og:url"! content="http://foo" /> ! <meta property=“og:title"! content=“Foo Site" />! <meta property=“og:description"! content=“Foo description of bar" /> ! <meta property=“og:image"! content=“http://foo.c/bar.jpg” /> Open Graph
329. meta tags <meta property=“og:url"! content="http://foo" /> ! <meta property=“og:title"! content=“Foo Site" />! <meta property=“og:description"! content=“Foo description of bar" /> ! <meta property=“og:image"! content=“http://foo.c/bar.jpg” /> Open Graph
330. Learn? What did we
331. Before you cAme
332. Know You prolly didn’t
333. Know You prolly didn’t Graph API
334. Know You prolly didn’t Graph API Facebook Developer
335. Know You prolly didn’t Facebook App Graph API Facebook Developer
336. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login
337. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens
338. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens php SDK
339. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens Javascript SDK php SDK
340. Now Look at you!
341. Now Look at you! Yay! Learning!
342. Learn! So much more to • Graph API • User Permissions • App Canvas • Page Tabs • Test Users • Test Apps • And more!
343. Next Steps Create an app & play!
344. Next Steps March 25 & 26 San Francisco
345. THANKS! Sammy Kaye Powers @SammyK SammyK.me Host of @PHPRoundtable Chicago Facebook Developers West Coast Swing