With JavaScript

RESTful API Automation

Jonathan LeBlancHead of Developer Evangelism (North

America)Github: http://github.com/jcleblanc

Slides: http://slideshare.net/jcleblancTwitter: @jcleblanc

What We’re Covering

REST Concepts

Automation through hypermedia constraints

OAuth 2 in JavaScript

What We Want

JavaScript Challenges

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

Keeping Things Hidden

Token based auth mechanismOAuth: Client Secret

Basic Auth: Password

API request action to reaction mapping

A schematic for how data forces site changes

Action Automation

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

Uniform Interface Sub-Constraints

Resource Identification

Resources must be manipulated via representations

Self descriptive messages

Hypermedia as the engine of application state

How we Normally Consume APIs

Using HATEOAS to Automate

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

OAuth 2 & JavaScript?

A Little Use Background

User login

Application only

User Involvement

User Agent Flow: Redirect

Prepare the Redirect URIAuthorization Endpointclient_id response_type (token)scope redirect_uri

Browser RedirectRedirect URI

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);

User Agent Flow: Hash Mod

Fetch the Hash Modaccess_tokenrefresh_tokenexpires_in

Extract Access Token

User Agent Flow: Hash Mod

http://site.com/callback#access_token=rBEGu1FQr54AzqE3Q&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

User Agent Flow: Get Resources

Set Request Headers + URIResource EndpointHeader: token type + access tokenHeader: accept data type

HTTPS Request

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

Good JavaScript API Interaction

Using Proper REST standards

Automation through hypermedia constraints

Using OAuth 2 appropriately

http://bit.ly/rest_automation_js

Thank You! Questions?

Jonathan LeBlancHead of Developer Evangelism (North

America)Github: http://github.com/jcleblanc

Slides: http://slideshare.net/jcleblancTwitter: @jcleblanc