WP JSON REST API

WordCamp Montreal presentation

1. JSON REST API
2. @pelequie lezama migueluy Jetpack Team Miguel Lezama Code Wrangler Montevideo, Uruguay
3. 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.
4. Examples de APIs https://developers.google.com https://developers.facebook.com/ https://dev.twitter.com/ https://developer.github.com/v3/
5. WordPress APIs
6. Qu'est ce qu’on peut faire avec les APIs WordPress? Realiser des operations CRUD sur un site WordPress
7. 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
8. WordPress.com JSON REST API +
9. JSON? REST?
10. Qu'est ce que c'est JSON? JavaScript Object Notation
11. 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).
12. {! ! "ID":678,! ! "site_ID":1,! ! "author":{! ! ! "ID":1,! ! ! "email":miguel@automattic.com,! ! ! "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"! }!
13. Qu'est ce que c'est REST? REpresentational State Transfer
14. 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.
15. Qu'est ce que c’est ? Plugin Suralimentez votre site auto-hébergé avec la puissance de WordPress.com.
16. 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.
17. Qui utilise l’API?
18. Comment utiliser l’API? https://developer.wordpress.com/docs/api/
19. Prérequis Installer
20. Connecter Jetpack J’authorise mon utilisateur WP.com à utiliser mon site T’es sur? Oui, of course avec ce token on peut ce communiquer
22. 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";! !
23. Javascript jQuery.get( ! ! “https://public- api.wordpress.com/rest/v1/ sites/miguellezama.com/posts/ 678", ! ! ! function( response ) { ! ! ! console.log( response );! ! }! );!
30. Comment accéder aux endpoints oauth2o? Les endpoints on besoin d’autorisation.
31. Échanges OAuth2 Application je veux faire une App
35. Application Je vais utiliser ton application Joey! Échanges OAuth2
36. OAUTH2 https://public-api.wordpress.com/oauth2/authorize ! https://public-api.wordpress.com/oauth2/token
37. Je veut utiliser ton app Je veux donner accès a Joey Merci, demande a WP.com Application Échanges OAuth2
38. https://public-api.wordpress.com/oauth2/authorize? client_id=client_id&redirect_uri=redirect_uri&response_type=code
39. 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
41. 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
42. http://joeyapp.com/app/? code=cm8hl1xG5k
43. 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
44. $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
45. 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?
46. $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é!
47. 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
48. $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
49. 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
50. http://developer.wordpress.com/docs/oauth2/
51. HTTPS tout!
52. 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
53. 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
55. <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
56. node-wpcom-oauth https://github.com/Automattic/node-wpcom-oauth WPOAuth#requestAccessToken(fn) WPOAuth#urlToConnect(resource) WPOAuth#setCode(code)
57. A venir Des nouveaux Endpoints! Manage Blog Settings Activate/Deactivate/Update Plugins Activate/Deactivate Jetpack Modules
58. 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/
59. ?