Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WP JSON REST API

WP JSON REST API

WordCamp Montreal presentation

Miguel Lezama

August 16, 2014
Tweet

Other Decks in Programming

Transcript

  1. 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.
  2. Qu'est ce qu’on peut faire avec les APIs WordPress? Realiser

    des operations CRUD sur un site WordPress
  3. 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
  4. 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).
  5. {! ! "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"! }!
  6. 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.
  7. 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.
  8. Connecter Jetpack J’authorise mon utilisateur WP.com à utiliser mon site

    T’es sur? Oui, of course avec ce token on peut ce communiquer
  9. 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";! !
  10. Je veut utiliser ton app Je veux donner accès a

    Joey Merci, demande a WP.com Application Échanges OAuth2
  11. 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
  12. 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
  13. 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
  14. $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
  15. 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?
  16. $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é!
  17. 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
  18. $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
  19. 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
  20. 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
  21. <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
  22. 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/
  23. ?