forked from jbottigliero/globus-sdk-javascript-ex-01
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
163 lines (155 loc) · 6.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@globus/sdk Demo</title>
<script src="https://unpkg.com/@globus/sdk/dist/umd/globus.production.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
</head>
<body>
<h1>@globus/sdk</h1>
<p>This page demonstrates how to incorporate a <a href="https://g-062a3c.0ed28.75bc.data.globus.org/allusers/data.json">JSON file</a>
<a href="https://app.globus.org/file-manager?origin_id=385d3079-5121-40bc-a52f-055296497631&origin_path=%2Fallusers%2F">hosted in a Globus Guest Collection</a> with restricted access.
</p>
<p>
You will need to <a href="https://app.globus.org/groups/260da91f-3496-11ed-b941-972795fc9504/join">join the Serverless Data Users Globus Group</a> to view the sample chart.
</p>
<button id="sign-in" style="display: none">Sign In</button>
<button id="sign-out" style="display: none">Sign Out</button>
<code><pre id="user-information"></pre></code>
<div id="canvas">
<h2>Sample Chart with Restricted Data</h2>
<p>Plotted using <a href="https://www.chartjs.org/docs/latest/getting-started/">Chart.js</a>.
<canvas id="chart"></canvas>
</div>
<div style="width: 50%">
<h2>How this Works</h2>
<ol>
<li>Research logs in to Globus and Globus Auth returns an OAuth access token which is stored in the browser.</li>
<li>Once authenticated, a script in this page requests a JSON file from a Globus collection over HTTPS. Globus checks that the researcher is a member of the <a href="https://app.globus.org/groups/260da91f-3496-11ed-b941-972795fc9504/join">Serverless Data Users Globus Group</a>. If they are, the collection returns the file.</li>
<li>When the JSON file is loaded in the browser <a href="https://www.chartjs.org/docs/latest/getting-started/">Chart.js</a> is used to render the bar chart.</li>
</ol>
</div>
<img src="Architecture.png" style="border: 5px solid #555" width="50%" height="auto"/>
<script>
/* Collection with the restricted data */
const collection = '385d3079-5121-40bc-a52f-055296497631';
const client_id = 'f42cc8a6-a1f1-4e75-90e1-612febbb9e7f';
const data_url = 'https://g-062a3c.0ed28.75bc.data.globus.org/allusers/data.json';
/**
* Adds some basic logging configuration for the SDK.
* This is not required, but can be helpful for debugging.
*/
globus.logger.setLogger(console);
globus.logger.setLogLevel('DEBUG');
/**
* This will create an AuthorizationManager that will track your authorization state.
* - Stored in localStorage by default.
*/
const manager = globus.authorization.create({
/**
* Your registered Globus Application client ID.
*/
client: client_id,
/**
* The redirect URL for your application.
* This URL should also be added to your Globus Application configuration.
*/
redirect: 'https://rpwagner.github.io/globus-sdk-javascript-ex-01/',
/**
* @todo - This uncovered a bug where you need to define at least one scope, I'll get this fixed so you can remove it!
*/
scopes: `openid profile email https://auth.globus.org/scopes/${collection}/https`,
/**
* This will enable the use of refresh tokens - you probably want this!
*/
useRefreshTokens: true,
});
/**
* This will handle the `code` redirect and ensure the `manager` represents the authentication state.
* The call to `handleCodeRedirect` should be where your `redirect` is set to.
*/
manager.handleCodeRedirect();
/**
* Basic UI to demonstrate the SDK.
*/
const UI = {
SIGN_IN: document.getElementById('sign-in'),
SIGN_OUT: document.getElementById('sign-out'),
USER_INFO: document.getElementById('user-information'),
CANVAS: document.getElementById('canvas'),
CHART: document.getElementById('chart'),
};
UI.SIGN_IN.addEventListener('click', () => {
/**
* This will redirect the user to the Globus Auth login page.
*/
manager.login();
});
UI.SIGN_OUT.addEventListener('click', () => {
/**
* This will revoke the user's tokens and clear the stored state.
*/
manager.revoke();
//
UI.USER_INFO.innerText = '';
UI.CHART.style.display = 'none';
UI.CANVAS.style.display = 'none';
UI.SIGN_OUT.style.display = 'none';
UI.SIGN_IN.style.display = 'block';
});
if (manager.authenticated) {
UI.USER_INFO.innerText = `Welcome, ${manager.user.name}!`;
UI.SIGN_OUT.style.display = 'block';
UI.CANVAS.style.display = 'block';
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const data = JSON.parse(request.responseText);
/* https://www.chartjs.org/docs/latest/getting-started/ */
new Chart(UI.CHART, {
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
}
};
request.onloadend = function() {
if(request.status == 403) {
console.log('Not authorized for the data, got a 403');
UI.USER_INFO.innerText = `${manager.user.name}, you are not authorized to load the data. Did you join the the Serverless Data Users Globus Group?`;
UI.CHART.style.display = 'none';
UI.CANVAS.style.display = 'none';
};
};
request.open("GET", data_url, true);
request.setRequestHeader('Authorization', `Bearer ${manager.tokens.gcs(collection).access_token}`);
request.send();
} else {
UI.SIGN_IN.style.display = 'block';
UI.CHART.style.display = 'none';
UI.CANVAS.style.display = 'none';
}
</script>
</body>
</html>