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
220
WP JSON REST API
WordCamp Montreal presentation
Miguel Lezama
August 16, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
4
620
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
10
1.4k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
240
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
functionalなアプローチで動的要素を排除する
ryopeko
1
950
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.7k
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
220
最近のVS Codeで気になるニュース 2025/01
74th
1
240
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
360
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Producing Creativity
orderedlist
PRO
343
39k
Faster Mobile Websites
deanohume
305
30k
Documentation Writing (for coders)
carmenintech
67
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Site-Speed That Sticks
csswizardry
3
310
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
A Tale of Four Properties
chriscoyier
157
23k
Music & Morning Musume
bryan
46
6.3k
Writing Fast Ruby
sferik
628
61k
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/
?