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.
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>
<script>
var oauthState = 'abcd-1234-efgh-5678' /* generated value for the oauth state parameter */;
var oneginiLogin = new OneginiLogin('onegini', oauthState);
oneginiLogin.load();
</script>
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 aresmall
andmedium
. Default ismedium
.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.