WordCamp Tokyo2016itkaasan
53
WP REST API と jQueryで作る 最短アプリ開発 ITかあさん http://www.kaasan.info/
-
Upload
- -
Category
Technology
-
view
6.445 -
download
0
Transcript of WordCamp Tokyo2016itkaasan
WP REST API とjQueryで作る最短アプリ開発ITかあさんhttp://www.kaasan.info/
I am ‘ITかあさん’ Freelance engineerhttp://www.kaasan.info/I ♥� WordPress I ♥� JavaScript
ON SALE !! 現場で必ず使われている
WordPressデザインのメソッド
[アップデート版]
Oct. 15, 2016
秋のJavaScript祭In mixi
Please come to see that!!
OAuth 2.0
I want to say two things!!
Write Only Simple jQuery
Call By
“
Smartphone App
I made test app !
My Gist URL
Test APP URL
You can access from a browser !
JS
”スマホサイトじゃん”JUST A WEB SITE!!!
やめて マサカリ
。
JS
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 !!
”What is OAuth 2.0?”
いきなり ちょい
むずい。
Response
Request
通常のRequest
WordPressの中だけでのリクエスト。言語はPHPのみ
OAuth認証
END USER CLIENT
JavaScriptでもPHPでもAPIをたたければ言語はなんでもよい！
”OAuth 1.0 OAuth 2.0”
違いが分からん
OAuth 1.0
OAuth 2.0
日が暮れる!.
I have only 30 min.
OAuth 2.0 OAuth 1.0
OAuth 2.0:◦ OAuth1.0に比べてシンプル◦ スマートフォンアプリにも対応可能◦ Facebook
OAuth 1.0: ◦ 認証と証明がやや複雑
◦ Webアプリのみ
OAuth 2.0!
I chose this one.
” 年間 約5000円”$49 per year
マサカリ 痛
い。
WP OAuth Server
◦ Client & Client secret◦ Access Token◦ Refresh Token◦ Call Back URL◦ State◦ Getting Login User
OAuth 2.0認証で必要な機能が全て揃う
OAuth 2.0
日が暮れる!.
I have only 30 min.
省略、短縮版にしました！
◦ WordPress Login ID & Password◦ Access Token◦ Getting Login User◦ Login Success Page
Refresh TokenからAccess Token再発行は省略しました
プラグインを有効化するとClient ID Client Secret
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
USE Chrome Addon “DHC”
Response
{"access_token":"euggnhvgwdnakgmqb1brm4ismi3svx",
"Expires_in":3600,
"token_type":"Bearer",
"Scope":"basic",
"refresh_token":"wnc5qx9g7fwsgvonp8tzcgdcurfy4m"}
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
USE Chrome Addon “DHC”
Response
{
"ID": "1",
"user_login": "itkaasan",
"user_nicename": "itkaasan",
"user_email": "[email protected]",
"user_registered": "2016-08-29 17:58:58",
"user_status": "0",
"display_name": "itkaasan",
"email": "[email protected]"
}
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
Token有効チェックはない
Tokenから認証を行う
ユーザー情報を取得
TokenをCookieに
”Access from jQuery”
さあ、エ
ディタの準備だ！
とその前に
超えなければならない
壁
Cross Domain!.
Cross Domain
Cross Domain問題
END USER CLIENT
exampleA.com
exampleB.com
違うドメイン間は本来データのやり取りができない
Write header !!
Access-Control-Allow-Origin": your URI Access-Control-Allow-Credentials":true
複数サイトの場合パイプ｜で繋ぐ
Check My Gist
Check My Gist
◦ 1. Cross Domain◦ 2. Access Token◦ 3. Get a Login User
SHOW DEMO Application
” WP REST API ”
さあ、認
証ができたら。
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
USE Chrome Addon “DHC”
” もう時間がない”Don’t have time anymore
あ、最後にマサカリ
痛い。
Check My Gist
Check My Gist
◦ 1. Post Comments◦ 2.Show Comments
SHOW DEMO Application
OAuth 2.0 によるログイン認証AccessTokenを取得する
Access Tokenからユーザー情報取得取得したUser IDから投稿やデータの取得！
Cross Domainはheaderに追記でAPIを使える範囲を限定
Summary
JavaScriptだけでここまで出来る！
WP REST APIとjQueに敬意を表したい！
I have only 30 min.
”ありがとうございました”Thank you for listening
Write more jQ
uery!
