Araport Workshop Tutorial 2: Authentication and the Agave Profiles Service.
A tutorial for building a science application using the Araport.org platform, specifically the Agave API's Profiles RESTful endpoints from the araport app generator platform.
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Araport Workshop Tutorial 2: Authentication and the Agave Profiles Service
1. Araport Workshop Tutorial 2:
Authentication and the Profiles
araport.org
Service
Stephen Mock
Director, Advanced Computing Interfaces
Texas Advanced Computing Center
2. araport.org
this
• http://www.slideshare.net/stevemock/arap
ort-workshop-tutorial-2
3. araport.org
Overview
• Traditional Web Authentication
• OAuth v2
• Araport Client Registration
• Javascript Developer Console
• Building the “whoami” app
4. 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
5. araport.org
Araport Architecture
CLI clients,
Scripts, 3rd party
applications
Agave Enterprise Service Bus
Agave Services
systems apps
jobs
Physical
resources
profile
meta
files
HPC | Files | DB
ADAMA
enroll
manage
a b c d e f
AIP & 3rd party data
providers
• Single-sign on
• Throttling
• Unified logging
• API versioning
• Automatic
HTTPS
API Mediators
• Simple proxy
• Mediator
• Aggregator
• Filter
REST-like
REST*
SOAP
POX
Cambrian CGI
6. 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
7. araport.org
Traditional Cookie Auth
CS
S
DB
Login Form
HTML
CGI
Store
Cookie
Server
Browser
HTTP
Username
Password Cookie
All Further
Requests
Cookie
8. 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
Skype
Code.org
9. 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
10. araport.org
Simplified OAuth 2.0 Flow
Araport.org,
CLI clients,
Scripts,
3rd party applications
Agave Web Services
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
3) Get Profile
info:
• Send client
credentials
• Send access
token
• Receive profile
info
Token Service Profiles Service
11. 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!
12. 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
14. Browser Javascript Developer
araport.org
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
15. 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?
16. 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
17. Agave.api Calls in Javascript
araport.org
• 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
}
);
18. Agave.profiles.me Call in Javascript
araport.org
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
);
19. 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
21. 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!
22. 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’
23. araport.org
In Javascript:
Check status, Print username
var 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);
}
};
24. 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
26. 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);
27. 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
28. 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
29. Chris Nelson
Project
Manager
araport.org
Chris Town, PI
Lisa McDonald
Education and
Outreach
Coordinator
Jason Miller, Co-PI
JCVI Technical Lead
Vivek Krishnakumar
Bioinf. Engineer
Erik Ferlanti
Software Engineer
Svetlana Karamycheva
Bioinf Engineer
Gos Micklem, co-PI Sergio Contrino
Eva Huala
Project lead, TAIR
Software Engineer
Bob Muller
Technical lead, TAIR
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
3 arguments to most of the API calls:
Input object
Success callback function
Failure callback function
first thing you'll do is blow away the API docs anyway from your generated app.
Probably not necessary to check the error codes because the Agave api takes care of that.
But it’s not a bad idea to check the http codes as well eventually for completeness.
We’re glossing over that a little bit here to make the code more readable.
An expanded “successFunction” showing:
-checking the response.obj.status for success
-printing out the username via response.obj.result.username
