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アプリのみ

◦ Twitter

OAuth 2.0!

I chose this one.

WP OAUTH SERVER. Download

” 年間 約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!