Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WP JSON REST API
Search
Miguel Lezama
August 16, 2014
Programming
0
210
WP JSON REST API
WordCamp Montreal presentation
Miguel Lezama
August 16, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Jakarta EE meets AI
ivargrimstad
0
710
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
受け取る人から提供する人になるということ
little_rubyist
0
250
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
3
440
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
RubyLSPのマルチバイト文字対応
notfounds
0
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
A Philosophy of Restraint
colly
203
16k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Building an army of robots
kneath
302
43k
Speed Design
sergeychernyshev
25
620
Done Done
chrislema
181
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
For a Future-Friendly Web
brad_frost
175
9.4k
Transcript
JSON REST API
@pelequie lezama migueluy Jetpack Team Miguel Lezama Code Wrangler Montevideo,
Uruguay
Qu'est ce que c'est un API? API = Application Programming
Interface Indique la façon dont les applications doivent interagir les unes avec les autres.
Examples de APIs https://developers.google.com https://developers.facebook.com/ https://dev.twitter.com/ https://developer.github.com/v3/
WordPress APIs
Qu'est ce qu’on peut faire avec les APIs WordPress? Realiser
des operations CRUD sur un site WordPress
APIs WordPress XML-RPC API WP-API http://github.com/WP-API/WP-API (Core) WordPress.com + Jetpack
! ! http://github.com/WP-API/WP-API/blob/master/docs/comparison.md
WordPress.com JSON REST API +
JSON? REST?
Qu'est ce que c'est JSON? JavaScript Object Notation
JSON: JavaScript Object Notation Format des données ouvert. Facile pour
l'homme de lire et d'écrire. Facile pour les machines à parser et à générer. ! Alternative à le XML (Extensible Markup Language).
{! ! "ID":678,! ! "site_ID":1,! ! "author":{! ! ! "ID":1,!
! ! "email":
[email protected]
,! ! ! "name":"miguel",! ! },! ! "date":"2014-08-15T19:17:40+00:00",! ! "modified":"2014-08-15T19:18:02+00:00",! ! "title":"Bonjour Montreal!",! ! “URL":"http://miguellezama.com/?p=678",! ! "short_URL":"http://wp.me/p3oDRb-aW",! ! "content":"<p>Bonjour et bienvenue! WordCamp Montreal</p>\n"! }!
Qu'est ce que c'est REST? REpresentational State Transfer
REpresentational State Transfer Un style d'architecture adapté au Web. L’utilisation
d’URI comme représentant d’une ressource permet d'avoir un système universel d'identification des éléments de l'application.
Qu'est ce que c’est ? Plugin Suralimentez votre site auto-hébergé
avec la puissance de WordPress.com.
Qu'est ce que c’est ? ! ! Jetpack vous permettra
d’autoriser des applications à se connecter à votre blog pour utiliser votre contenu et vous offrir de nouvelles fonctionnalités.
Qui utilise l’API?
Comment utiliser l’API? https://developer.wordpress.com/docs/api/
Prérequis Installer
Connecter Jetpack J’authorise mon utilisateur WP.com à utiliser mon site
T’es sur? Oui, of course avec ce token on peut ce communiquer
None
PHP ! <?php! ! $response = file_get_contents(! ! ‘https://public- api.wordpress.com/rest/v1/sites/
miguellezama.com/posts/678'! );! ! $post = json_decode( $response );! ! echo "\n" . $post->title . "\n";! !
Javascript jQuery.get( ! ! “https://public- api.wordpress.com/rest/v1/ sites/miguellezama.com/posts/ 678", ! !
! function( response ) { ! ! ! console.log( response );! ! }! );!
None
None
None
None
None
None
Comment accéder aux endpoints oauth2o? Les endpoints on besoin d’autorisation.
Échanges OAuth2 Application je veux faire une App
None
None
None
Application Je vais utiliser ton application Joey! Échanges OAuth2
OAUTH2 https://public-api.wordpress.com/oauth2/authorize ! https://public-api.wordpress.com/oauth2/token
Je veut utiliser ton app Je veux donner accès a
Joey Merci, demande a WP.com Application Échanges OAuth2
https://public-api.wordpress.com/oauth2/authorize? client_id=client_id&redirect_uri=redirect_uri&response_type=code
T’es sur? Quel type d’accès tu veux donner? Je veut
utiliser ton app Merci, demande a WP.com Je veux donner accès a Joey Application Échanges OAuth2
None
Application Oui, s'il te plaît donne accès à miguellezama.com Miguel
veut te donner accès a son blog, Peux-tu confirmer que c’est bien toi? Échanges OAuth2
http://joeyapp.com/app/? code=cm8hl1xG5k
Application Bien sur c’est moi! Miguel veut te donner accès
a son blog, Peux-tu confirmer que c’est bien toi? Échanges OAuth2
$curl = curl_init( "https://public- api.wordpress.com/oauth2/token" );! curl_setopt( $curl, CURLOPT_POST, true
);! curl_setopt( $curl, CURLOPT_POSTFIELDSS, array(! 'client_id' => $client_id,! 'redirect_uri' => $redirect_uri,! 'client_secret' => sanitize_key( $_GET['code'] ), ! // the code we got from the authorization screen! 'grant_type' => 'authorization_code',! ) );! curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );! $auth = curl_exec( $curl );! Joey doit renvoyer ca pour avoir accès
D’accord… Application Échanges OAuth2 Bien sur c’est moi! Miguel veut
te donner accès a son blog, Peux-tu confirmer que c’est bien toi?
$secret = json_decode( $auth );! print_r( $secret );! {! 'access_token'
: **YOUR_API_TOKEN**! 'blog_id' : 1234! 'blog_url' : 'http://miguellezama.com'! 'token_type' : 'bearer',! }! Enfin Joey est autorisé!
Application En fin en est autorisé! je veux voir mon
post Joey je veux voir le post de Miguel Je suis autorise hmmm…ok donnez moi le post le post le post le post
$options = array(! 'http' =>! array(! 'ignore_errors' => true,! 'header'
=> array(! 'authorization: Bearer ' . **$access_token**,! ),! ! ! ! ' data' => array( content: 'Bonjour Montreal' }! ), );! $context = stream_context_create( $options );! $response = file_get_contents( ! ! 'https://public-api.wordpress.com/rest/v1/sites/ miguellezama.com/posts/new',! ! false, ! ! $context ! );! $reponse = json_decode( $response ); PHP
jQuery.ajax( {! url: 'https://public-api.wordpress.com/rest/v1/sites/ miguellezama.com/posts/new',! type: 'POST',! data: { content:
'Bonjour Montreal' },! beforeSend : function( xhr ) {! xhr.setRequestHeader( 'Authorization', 'BEARER ' + access_token );! },! success: function( response ) {! // response! }! } ); JS
http://developer.wordpress.com/docs/oauth2/
HTTPS tout!
WPCOM.JS Official JavaScript library for the WordPress.com REST API https://www.npmjs.org/package/wpcom
https://github.com/Automattic/wpcom.js https://wpcomjs.com
var WPCOM = require( 'wpcom' );! ! var wpcom =
WPCOM( '<mi-token>' );! ! wpcom! ! .site( 'miguellezama.com' )! ! .postsList( function ( err, data ) ! {! ! ! if ( err ) throw err;! ! ! console.log( data );! });! ! WPCOM.JS https://www.npmjs.org/package/wpcom
None
<script src='wpcom.js'></script>! ! <script>! var wpcom = WPCOM( '<your-token>' );!
var blog = wpcom.site( 'miguellezama.com' );! blog.posts( { number: 8 }, function( err, list ){} );! </script> WPCOM.JS Directement dans le browser
node-wpcom-oauth https://github.com/Automattic/node-wpcom-oauth WPOAuth#requestAccessToken(fn) WPOAuth#urlToConnect(resource) WPOAuth#setCode(code)
A venir Des nouveaux Endpoints! Manage Blog Settings Activate/Deactivate/Update Plugins
Activate/Deactivate Jetpack Modules
Resources • slides.miguellezama.com • developer.wordpress.com • oauth.net • github.com/Automattic/wpcom-connect-examples •
github.com/Automattic/wpcom.js • github.com/Automattic/node-wpcom-oauth • github.com/WP-API/WP-API/
?