Skip to content

Commit

Permalink
More tidy
Browse files Browse the repository at this point in the history
  • Loading branch information
zimeon committed Aug 12, 2016
1 parent d889088 commit 2e76ef4
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 157 deletions.
50 changes: 41 additions & 9 deletions demo-auth/iiif-auth-092.1.js → demo-auth/iiif-auth-092.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/* IIIF Demo Authentication Library
* For v0.9.2: http://auth_notes.iiif.io/api/auth/0.9/
*
* Requires OpenSeadragon 121 or higher.
* Requires OpenSeadragon 121, 200 or higher.
* Requires jQuery 1.11 or higher.
*
* Based on IIIF Auth 0.9 implementation by Robert Sanderson
* Simeon Warner - 2016-08-10...
* Based on IIIF Auth v0.9 implementation by Robert Sanderson @azaroth42.
* Simeon Warner @zimeon - 2016-08-10...
*/

/*jslint white: true*/
Expand All @@ -18,9 +18,18 @@
var iiif_auth = (function () {
"use strict";

var osd_prefix_url = "openseadragon121/images/",
var osd_prefix_url = "openseadragon200/images/",
osd_div = '<div id="openseadragon" style="width: 600px; height: 400px; border: 2px solid purple" ></div>',
osd_id = "#openseadragon",
demo_html =
'<div id="container" style="width: 605px; height: 405px;"></div>' +
'<div id="authbox" style="margin-top: 10px; height: 3ex; border: 2px solid red; width: 605px;"></div>' +
'<div id="log" style="margin-top: 10px; height: 20ex; border: 2px solid green; width: 605px; overflow: auto;"></div>' +
'<iframe id="messageFrame" style="margin-top: 10px; height: 3ex; border: 2px solid blue; width: 605px;"></iframe>',
container_id = "#container",
authbox_id="#authbox",
log_id = "#log",
message_frame_id = "#messageFrame",
token_service_uri = "",
image_uri = "",
viewer, // our instance of OpenSeadragon
Expand Down Expand Up @@ -168,9 +177,9 @@ function make_authorized_viewer_got_info(info) {
* @param {string} token - the access token
*/
function make_authorized_viewer(token) {
$('#openseadragon').remove();
$('#authbox').empty();
$('#container').append(osd_div);
$(osd_id).remove();
$(authbox_id).empty();
$(container_id).append(osd_div);
$.ajax({ url: image_uri+"/info.json",
headers: {"Authorization": token},
cache: false,
Expand Down Expand Up @@ -209,13 +218,17 @@ function receive_message(event) {
*
* FIXME - Should spec say something specific about the need to create an iFrame
* in any particular way?
*
* FIXME - Should add some useful timeout here that gets canceled if
* a message is recieved. Otherwise we just get a hang if no postMessage
* comes back.
*/
function request_access_token() {
// register an event listener to receive a cross domain message:
window.addEventListener("message", receive_message);
// now attempt to get token by accessing token service from iFrame
log("Requesting access token via iFrame");
document.getElementById('messageFrame').src = token_service_uri + '?messageId=1234';
document.getElementById(message_frame_id).src = token_service_uri + '?messageId=1234';
}

/**
Expand Down Expand Up @@ -289,10 +302,29 @@ make_viewer = function (image_uri_in) {
viewer.addHandler('failed-open', handle_open);
};

/**
* Build body of demo page with OpenSeadragon, log, etc.
*
* Add all elements of demo page to the <div> with id="demo",
* and then call make_viewer(image_uri_in).
*
* @param {string} image_uri_in - IIIF Image URI (no /info.json or /params/)
* @param {string} demo_id - optional override for default <div> id
*/
function make_demo_page(image_uri_in, demo_id) {
demo_id = demo_id !== undefined ? demo_id : '#demo';
$(demo_id).empty();
$(demo_id).append(demo_html);
$(demo_id).append('<p>Relies upon image at <code><a href="' +
image_uri_in + '">' + image_uri_in + '</a></code>.</p>');
make_viewer(image_uri_in);
}

return {
// Public functions
log: log,
make_viewer: make_viewer
make_viewer: make_viewer,
make_demo_page: make_demo_page
};

}());
11 changes: 9 additions & 2 deletions demo-auth/local_8001_pil_gauth.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,15 @@
<h1>IIIF Image Auth Demo - Plain HTML</h1>

<pre>
&lt;img src="http://localhost:8001/2.0_pil_gauth/214-2/0,17,100,66/pct:200/45/default.jpg"/&gt;
&lt;img src="http://localhost:8001/2.1_pil_gauth/214-2/0,17,100,66/pct:200/45/default.jpg"/&gt;
</pre>
<img src="http://localhost:8001/2.0_pil_gauth/214-2/0,17,100,66/pct:200/45/default.jpg"/><br/>
<img src="http://localhost:8001/2.1_pil_gauth/214-2/0,17,100,66/pct:200/45/default.jpg"/><br/>
<!--a href="http://localhost:8001/2.0_pil_gauth/login" target="_blank">Login</a><br/>
<a href="http://localhost:8001/2.0_pil_gauth/logout" target="_blank">Logout</a-->
<ul>
<li><a href="http://localhost:8001/2.1_pil_gauth/login">Login</a></li>
<li><a href="http://localhost:8001/2.1_pil_gauth/token">Token</a></li>
<li><a href="http://localhost:8001/2.1_pil_gauth/logout">Logout</a></li>
</ul>
</body>
</html>
4 changes: 2 additions & 2 deletions demo-auth/no_auth.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html>
<head>
<title>IIIF demo no auth</title>
<script src="openseadragon121/openseadragon.min.js"></script>
<script src="openseadragon200/openseadragon.min.js"></script>
</head>
<body>

Expand All @@ -14,7 +14,7 @@ <h1>IIIF Demo no auth</h1>
OpenSeadragon({
id: "openseadragon1",
minZoomImageRatio: 1,
prefixUrl: "openseadragon121/images/",
prefixUrl: "openseadragon200/images/",
tileSources: "http://localhost:8001/1.1_pil/tetons/info.json",
crossOriginPolicy: false});
}
Expand Down
143 changes: 12 additions & 131 deletions demo-auth/pref_pil_basic.html
Original file line number Diff line number Diff line change
@@ -1,138 +1,19 @@
<script src="openseadragon121/openseadragon.min.js"></script>
<html>
<head>
<title>IIIF Auth Test</title>
<script src="openseadragon200/openseadragon.min.js"></script>
<script src="jquery-1.11.1.min.js"></script>
<script src="iiif-auth-092.1.js"></script>

<h2>IIIF OpenSeadragon Authentication Test</h2>

<div id="container" style="width: 605px; height: 405px;"></div>
<div id="authbox" style="margin-top: 10px; height: 3ex; border: 2px solid green; width: 605px;"></div>
<div id="log" style="margin-top: 10px; height: 20ex; border: 2px solid green; width: 605px; overflow: auto;"></div>
<script src="iiif-auth-092.js"></script>
<head>
<body>
<h2>IIIF OpenSeadragon Basic Authentication Test</h2>

<div id="demo">Loading demo...</div>
<script type="text/javascript">
var base_uri="http://localhost:8001/2.1_pil_basic";
var linenum=0;
function log(text) {
linenum=linenum+1
$('#log').prepend("[" + linenum + "] " + text + "<br>");
}

// check for an auth service ... once tileSource has loaded
function on_authed() {
// first try to get an authorization token from the token service ...
// via JSONP :(
// XXX TODO: get the URL from the info.json
log("Fetching Token");
$.getJSON(base_uri+"/token?callback=?", on_tokened);
}


function on_tokened(data) {

var token, error;
if (data.hasOwnProperty('access_token')) {
token = data.access_token;
error = false;
log("Got token: " + token);
} else {
// error condition
token = '';
error = true;
log("Got error: " + data.error)
}

if (error) {
// Error make unauthed viewer
make_viewer();
} else {
// Okay, make authed viewer
$('#openseadragon').remove();
$('#authbox').empty();
$('#container').append('<div id="openseadragon" style="width: 600px; height: 400px; border: 2px solid purple" ></div>');
$.ajax({ url:base_uri+"/starfish/info.json", headers: {"Authorization":token}, cache: false, success: on_got_info });
}
}

function on_got_info(data) {

log("Got full info.json")

process_auth_services(data, 'logout');

viewer = OpenSeadragon({
id: "openseadragon",
tileSources: data,
showNavigator: true,
prefixUrl: "openseadragon121/images/"
});
}

function do_auth(evt) {
login = $(this).attr('data-login');

// The redirected to window will self-close
// open/closed state is the only thing we can see across domains :(
log("Opening Auth service");
var win = window.open(login, 'loginwindow');
var pollTimer = window.setInterval(function() {
if (win.closed) {
window.clearInterval(pollTimer);
on_authed();
}
}, 500);
}

function process_auth_services(info, which) {
log("Looking for "+which+" service")
if (info.hasOwnProperty('service')) {
if (info.service.hasOwnProperty('@id')) {
services = [info.service]
} else {
// array of service
services = info.service
}
for (var service,i=0;service=services[i];i++) {
if (service['profile'] == 'http://iiif.io/api/auth/0/'+which) {
log("Found "+which+" auth service");
login = service['@id'];
$('#authbox').append("<button id='authbutton' data-login='"+login+"'>"+service.label+"</button>");
$('#authbutton').bind('click', do_auth);
} else if (which == 'login' && service['profile'] == 'http://iiif.io/api/auth/0/token') {
// save token service here...
}
}
}
}


function handle_open(event) {
var info = event.eventSource.source;
// This only gets called when we're NOT authed, so no need to put in logout
process_auth_services(info, 'login');
}

function make_viewer() {

log("Making unauthed viewer");

$('#openseadragon').remove();
$('#authbox').empty();
$('#container').append('<div id="openseadragon" style="width: 600px; height: 400px; border: 2px solid purple" ></div>');
var where = $("#openseadragon");

var viewer = OpenSeadragon({
id: "openseadragon",
tileSources: base_uri+"/starfish/info.json?t=" + new Date().getTime(),
showNavigator: true,
prefixUrl: "openseadragon121/images/"
});

viewer.addHandler('open', handle_open)
viewer.addHandler('failed-open', handle_open)
}

// Start with an unauthed viewer
make_viewer()
// Start with a viewer which will be unauthenticated initially
iiif_auth.make_demo_page("http://localhost:8001/2.1_pil_basic/tetons");
</script>

</body>
</html>

20 changes: 7 additions & 13 deletions demo-auth/pref_pil_gauth.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
<html>
<head>
<title>IIIF Auth Tests</title>
<script src="openseadragon121/openseadragon.min.js"></script>
<title>IIIF Auth Test</title>
<script src="openseadragon200/openseadragon.min.js"></script>
<script src="jquery-1.11.1.min.js"></script>
<script src="iiif-auth-092.1.js"></script>
<script src="iiif-auth-092.js"></script>
<head>
<body>
<h2>IIIF OpenSeadragon Authentication Test</h2>

<div id="container" style="width: 605px; height: 405px;"></div>
<div id="authbox" style="margin-top: 10px; height: 3ex; border: 2px solid red; width: 605px;"></div>
<div id="log" style="margin-top: 10px; height: 20ex; border: 2px solid green; width: 605px; overflow: auto;"></div>
<iframe id="messageFrame" style="margin-top: 10px; height: 3ex; border: 2px solid blue; width: 605px;"></iframe>
<h2>IIIF OpenSeadragon Google Authentication Test</h2>

<div id="demo">Loading demo...</div>
<script type="text/javascript">
// Start with a viewer which be unauthed initially
iiif_auth.make_viewer("http://localhost:8001/2.1_pil_gauth/tetons");
// Start with a viewer which will be unauthenticated initially
iiif_auth.make_demo_page("http://localhost:8001/2.1_pil_gauth/tetons");
</script>

<p>Relies upon image server with Google auth at <code><a href="http://localhost:8001/2.1_pil_gauth/tetons">http://localhost:8001/2.1_pil_gauth/tetons</a></code>.</p>

</body>
</html>

0 comments on commit 2e76ef4

Please sign in to comment.