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

1. WP REST API と
jQueryで作る
最短アプリ開発
ITかあさん
http://www.kaasan.info/

2. I am ‘ITかあさん’
Freelance engineer
http://www.kaasan.info/
I ♥ WordPress I ♥ JavaScript
ON SALE !!
現場で必ず使われている
WordPress
デザインのメソッド
[アップデート版]

3. Oct. 15, 2016
秋のJavaScript祭
In mixi
Please come to see that!!

4. OAuth 2.0
I want to say two things!!

5. Write Only Simple jQuery
Call By

6. “
Smartphone App

7. I made test app !
My Gist URL
Test APP URL

8. You can access from a browser !
JS

9. ”スマホサイトじゃん”
JUST A WEB SITE!!!
やめて マサカリ。

10. JS

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. ”What is OAuth 2.0?”
いきなり ちょいむずい。

13. Response
Request
通常のRequest
WordPressの中だけでの
リクエスト。
言語はPHPのみ

14. OAuth認証
END USER CLIENT
JavaScriptでもPHPでも
APIをたたければ
言語はなんでもよい！

15. ”OAuth 1.0 OAuth 2.0”
違いが分からん

16. OAuth 1.0

17. OAuth 2.0

18. 日が暮れる!.
I have only 30 min.

19. OAuth 2.0 OAuth 1.0
OAuth 2.0:
◦ OAuth1.0に比べてシンプル
◦ スマートフォンアプリにも対応可能
◦ Facebook
OAuth 1.0:
◦ 認証と証明がやや複雑
◦ Webアプリのみ
◦ Twitter

20. OAuth 2.0!
I chose this one.

21. WP OAUTH SERVER. Download

22. ” 年間 約5000円”
$49 per year
マサカリ 痛い。

23. WP OAuth Server
◦ Client & Client secret
◦ Access Token
◦ Refresh Token
◦ Call Back URL
◦ State
◦ Getting Login User
OAuth 2.0認証で必要な機能が全て揃う

24. OAuth 2.0

25. 日が暮れる!.
I have only 30 min.

26. 省略、短縮版にしました！
◦ WordPress Login ID & Password
◦ Access Token
◦ Getting Login User
◦ Login Success Page
Refresh TokenからAccess Token再発行は
省略しました

27. プラグインを有効化すると
Client ID Client Secret

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. USE Chrome Addon “DHC”

30. Response
{"access_token":"euggnhvgwdnakgmqb1brm4ismi3svx",
"Expires_in":3600,
"token_type":"Bearer",
"Scope":"basic",
"refresh_token":"wnc5qx9g7fwsgvonp8tzcgdcurfy4m"}

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. USE Chrome Addon “DHC”

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. 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. Token有効チェックはない
Tokenから認証を行う
ユーザー情報を取得
TokenをCookieに

36. ”Access from jQuery”
さあ、エディタの準備だ！

37. とその前に

38. 超えなければ
ならない

39. 壁

40. Cross Domain!.
Cross Domain

41. Cross Domain問題
END USER CLIENT
exampleA.com
exampleB.com
違うドメイン間は
本来データのやり取りが
できない

42. Write header !!
Access-Control-Allow-Origin": your URI
Access-Control-Allow-Credentials":true
複数サイトの場合
パイプ｜で繋ぐ

43. Check My Gist
Check My Gist
◦ 1. Cross Domain
◦ 2. Access Token
◦ 3. Get a Login User

44. SHOW
DEMO
Application

45. ” WP REST API ”
さあ、認証ができたら。

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. USE Chrome Addon “DHC”

48. ” もう時間がない”
Don’t have time anymore
あ、最後にマサカリ 痛い。

49. Check My Gist
Check My Gist
◦ 1. Post Comments
◦ 2.Show Comments

50. SHOW
DEMO
Application

51. OAuth 2.0 によるログイン認証
AccessTokenを取得する
Access Tokenからユーザー情報取得
取得したUser IDから投稿やデータの取得！
Cross Domainはheaderに追記で
APIを使える範囲を限定
Summary

52. JavaScriptだけでここまで出来る！
WP REST APIと
jQueに敬意を表したい！
I have only 30 min.

53. ”ありがとうございました”
Thank you for listening
Write more jQuery!