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
250
WP JSON REST API
WordCamp Montreal presentation
Miguel Lezama
August 16, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
オープンソースソフトウェアへの解像度🔬
utam0k
13
2.6k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
810
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
120
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
100
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
CSC305 Lecture 03
javiergs
PRO
0
240
XP, Testing and ninja testing ZOZ5
m_seki
3
620
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The Cost Of JavaScript in 2023
addyosmani
54
9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Music & Morning Musume
bryan
46
6.8k
Faster Mobile Websites
deanohume
310
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Leading Effective Engineering Teams in the AI Era
addyosmani
1
26
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/
?