...
| Code Block |
|---|
|
<html>
<head>
<script>
function init() {
OIDC.doInit( {
// URL to OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given client ID on the OIDC service
// TODO: Replace this with your own!
client_id: 'your_client_id',
// Your callback URL that will receive the Authorization Grant response
// TODO: Replace this with your own!
redirect_uri: 'https://yourdomain.com/oidc/callback'
} );
};
document.body.addEventListener( 'oidc-connector-loaded', init, false);
</script>
<script src="<connector-baseurl>/connector.bundle.min.js" async defer></script>
</head>
<body>
</body>
</html> |
...
| Code Block |
|---|
|
<html>
<head>
</head>
<body>
<button id="oidc-login" disabled>Login</button>
<button id="oidc-login-scope" disabled>Login with another scope</button>
<script>
// Handle button click and start login
function onOIDCButtonClick( scope ) {
OIDC.doConnect({
config: {
scope: scope
}
});
}
function init() {
OIDC.doInit( {
// URLMerchant to OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given clientgiven client ID on the OIDC service
// TODO: Replace this with your own!
client_id: 'your_client_id',
// Your callback URL that will receive the Authorization Grant response
// TODO: Replace this with your own!
redirect_uri: 'https://yourdomain.com/oidc/callback'
} );
document.getElementById('oidc-login').disabled = false;
document.getElementById('oidc-login-scope').disabled = false;
};
document.body.addEventListener( 'oidc-connector-loaded', init, false);
document.getElementById('oidc-login').addEventListener( 'click', onOIDCButtonClick.bind( null, 'openid' ), false );
document.getElementById('oidc-login-scope').addEventListener( 'click', onOIDCButtonClick.bind( null, 'openid profile' ), false );
</script>
<script src="<connector-baseurl>/connector.bundle.min.js" async defer></script>
</body>
</html> |
...
| Code Block |
|---|
|
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<title>OIDC Connector - Window mode example</title>
</head>
<body>
<button disabled>Logg inn med OIDC</button>
<script>
// Handle button click and start login
function onOIDCButtonClick() {
OIDC.doConnect({
callback: function( err, data ) {
if ( err ) {
return;
}
console.log( data );
}
});
}
function onOIDCLoaded() {
// Initialise OIDC with required parameters
OIDC.doInit({
// URLMerchant togiven OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given client client ID on the OIDC service
client_id: 'your_client_id',
// Your callback URL that will receive the Authorization Grant response
redirect_uri: 'https://yourdomain.com/oidc/callback',
// Set window as chosen integration method
method: 'window',
});
// Start OIDC login on click of a button
var button = document.querySelector('button');
button.addEventListener('click', onOIDCButtonClick, false);
// Enable button
button.disabled = false;
}
// Call initialize when OIDC Connector has loaded
document.body.addEventListener( 'oidc-connector-loaded', onOIDCLoaded, false);
</script>
<script async defer src="<connector-baseurl>/connector.bundle.min.js"></script>
</body>
</html> |
...
Implicit mode example
Here we demonstrate the special implicit mode related parameters. The chosen UX method is also inline - meaning an iframe will be used to open the login. The JS Connector is loaded asynchrously at the end of the page.
| Code Block |
|---|
|
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<title>OIDC Connector - Implicit mode example inline</title>
</head>
<body>
<button disabled>Logg inn med OIDC</button>
<div id="auth"></div>
<script>
function onOIDCButtonClick() {
OIDC.doConnect( {
inlineElementID: 'auth',
callback: function( err, data ) {
if ( err ) {
return;
}
console.log( data );
}
} );
}
function onOIDCLoaded() {
OIDC.doInit({
// URL to OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given client ID on the OIDC service
client_id: 'your_client_id',
// Your callback URL that will receive the Authorization Grant response
redirect_uri: 'https://yourdomain.com/oidc/callback',
// Set inline as chosen integration method
method: 'inline',
// Activate implicit flow mode by setting response type to id_token token
response_type: 'id_token token',
// Set response mode to form_post
response_mode: 'form_post'
});
var button = document.querySelector('button');
button.addEventListener('click', onOIDCButtonClick, false);
// Enable button
button.disabled = false;
}
document.body.addEventListener( 'oidc-connector-loaded', onOIDCLoaded, false);
</script>
<script async defer src="<connector-baseurl>/connector.bundle.min.js"></script>
</body>
</html> |
Callback page example for redirect_uri
This example can be implemented on your redirect_uri location to automatically pass the OIDC authentication response to the parent context (window/iframe host) which then will be passed into your callback method given in OIDC.doConnect().
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<title>OIDC Connector Test Callback</title>
</head>
<body>
<!--
This callback page is rendered at callback_uri after the OIDC authorization request returns.
This is an example implementation of a callback script for those sites that use frame method inline (iframe) or window.
The idea of this page is to communicate with the BankID JS Connect instance sitting in the parent site that launched the
iframe or window in the first place.
Depending on the response methods chosen in the initial request, this page will attempt to use XDM (Cross-domain messaging)
messages to communicate to the parent site.
When this page loads it will do the following:
1. Checking a special if this was a form_post response_mode (handled by the server).
2. Retrieving response data based on response_mode chosen: form_post, query or fragment
3. Checking data received and doing an XDM event postMessage to parent Window with data.
That's it!
BankID JS Connect will now close this window/frame.
-->
<script>
// If FORM POST, the server side handler must inject the received data here as a JSON string
var formPost = '{form_post}';
formPost = /{\w+}/.test(formPost) ? null : JSON.parse( formPost );
function urlSearchToObj( search ) {
var pairs = search.substring( 1 ).split( '&' ),
obj = {},
pair;
for ( var i = 0; i < pairs.length; i ++) {
if ( pairs[i] === '' ) {
continue;
}
pair = pairs[i].split( '=' );
obj[decodeURIComponent( pair[0] )] = decodeURIComponent( pair[1] );
}
return obj;
}
// Get form_post data, or query params, or hash fragment params
var urlParams = formPost || urlSearchToObj( document.location.search || document.location.hash );
var hasError = false;
if ( urlParams['error'] ) {
console.error( 'Received error' );
hasError = true;
}
var windowParent = window.opener || window.parent;
if ( windowParent !== window) {
if ( !hasError && responseData ) {
windowParent.postMessage( JSON.stringify( { type: 'oidc-connector-response-data', data: urlParams } ), '*' );
} else {
windowParent.postMessage( JSON.stringify( { type: 'oidc-connector-error', error: urlParams['error'] } ), '*' );
}
} else {
console.warn( 'OIDCConnectorError: Could not send code, does not have parent window' );
}
</script>
</body>
</html> |
