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
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
Extracting the access token from the hash
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+)/);
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
Making an authorized request
$.ajax({
url: resource_uri,
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'OAuth ' + token);
xhr.setRequestHeader('Accept', 'application/json');
},
success: function (response) {
//use response object
}
});
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
24. How Does it Work?
Site sends Origin header to server
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
...
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
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
32. How HATEOAS Works
You make an API request
curl -v -X GET
https://api.sandbox.paypal.com/v1/payments/authoriz
ation/2DC87612EK520411B
-H "Content-Type:application/json"
-H "Authorization:Bearer
ENxom5Fof1KqAffEsXtx1HTEK__KVdIsaCYF8C"
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": [{...}] }
37. Chaining Actions
The first request builds the action object
Subsequent calls manipulate the object
var paymentObj =
getPreAuth(paymentID)
.getNextAction()
.processNext();
//build pay object
//next HATEOAS link
//process action
38. In Summation…
Security needs to allow you to work the
browser security model
Always assume statelessness
Build to allow your developers to automate
complexities
JSONP can cause XSS issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security
Behind the server scene, the server looks up the application in their records to verify that the application matches what is on file against the application location making the request
Hypermedia as the engine of application state
Resources must be manipulated via representations. This goes back to the stateless principles
REST principle of using objects applied to chaining multiple objects together