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

Designing JavaScript APIs

Designing JavaScript APIs

Pragmatic RESTful API principles, along with a solid consumption architecture, can allow for a great amount of automation in your program development. At the same time, securing the application can be extremely tricky from JavaScript.

In this session we will explore several principles behind RESTful API design and consumption using JavaScript, many of the standards that were integrated in the redevelopment of the PayPal API architecture in the new RESTful APIs.

We will cover many of these architecture standards, including:
- Building in action automation using HATEOAS
- OAuth 2 in the JavaScript model
- The challenges behind secure resource consumption through JavaScript


Jonathan LeBlanc

October 24, 2013

More Decks by Jonathan LeBlanc

Other Decks in Technology


  1. Designing JavaScript APIs Jonathan LeBlanc (@jcleblanc) Head of Developer Evangelism

    PayPal North America
  2. Automation?

  3. What JavaScript Can Feel Like

  4. JavaScript Challenges

  5. The Same-Origin Policy

  6. Keeping Private Keys Private

  7. Not Providing a Hacked Experience

  8. How Did We Used to Do It?

  9. Server-side Proxies

  10. Flash / iFrame Proxies

  11. Private Token Storage

  12. Securing Content Negotiation

  13. A Modern Approach CORS Easy Access Control OAuth 2 Tight

    Access Control
  14. OAuth 2 User Agent Flow

  15. User Agent Flow: Redirect Prepare the Redirect URI Authorization Endpoint

    client_id response_type (token) scope redirect_uri Browser Redirect Redirect URI
  16. User Agent Flow: Redirect Building the redirect link var auth_uri

    = auth_endpoint + "?response_type=token" + "&client_id=" + client_id + "&scope=profile" + "&redirect_uri=" + window.location; $("#auth_btn").attr("href", auth_uri);
  17. User Agent Flow: Hash Mod Fetch the Hash Mod access_token

    refresh_token expires_in Extract Access Token
  18. User Agent Flow: Hash Mod http://site.com/callback#access_token=rBEGu1FQr5 4AzqE3Q&refresh_token=rEBt51FZr54HayqE3V4a& expires_in=3600 var hash

    = document.location.hash; var match = hash.match(/access_token=(\w+)/); Extracting the access token from the hash
  19. User Agent Flow: Get Resources Set Request Headers + URI

    Resource Endpoint Header: token type + access token Header: accept data type HTTPS Request
  20. User Agent Flow: Get Resources $.ajax({ url: resource_uri, beforeSend: function

    (xhr) { xhr.setRequestHeader('Authorization', 'OAuth ' + token); xhr.setRequestHeader('Accept', 'application/json'); }, success: function (response) { //use response object } }); Making an authorized request
  21. CORS Easy Access Control

  22. Cross Origin Issues and Options Access to other domains /

    subdomains is restricted (same origin policy) JSONP to request resources across domains Only supports HTTP GET requests Cross-origin resource sharing (CORS) Supports additional range of HTTP requests
  23. Can you use it? http://caniuse.com/cors  

  24. How Does it Work? OPTIONS /v1/oauth2/token HTTP/1.1 Origin: http://jcleblanc.com Access-Control-Request-Method:

    PUT Host: api.sandbox.paypal.com Accept-Language: en-US Connection: keep-alive ... Site sends Origin header to server  
  25. How Does it Work? Server responds with matching Access-Control-Allow-Origin header

      Access-Control-Allow-Origin: http://jcleblanc.com Access-Control-Allow-Methods: GET, POST, PUT Content-Type: text/html; charset=utf-8
  26. A Lil’ Bit O’ Automation

  27. Uniform Interface Sub-Constraints Resource Identification Resources must be manipulated via

    representations Self descriptive messages Hypermedia as the engine of application state
  28. Uniform Interface Sub-Constraints Resource Identification Resources must be manipulated via

    representations Self descriptive messages Hypermedia as the engine of application state

  30. How we Normally Consume APIs

  31. Using HATEOAS to Automate

  32. How HATEOAS Works curl -v -X GET https://api.sandbox.paypal.com/v1/ payments/authorization/2DC87612EK520411B \

    -H "Content-Type:application/json" \ -H "Authorization:Bearer ENxom5Fof1KqAffEsXtx1HTEK__KVdIsaCYF8C" You make an API request  
  33. "links": [ { "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M", "rel":"self", "method":"GET" },{ "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M/capture",

    "rel":"capture", "method":"POST" },{ "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M/void", "rel":"void", "method":"POST" } ]
  34. Object Chaining

  35. Interactions Should be Stateless Send enough detail to not have

    to make another request to the API   { "id": "PAY-17S8410768582940NKEE66EQ", "create_time": "2013-01-31T04:12:02Z", "update_time": "2013-01-31T04:12:04Z", "state": "approved", "intent": "sale", "payer": {...}, "transactions": [{...}], "links": [{...}] }
  36. Resources and Representations Manipulate a concept (e.g. payment) with the

    intended state  
  37. Chaining Actions var paymentObj = getPreAuth(paymentID) //build pay object .getNextAction()

    //next HATEOAS link .processNext(); //process action The first request builds the action object Subsequent calls manipulate the object  
  38. Security needs to allow you to work the browser security

    model Always assume statelessness Build to allow your developers to automate complexities In Summation…
  39. Thanks! Questions? http://speakerdeck.com/jcleblanc Jonathan LeBlanc (@jcleblanc) Head of Developer Evangelism

    PayPal North America