-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcallback.html
121 lines (113 loc) · 3.65 KB
/
callback.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
<!DOCTYPE html>
<html>
<head>
<script src="./config.js"; token=""></script>
</head>
<body>
<h1>Now the user has logged in. This page is the application itself.</h1>
<h3>
Notice how we are redirected to the callback URL.
<br>
Authorization code was received as a query parameter.
</h3>
<br>
<button onclick="reveal("step3")">Show step 3</button>
<div id="step3" style="display: none;">
<h2>
<hr>
<br>
Step 3: Exchange the authorization code for access token by sending a HTTP POST request to ELIXIR token
endpoint:
<script type="text/javascript">
document.write(token_url)
</script>
</h2>
<h3>The following query parameters are used:</h3>
<table style="width:100%">
<tr>
<td>code</td>
<td>The authorization code retrieved in previous step (Notice the code in the address bar)</td>
</tr>
<tr>
<td>redirect_uri</td>
<td>http://localhost/callback.html (The same URL as in previous step)</td>
</tr>
<tr>
<td>client_id</td>
</tr>
<tr>
<td>client_secret</td>
</tr>
<tr>
<td>grant_type</td>
<td>authorization_code</td>
</tr>
<tr>
<td>scope</td>
<td>openid</td>
</tr>
</table>
<br><br>
<button onclick="fetch_token()">Fetch Access Token</button>
</div>
<div id="httpresponse_div" style="display: none;">
<br>
<!--The HTTP POST response:
<p id="httpresponse_p"></p>-->
<button onclick="reveal("step4_div")">Show step 4</button>
</div>
<div id="step4_div" style="display: none;">
<br>
<hr>
<br>
<h2>
Step 4: Fetch userinfo using access token by sending HTTP GET request to endpoint:
<script type="text/javascript">
document.write(user_url)
</script>
</h2>
No query parameters needed, but a authorization header has to be in place: "Authorization: Bearer
PLACE_THE_ACCESS_TOKEN_HERE"
<br>
<br>
<button onclick="fetch_userinfo()">Fetch userinfo</button>
</div>
<script>
// Exchange access token for user info
function fetch_userinfo(){
var http_userinfo = new XMLHttpRequest();
http_userinfo.timeout = 2000;
http_userinfo.open("GET", user_url, true);
http_userinfo.setRequestHeader("Authorization", "Bearer" + token);
http_userinfo.send();
}
// Exchange authorization code for access token
function fetch_token(){
var query_vars = window.location.search.substring(1);
var query_vars_array = query_vars.split('&');
// Extract code and state parameters from query parameters
for (var i = 0; i < query_vars_array.length; i++)
{
var query_var = query_vars_array[i].split('=');
if (query_var[0] == "code"){
var code = query_var[1]
}
if (query_var[0] == "state"){
var state = query_var[1]
}
}
var http_request = new XMLHttpRequest();
var url = token_url.concat("?code=", code, "&state=", state, "&scope=", scope, "&grant_type=", grant_type, "&redirect_uri=", redirect_uri, "&client_id=", client_id, "&client_secret=", client_secret);
http_request.timeout = 2000;
http_request.onreadystatechange = function(e) {
if (http_request.readyState === 4) {
token = http_request.response.split("\"")[3];
reveal("httpresponse_div")
}
}
http_request.open("POST", url, true);
http_request.send()
}
</script>
</body>
</html>