forked from learning-layers/openid-connect-button
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (113 loc) · 6.09 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
<!DOCTYPE html>
<!--
Copyright (c) 2014 Dominik Renzel, Advanced Community Information Systems (ACIS) Group,
Chair of Computer Science 5 (Databases & Information Systems), RWTH Aachen University, Germany
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of the ACIS Group nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="A simple example of a client using the OpenID Connect Button." />
<title>OpenID Connect Test Client</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<h1>Using the OpenID Connect Button</h1>
<p>
The OpenID Connect Button allows arbitrary browser-based Web applications to authenticate and get access to user information maintained by an external OpenID Connect Provider. The application itself must be registered as client at the OpenID Connect provider. The size of the OpenID Connect Button is configurable. In the example below, we use the OpenID Connect provider of the EU FP7 IP Learning Layers.
</p>
<p>
<!-- OpenID Connect Button - Step 3: add HTML element representing button -->
<span id="signinButton">
<span class="oidc-signin"
data-callback="signinCallback"
data-name="Learning Layers"
data-logo="https://raw.githubusercontent.com/learning-layers/LayersToolTemplate/master/extras/logo.png"
data-size="lg"
data-server="https://api.learning-layers.eu/o/oauth2"
data-clientid="e51787a0-8ffd-480a-a0c8-66a627fe6e24"
data-scope="openid phone email address profile">
</span>
</span>
</p>
<h2 id="status"/>
</div>
<!-- OpenID Connect Button - Step 2: resolve dependencies to jQuery, bootstrap, jsjws and jsrsasign -->
<!-- import jQuery for AJAX calls (must) -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- import Bootstrap for responsive UI (must) -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- import JWS and JSRSASIGN (must) -->
<script type="text/javascript" src="./js/jsjws/jws-2.0.js"></script>
<script type="text/javascript" src="./js/jsrsasign/ext/base64.js"></script>
<script type="text/javascript" src="./js/jsrsasign/base64x-1.1.js"></script>
<script type="text/javascript" src="./js/jsrsasign/ext/jsbn.js"></script>
<script type="text/javascript" src="./js/jsrsasign/ext/jsbn2.js"></script>
<script type="text/javascript" src="./js/jsrsasign/asn1hex-1.1.js"></script>
<script type="text/javascript" src="./js/jsrsasign/crypto-1.1.js"></script>
<script type="text/javascript" src="./js/jsrsasign/ext/rsa.js"></script>
<script type="text/javascript" src="./js/jsrsasign/ext/rsa2.js"></script>
<script type="text/javascript" src="./js/jsrsasign/rsapem-1.1.js"></script>
<script type="text/javascript" src="./js/jsrsasign/rsasign-1.2.min.js"></script>
<script type="text/javascript" src="./js/jsrsasign/x509-1.1.js"></script>
<script type="text/javascript" src="./js/jsrsasign/crypto-1.1.js"></script>
<script type="text/javascript">
// OpenID Connect Button - Step 4: implement a callback function
function signinCallback(result) {
if(result === "success"){
// at this point, developers have access to several pieces of information
// relevant to OpenID Connect (see ./oidc-button.js)
console.log("OpenID Connect Provider Configuration:");
console.log(oidc_provider_config);
console.log("OpenID Connect User Info:");
console.log(oidc_userinfo);
console.log("OpenID Connect ID Token:");
console.log(oidc_idtoken);
$("#status").html("Hello, " + oidc_userinfo.name + "!");
} else {
console.log("not signed in...");
console.log(result);
$("#status").html("Do I know you?!");
}
}
</script>
<!--
<!-- OpenID Connect Button - Step 2: add this script element right before closing </body> tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = './oidc-button.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>