araport.org

Araport Workshop Tutorial 2:

Authentication and the Profiles

Service

Stephen Mock

Director, Advanced Computing Interfaces

Texas Advanced Computing Center

araport.org

this

• http://www.slideshare.net/stevemock/arap

ort-workshop-tutorial-2

araport.org

Overview

• Traditional Web Authentication

• OAuth v2

• Araport Client Registration

• Javascript Developer Console

• Building the “whoami” app

araport.org

Goal

• Build a client application to Araport’s web

service platform, Agave

• Have a working, authenticated web

application running on your computer

• Query the Agave “profiles” service for

information about your account and

display on the page and to the console

araport.org

Araport Architecture

Agave Enterprise Service Bus

CLI clients,

Scripts, 3rd party

applications

Physical

resources

HPC | Files | DB

Agave Services

apps

meta

files

profile

jobssystems

ADAMAmanage

enroll

a b c d e f

AIP & 3rd party data

providers

API Mediators

• Simple proxy

• Mediator

• Aggregator

• Filter

• Single-sign on

• Throttling

• Unified logging

• API versioning

• Automatic

HTTPS

REST*

REST-like

SOAPPOX

Cambrian CGI

araport.org

Traditional Web Authentication

• Browser sends username/password to

server

• Server verifies username/password and

sends cookie back to browser

• Browser sends cookie along with every

request

• Server decodes the cookie to determine

authentication status

araport.org

Traditional Cookie Auth

CS

S

DB

Login Form

CGI

Store

Cookie

HTML

Server

Browser

HTTPUsername

Password Cookie

All Further

Requests

Cookie

araport.org

OAuth 2.0

• Sounds scary, but you use it all the time

• “Sign in/Register using your

Twitter/Google/Facebook/Github/Microsoft

account”

• Trusted 3rd party for identity information,

authorization, and authentication

SkypeCode.org

araport.org

What is a Client

• What is an OAuth Client?

– Any software that consumes the Agave web services

• Command line

• Curl

• Scripts

• Web applications

• Desktop Applications

• Javascript

• Araport.org

araport.org

Simplified OAuth 2.0 Flow

Agave Web Services

Araport.org,

CLI clients,

Scripts,

3rd party applications

Clients

Registration

Service

1) Register Client:

• Send client “name”

• Send

username/password

• Receive Client

Credentials

2) Authenticate:

• “Login”

• Send client credentials

and username

password

• Receive access token

Token Service Profiles Service

3) Get Profile

info:

• Send client

credentials

• Send access

token

• Receive profile

info

araport.org

Araport Clients

• We’re building clients to the Agave API

• Authentication is to the Agave API not to

the Araport.org website

• Client Registration

– All clients to the Agave API must register

– For the development of your application

– Araport.org is a client to the API as well!

araport.org

Open Your App

• First, check in tutorial 1 code (if you

haven’t already)

– git add .

– git commit –a

• Check out code for tutorial 2

– git checkout tutorial/2

• grunt

• Opens browser to localhost:9000

araport.org

Client Registration

araport.org

Browser Javascript Developer

Console• In Chrome

– Command – Option – J (Mac)

– Control – Shift – J (Linux / Windows)

– Or View -> Developer -> Javascript Console

– You should see: “Hello, workshop tutorial!“

• “console.log(object)” from Javascript prints information to the console– console.log(‘string’,object) if you want to output a

string and an object like console.log(‘Success!’, successObject)

• More info: https://developer.mozilla.org/en-US/docs/Web/API/Console.log

araport.org

Developer Console

• Agave documentation built into the

browser! (Chrome, Safari, Firefox)

• Type into console:

– Agave.api.help();

• Notice all of the different endpoints

– Agave.api.biscuit();

– Agave.api.profiles.help();

• Which do you think returns your profile?

araport.org

Whoami App

• Let’s build a “Hello world” type app!

• Modify app/scripts/app.js and

app/app.html to call Agave API to get your

profile information and print it:

1. To the Javascript console

2. On the page

araport.org

Agave.api Calls in Javascript

• Agave.api.*Agave.api.endpoint(

{ inputObject }, //input to the call, or null

successCallbackFunction(response){

//runs if the Agave call is successful

//still could make the call to Agave,

//but return an error or other failure!

},

failureCallbackFunction(err) {

//runs if the Agave call fails to return

}

);

