-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
250 lines (229 loc) · 14 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!doctype html>
<html ng-app="wizardApp">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ORCID API Walkthrough</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/fonts.min.css">
<link rel="stylesheet" href="css/style.min.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body>
<div id="wizard">
<div class="steps-pane-container" ng-controller="stepsController">
<div class="logo">
<img src="img/orcid-logo.png" alt="">
</div>
<ul>
<li class="step" ng-repeat="step in steps" ng-class="{'current-step': $index == wizardSrvc.current}" ng-model="steps" ng-cloak>
{{step.title}}
</li>
</ul>
</div>
<div class="contents-pane-container">
<div class="contents-pane" ng-controller="stepsController">
<!-- Introduction -->
<div title="Introduction" ng-show="wizardSrvc.current == 0" ng-cloak>
<h2>Introduction</h2>
<p>ORCID offers several APIs (Application Programming Interfaces) that allow your systems to intreact with the ORCID registry:</p>
<ul>
<li><b>Public API:</b> Freely available to anyone</li>
<li><b>Member API:</b> Available to organizations that support ORCID with an annual membership subscription</li>
</ul>
<p>Using the APIs, your system can:</p>
<table class="api-chart">
<tbody>
<tr><td><img src="img/ID_symbol.svg"></td><td><h3>Get iDs</h3></td><td>Prompt users to provide their ORCID iD using our authentication system</td><td><b>Public / Member</b></td></tr>
<tr><td><img src="img/glyphicons-28-search-A6CE39.svg"></td><td><h3>Search</h3></td><td>Run automated searches of the ORCID registry</td><td><b>Public / Member</b></td></tr>
<tr><td><img src="img/glyphicons-52-eye-open-A6CE39.svg"></td><td><h3>Read</h3></td><td>Retrieve data from ORCID records (and copy it into your system)</td><td><b>Public / Member</b></td></tr>
<tr><td><img src="img/glyphicons-31-pencil-A6CE39.svg"></td><td><h3>WRITE</h3></td><td>Add/update new works, funding items, affiliations & biographical information</td><td><b>Member</b></td></tr>
<tr><td><img src="img/glyphicons-433-plus-A6CE39.svg"></td><td><h3>Create</h3></td><td>Create new ORCID records for your researchers using an "on-demand" process</td><td><b>Member</b></td></tr>
</tbody>
</table>
</div>
<!-- Accessing the API -->
<div title="Accessing the API" ng-show="wizardSrvc.current == 1" ng-cloak>
<h2>Accessing the APIs</h2>
<p>Accessing any of the ORCID APIs requires a set of credentials consisting of:</p>
<ul>
<li><b>Client ID</b> <em>(ex: API APP-1X454QYQ66U6XW7X)</em></li>
<li><b>Client Secret</b> <em>(ex: 8fa38bea-48e2-4238-9479-e55448ffa225)</em></li>
</ul>
<p>These credentials are simliar to a username and password.</p>
<h3>Public API Credentials</h3>
<p>Public API credentials are freely available to any ORCID users and are accessed through the Developer Tools section of your ORCID record.<br><a href="http://members.orcid.org/api/accessing-public-api" target="_blank">Learn more about Public API credentials</a></p>
<h3>Member API Credentials</h3>
<p>Member API credentials for the live ORCID registry are available only to ORCID member organizations that have successfully built and tested an application in our test environment, the Sandbox. <a href="http://members.orcid.org/api/introduction-orcid-member-api#SandboxCreds" target="_blank">Learn more about the Sandbox</a></p>
<p>For this tutorial, we'll be using the Sandbox environment. To complete the remainder of the tutorial, you'll need to get a set of Sandbox API credentials.</p>
<br>
<a href="https://orcid.org/content/register-client-application-sandbox" class="btn btn-default" target="_blank">Get Sandbox API Credentials</a>
</div>
<!-- Using the API -->
<div title="Using the API" ng-show="wizardSrvc.current == 2" ng-cloak>
<h2>Using the API</h2>
<ol>
<li>Request permission from the user</li>
<li>Get an authorization code</li>
<li>Exchange the authorization code for an access token</li>
<li>Use the access token in API calls that read from or write to the user's record</li>
</ol>
</div>
<!-- Get access token -->
<div title="Get access token" ng-show="wizardSrvc.current == 3" ng-cloak>
<div ng-controller="authorizationCodeController">
<h2>ORCID API - Getting the authorization code</h2>
<p>Here, we ask the user for permissions over his ORCID record</p>
<div class="form-inline">
<div class="form-group">
<label for="client_id">Client ID:</label>
<input type="text" name="client_id" class="form-control" ng-model="form.client_id"/>
</div>
</div>
<button id="submit" ng-click="getAuthorizationCode()" class="btn btn-default">Get code</button>
</div>
</div>
<!-- These two should share the controller... is this the way?-->
<div ng-controller="tokenController">
<!-- Get token -->
<div title="Get token" ng-show="wizardSrvc.current == 4" ng-cloak>
<h2>Get Token</h2>
<p>Technologies</p>
<div id="token" ng-show="access_code != null" ng-cloak>
<p>This is your access code {{access_code}}</p>
<div class="form-inline">
<div class="form-group">
<label for="client_id">Client secret:</label>
<input type="text" name="client_secret" ng-model="client_secret" class="form-control" />
</div>
</div>
<button id="submit" class="btn btn-default" ng-click="exchangeCode()">Exchange</button>
</div>
</div>
<!-- Show access token info-->
<div title="Access token info" ng-show="wizardSrvc.current == 5" ng-cloak>
<div class="token_items">
<pre>
<a href="#token" ng-mouseenter="show('token')">
<span class="key">access_token: </span><span class="value">{{token.access_token}}</span>
</a>
<a href="#expiration" ng-mouseenter="show('expiration')">
<span class="key">expires_in: </span><span class="value">{{token.expires_in}}</span>
</a>
<a href="#name" ng-mouseenter="show('name')">
<span class="key">name: </span><span class="value">{{token.name}}</span>
</a>
<a href="#orcid" ng-mouseenter="show('orcid')">
<span class="key">orcid: </span><span class="value">{{token.orcid}}</span>
</a>
<a href="#scope" ng-mouseenter="show('scope')">
<span class="key">scope: </span><span class="value">{{token.scope}}</span>
</a>
<a href="#type" ng-mouseenter="show('type')">
<span class="key">token_type: </span><span class="value">{{token.token_type}}</span>
</a>
</pre>
</div>
<div class="token_items_descriptions">
<p id="access_token" class="description" ng-class="(show_access_token == true) ? 'visible' : 'hidden'">access_token description</p>
<p id="expires_in" class="description" ng-class="(show_expires_in == true) ? 'visible' : 'hidden'">expires_in description</p>
<p id="name" class="description" ng-class="(show_name == true) ? 'visible' : 'hidden'">name description</p>
<p id="orcid" class="description" ng-class="(show_orcid == true) ? 'visible' : 'hidden'">orcid description</p>
<p id="scope" class="description" ng-class="(show_scope == true) ? 'visible' : 'hidden'">scope description</p>
<p id="token_type" class="description" ng-class="(show_token_type == true) ? 'visible' : 'hidden'">token_type description</p>
</div>
</div>
<!-- Read record -->
<div title="Read record" ng-show="wizardSrvc.current == 6" ng-cloak>
<h2>ORCID API - Read ORCID record</h2>
<p>Read record</p>
<div>
<button id="submit" class="btn btn-default" ng-click="readRecord()">Read profile</button>
</div>
<div id="profile" ng-class="(show_xml == true) ? 'visible' : 'hidden'">
<textarea rows="20" cols="100" style="border:none;">
<orcid-message>
<message-version>1.2</message-version>
<orcid-profile type="admin">
<orcid-identifier>
<uri>http://sandbox.orcid.org/0000-0001-6442-2876</uri>
<path>0000-0001-6442-2876</path>
<host>sandbox.orcid.org</host>
</orcid-identifier>
<orcid-preferences>
<locale>es</locale>
</orcid-preferences>
<orcid-history>
<creation-method>Direct</creation-method>
<submission-date>2015-05-15T09:46:30.172-06:00</submission-date>
<last-modified-date>2015-05-19T06:00:08.759-06:00</last-modified-date>
<claimed>true</claimed>
<verified-email>false</verified-email>
<verified-primary-email>false</verified-primary-email>
</orcid-history>
<orcid-bio>
<personal-details>
<given-names>One</given-names>
<other-names visibility="public"/>
</personal-details>
<biography visibility="public"/>
<researcher-urls visibility="public"/>
<external-identifiers visibility="public"/>
</orcid-bio>
<orcid-activities>
<orcid-works>
<orcid-work put-code="1001" visibility="public">
<work-title>
<title>Work # 1 - Test</title>
</work-title>
<work-type>journal-article</work-type>
<source>
<source-orcid>
<uri>http://sandbox.orcid.org/0000-0001-6442-2876</uri>
<path>0000-0001-6442-2876</path>
<host>localhost</host>
</source-orcid>
<source-name>One</source-name>
<source-date>2015-05-15T09:47:09.210-06:00</source-date>
</source>
<created-date>2015-05-15T09:47:09.210-06:00</created-date>
<last-modified-date>2015-05-19T05:09:40.879-06:00</last-modified-date>
</orcid-work>
</orcid-works>
</orcid-activities>
</orcid-profile>
</orcid-message>
</textarea>
</div>
</div>
</div>
<!-- Update record -->
<div title="Update record" ng-show="wizardSrvc.current == 7" ng-cloak>
<h2>ORCID API - Technologies</h2>
<p>Technologies</p>
<ul>
<li><a href="http://www.restapitutorial.com/lessons/whatisrest.html" target="_blank">REST</a> interact w/API via HTTP calls</li>
<li><a href="http://members.orcid.org/api/tokens-through-3-legged-oauth-authorization" target="_blank">OAuth “3-legged”</a> authorization process</li>
<li><a href="http://www.w3.org/XML/" target="_blank">XML</a>/<a href="http://www.json.org/" target="_blank">JSON</a> data exchange</li>
</ul>
</div>
</div>
<div class="wizard-btn-container" ng-controller="controlsController">
<button class="wizard-nav-btn wizard-previous-button" ng-class="{'disabled-button': wizardSrvc.current == 0}" ng-click="back()">Back</button>
<button class="wizard-nav-btn wizard-next-button" ng-click="next()" ng-show="wizardSrvc.current != 7" ng-cloak>Next</button>
<button class="wizard-nav-btn wizard-finish-button wizard-hidden-button" ng-show="wizardSrvc.current == 7" ng-click="finish()" ng-cloak>Finish</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-cookies.js"></script>
<script src="js/app.min.js" type="text/javascript" ></script>
</body>
</html>