Please note, that this project ist deprecated. New Repo: https://github.com/rwth-acis/openidconnect-signin

An OpenID Connect Button to instrument Web pages with OpenID Connect authentication and access to user information using an external OpenID Connect Provider via the OpenID Connect implicit flow.

Table of Contents

• openid-connect-button
  • Try it
• Developer Tutorial
  • Add the OpenID Connect Button to a Web page
    • Step 1: Register page as OpenID Connect client
    • Step 2: Include OpenID Connect Button script on client page
    • Step 3: Add HTML element representing button to the client page
    • Step 4: Handle sign in with JavaScript callback
  • License
• Framework plugins
  • Meteor (web framework)

OpenID Connect client registration frontends look different on different server implementations. In this section, we walk you through the dialogs provided by the Open Source MITREid Connect Server version 1.1.8.

1. Log in to the OpenID Connect server (register for an account, if necessary).
2. In the Developer section in the menu on the left choose Self-service client registration.
3. Click the button Register a new client.
4. A page New Client with six tabs Main, Access, Credentials, Crypto, Other, and JSON will open. In the next steps, configure your client on each of the tabs. Be sure to press Save after completing every tab!
5. Tab Main 1. enter an arbitrary Client name 1. paste the deploy URL of your client page as Redirect URI and click the "+" button 1. optionally fill in all other fields
6. Tab Access 1. for Grant Types choose implicit 1. for Response Types check fields token, id_token, and token id_token (uncheck all other boxes)
7. Tab Credentials: keep Token Endpoint Authentication Method on Client Secret over HTTP Basic
8. Tab Crypto: leave all fields on Use server default
9. Tab Other: nothing to do here for now
10. Tab JSON: shows a JSON representation of your client configuration
11. Go back to tab Main and copy values for Client ID and Registration Access Token.
12. Store values for Client ID and Registration Access Token in a safe place! You will need them for using the OpenID Connect Button and for any re-configuration of your OpenID Connect client!
13. In case you have to re-configure your client, select Self-service client registration from the Developer section in the menu on the left, enter Client ID and Registration Access Token in the fields on the right and click the button Edit an existing client. If you are an administrator of the OpenID Connect server, you can make use of the menu entry Manage Clients in the Administrative section in the menu on the left.

<!-- Place this asynchronous JavaScript just before your </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>

The OpenID Connect Button script depends on jQuery, bootstrap, jsjws, and jsrsasign. Be sure to include all required dependencies to JS and CSS, as demonstrated in index.html.

<span class="oidc-signin"
	data-callback="signinCallback"
	data-name="Learning Layers"
	data-logo="http://learning-layers.eu/wp-content/themes/learninglayers/images/logo.png"
	data-server="https://api.learning-layers.eu/o/oauth2"
	data-clientid="CLIENTID"
	data-scope="openid phone email address profile">
</span>

function signinCallback(result) {
	if(result === "success"){
	    // after successful sign in, display a welcome string for the user
		$("#status").html("Hello, " + oidc_userinfo.name + "!");
	} else {
	    // if sign in was not successful, log the cause of the error on the console
		console.log(result);
	}
}
<a name="license"/>

License

The OpenID Connect Button is released under the BSD license by Dominik Renzel, Advanced Community Information Systems (ACIS) Group, RWTH Aachen University, Germany.