araport.org

Agave.profiles.me Call in Javascript

var successFunction = function(response) {

//do success stuff!

console.log(‘Success! ‘, response);

};

var failFunction = function(err) {

//do failure stuff!

console.log(‘Failure! ‘, err);

};

Agave.api.profiles.me(

null, //no input needed here

successFunction,

failFunction

);

araport.org

STEP 1:

• Delete code tutorial 1 code from app/scripts/app.js– Delete:

• From: “//STEP 1: Beginning of STEP 1 code. Delete from here to "STEP 1: DELETE TO HERE " below//”

• To: “//STEP 1: DELETE TO HERE //”

• Uncomment STEP 1: code in app/scripts/app.js– Delete the 2 lines that say:

• “/**** To uncomment for STEP 1 delete this entire line ********”

• “*** To uncomment for STEP 1 delete this entire line ********/”

• Save the file app/scripts/app.js to reload the app

• See response object printed to console

• Browse the response object in console

araport.org

Console Output

araport.org

Response object

• The object returned to the success callbacks from the Agave.api calls

• You can call it anything you want, resp (for short) or biscuits if you wanted

• Important (to this workshop) properties:– data: raw string data

– obj: { JSON representation of data } //more in next slide

– status: the http code of the call• http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

• 2xx – Success codes! You want these!

• 3xx – Redirect codes, typically ok.

• 4xx – Client errors. Your code probably sent the wrong request/info!

• 5xx – Server errors. The server had an error!

araport.org

results.obj

• If returned data is JSON, it gets stuffed into results.obj

– message: a human readable message

– result: { the information you requested }• From Agave.api.profiles.me()

– create_time: "20140812212443Z”

– email: mock@tacc.utexas.edu

– first_name: ”Stephen”

– full_name: ”Stehen Mock”

– last_name: ”Mock”

– mobile_phone: "”

– phone: "”

– status: "Active”

– username: "mock"

– status: “success or failure”• Check this for ‘success’

araport.org

In Javascript:

Check status, Print usernamevar successFunction = function(response) {

//do success stuff!

console.log(response); //everything!

if(response.obj.status !== 'success') {

console.log('There was a problem: ' +

response.obj.message);

} else {

console.log('Success! Welcome, ',

response.obj.result.username);

}

};

araport.org

STEP 2

• Delete STEP 1 code from

app/scripts/app.js

• Uncomment STEP 2 code from

app/scripts/app.js

• Note:

– Checking the response.obj.status for

‘success’

– Printing the username to the console via response.obj.result.username

araport.org

Console Output

araport.org

Putting It On The Page

• var appContext = $('[data-app-

name="workshop-tutorial"]');

– Use this to find/modify any elements in the page so

that you don’t clobber other apps when it’s

published to Araport.org

– For example:

• $('.profile-name', appContext).text(profile.username);

• var vcard = $('.vcard', appContext);

araport.org

Step 3:

Let’s Put It on the Page

• Delete STEP 1 and 2 code in BOTH– app/app.html

– app/scripts/app.js

• Uncomment STEP 3 code in BOTH– app/app.html

– app/scripts/app.js

• Save both files to reload

• Note:– More profile information pushed to console

– Vcard (profile info) displayed on the page

araport.org

Conclusion

• Learned a bit about OAuth v2

• Got a glimpse into the Agave API

• Built an app in several steps that queries

Agave for profile information and displays

that information in the console and on a

page

araport.org

Chris Town, PI

Lisa McDonald

Education and

Outreach

Coordinator

Chris Nelson

Project

Manager

Jason Miller, Co-PI

JCVI Technical Lead

Erik Ferlanti

Software Engineer

Vivek Krishnakumar

Bioinf. Engineer

Svetlana Karamycheva

Bioinf Engineer

Eva Huala

Project lead, TAIR

Bob Muller

Technical lead, TAIR

Gos Micklem, co-PI Sergio Contrino

Software Engineer

Matt Vaughn

co-PI

Steve Mock

Portal Engineer

Rion Dooley,

API Engineer

Matt Hanlon,

Portal Engineer

Maria Kim

Bioinf Engineer

Ben Rosen

Bioinf

Analyst

Joe Stubbs,

API

Engineer

Walter Moreira,

API Engineer

araport.org

Questions?

mock@tacc.utexas.edu