Login script

Onegini IdP offers a JavaScript that will display the available login options on connected websites. The website must use OAuth 2.0 to connect with Onegini IdP.

In order to use the script you first have to receive a client id and client secret for the OAuth process.

Example login screen

HTML Snippet

Add the following div at the place where the login buttons should appear:

<div id="onegini"></div>

Add the scripts at the bottom of the HTML page or template:

<script src="https//www.onegini.me/integration/oauth/<YOUR CLIENT ID>.js"></script>
  var oauthState = 'abcd-1234-efgh-5678' /* generated value for the oauth state parameter */;
  var oneginiLogin = new OneginiLogin('onegini', oauthState);

OAuth State Parameter

The OAuth State Parameter is recommended to prevent Cross-Site Request Forgery (CSRF) in the OAuth flow. Its value is generated and stored on the server that initiates the flow and must be verified when the user comes back after logging in with Onegini. Its value must be randomly chosen for every new authorization request.

Customise the look and feel

There are several options to customise the look and feel of the Onegini login buttons. These options should be set before calling oneginiLogin.load();

  • oneginiLogin.setDisplayStyle('small') for smaller login buttons. Options are small and medium. Default is medium.
  • oneginiLogin.setPreText('Your text above') adds text above the login buttons.
  • oneginiLogin.setPostTest('Your text below') adds text below the login buttons.
  • oneginiLogin.setBackgroundColor('#990000') changes the background colour to #990000 (red).
  • oneginiLogin.setColor('#009900') changes the text colour to #009900 (green).
  • oneginiLogin.setFontFamily('Courier New, monospace') changes the font of the text above and below the buttons.
  • oneginiLogin.setFontSize('12pt') changes the font size to 12pt.
  • oneginiLogin.setFontWeight('bold') renders the text in bold.
  • oneginiLogin.setFontStyle('italic') renders the text in italic.
  • oneginiLogin.setTextDecoration('underline') underlines the text.

The buttons will only render if your client ID has been activated in Onegini IdP.