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

1. With JavaScript
RESTful API Automation
Jonathan LeBlanc
Head of Developer Evangelism (North America)
Github: http://github.com/jcleblanc
Slides: http://slideshare.net/jcleblanc
Twitter: @jcleblanc

2. What We’re Covering
REST Concepts
Automation through hypermedia
constraints
OAuth 2 in JavaScript

3. What We Want

4. JavaScript Challenges

5. Cross Origin Resource Sharing
Access to other domains / subdomains is
restricted (same origin policy)
JSONP to request resources across domains
Cross-origin resource sharing (CORS)
You Send: Origin: http://site.com
They Send: Access-Control-Allow-Origin: http://site.com

6. Keeping Things Hidden
Token based auth mechanism
OAuth: Client Secret
Basic Auth: Password
API request action to reaction mapping
A schematic for how data forces site changes

7. Action Automation

8. RESTful API Core Concepts
Honor HTTP request verbs
Use proper HTTP status codes
No version numbering in URIs
Return format via HTTP Accept header
Double Rainbow: Discovery via HATEOAS

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

10. How we Normally Consume APIs

11. Using HATEOAS to Automate

12. "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"
}
]

13. OAuth 2 & JavaScript?

14. A Little Use Background
User login
Application only
User Involvement

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. Good JavaScript API Interaction
Using Proper REST standards
Automation through hypermedia
constraints
Using OAuth 2 appropriately

22. http://bit.ly/rest_automation_js
Thank You! Questions?
Jonathan LeBlanc
Head of Developer Evangelism (North America)
Github: http://github.com/jcleblanc
Slides: http://slideshare.net/jcleblanc
Twitter: @jcleblanc