Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Tokyo2016itkaasan

10,063 views

Published on

WordCamp Tokyo2016のスライドです。WP RestAPIとjQueryで作るアプリ開発についての話をしました

Published in: Technology
  • Be the first to comment

WordCamp Tokyo2016itkaasan

  1. 1. WP REST API と jQueryで作る 最短アプリ開発 ITかあさん http://www.kaasan.info/
  2. 2. I am ‘ITかあさん’ Freelance engineer http://www.kaasan.info/ I ♥ WordPress I ♥ JavaScript ON SALE !! 現場で必ず使われている WordPress デザインのメソッド [アップデート版]
  3. 3. Oct. 15, 2016 秋のJavaScript祭 In mixi Please come to see that!!
  4. 4. OAuth 2.0 I want to say two things!!
  5. 5. Write Only Simple jQuery Call By
  6. 6. “ Smartphone App
  7. 7. I made test app ! My Gist URL Test APP URL
  8. 8. You can access from a browser ! JS
  9. 9. ”スマホサイトじゃん” JUST A WEB SITE!!! やめて マサカリ。
  10. 10. JS
  11. 11. Write only Authentication:OAuth 2.0 ◦ What is OAuth 2.0 ◦ Plugin:WP OAuth Server ◦ Login by the access token Post: WP REST API ◦ Post by WP REST API ◦ Comment from WP REST API ◦ Show Posts & Comments !!
  12. 12. ”What is OAuth 2.0?” いきなり ちょいむずい。
  13. 13. Response Request 通常のRequest WordPressの中だけでの リクエスト。 言語はPHPのみ
  14. 14. OAuth認証 END USER CLIENT JavaScriptでもPHPでも APIをたたければ 言語はなんでもよい!
  15. 15. ”OAuth 1.0 OAuth 2.0” 違いが分からん
  16. 16. OAuth 1.0
  17. 17. OAuth 2.0
  18. 18. 日が暮れる!. I have only 30 min.
  19. 19. OAuth 2.0 OAuth 1.0 OAuth 2.0: ◦ OAuth1.0に比べてシンプル ◦ スマートフォンアプリにも対応可能 ◦ Facebook OAuth 1.0: ◦ 認証と証明がやや複雑 ◦ Webアプリのみ ◦ Twitter
  20. 20. OAuth 2.0! I chose this one.
  21. 21. WP OAUTH SERVER. Download
  22. 22. ” 年間 約5000円” $49 per year マサカリ 痛い。
  23. 23. WP OAuth Server ◦ Client & Client secret ◦ Access Token ◦ Refresh Token ◦ Call Back URL ◦ State ◦ Getting Login User OAuth 2.0認証で必要な機能が全て揃う
  24. 24. OAuth 2.0
  25. 25. 日が暮れる!. I have only 30 min.
  26. 26. 省略、短縮版にしました! ◦ WordPress Login ID & Password ◦ Access Token ◦ Getting Login User ◦ Login Success Page Refresh TokenからAccess Token再発行は 省略しました
  27. 27. プラグインを有効化すると Client ID Client Secret
  28. 28. How To get Access Token ? URI: ◦ https://example.com/oauth/token Param: WP REST API ◦ grant_type : password ◦ client_id : your client_id ◦ client_secret : your client_secret ◦ username : WordPress User ◦ password : WordPress Password Method: POST
  29. 29. USE Chrome Addon “DHC”
  30. 30. Response {"access_token":"euggnhvgwdnakgmqb1brm4ismi3svx", "Expires_in":3600, "token_type":"Bearer", "Scope":"basic", "refresh_token":"wnc5qx9g7fwsgvonp8tzcgdcurfy4m"}
  31. 31. Get the Login User URI: ◦ https://example.com/oauth/me Param: ◦ access_token : access_token ◦ client_id : your client_id ◦ client_secret : your client_secret Method: GET
  32. 32. USE Chrome Addon “DHC”
  33. 33. Response { "ID": "1", "user_login": "itkaasan", "user_nicename": "itkaasan", "user_email": "seven.mazda@gmail.com", "user_registered": "2016-08-29 17:58:58", "user_status": "0", "display_name": "itkaasan", "email": "seven.mazda@gmail.com" }
  34. 34. New Token by Refresh Token URI: ◦ https://your-server.com/oauth/token Param: ◦ grant_type : refresh_token ◦ client_id : your client_id ◦ client_secret : your client_secret ◦ refresh_token : refresh_token Method: GET
  35. 35. Token有効チェックはない Tokenから認証を行う ユーザー情報を取得 TokenをCookieに
  36. 36. ”Access from jQuery” さあ、エディタの準備だ!
  37. 37. とその前に
  38. 38. 超えなければ ならない
  39. 39.
  40. 40. Cross Domain!. Cross Domain
  41. 41. Cross Domain問題 END USER CLIENT exampleA.com exampleB.com 違うドメイン間は 本来データのやり取りが できない
  42. 42. Write header !! Access-Control-Allow-Origin": your URI Access-Control-Allow-Credentials":true 複数サイトの場合 パイプ|で繋ぐ
  43. 43. Check My Gist Check My Gist ◦ 1. Cross Domain ◦ 2. Access Token ◦ 3. Get a Login User
  44. 44. SHOW  DEMO  Application
  45. 45. ” WP REST API ” さあ、認証ができたら。
  46. 46. Access WP REST API URI: ◦ https://example.com/wp-json/wp/v2/posts Param: ◦ user_id : login user id ◦ limit : int ◦ order : desc or asc ◦ Method: GET
  47. 47. USE Chrome Addon “DHC”
  48. 48. ” もう時間がない” Don’t have time anymore あ、最後にマサカリ 痛い。
  49. 49. Check My Gist Check My Gist ◦ 1. Post Comments ◦ 2.Show Comments
  50. 50. SHOW  DEMO  Application
  51. 51. OAuth 2.0 によるログイン認証 AccessTokenを取得する Access Tokenからユーザー情報取得 取得したUser IDから投稿やデータの取得! Cross Domainはheaderに追記で APIを使える範囲を限定 Summary
  52. 52. JavaScriptだけでここまで出来る! WP REST APIと jQueに敬意を表したい! I have only 30 min.
  53. 53. ”ありがとうございました” Thank you for listening Write more jQuery!

×