Below are three different example on how to use the JS Connector, each showing different combinations of user experience and message flow:

Window example

HTML

<button>Logg inn med OIDC</button>

<a class="logout" href="">Logg ut</a>

Implicit mode example

HTML

<button>Logg inn med OIDC</button>

<a class="logout" href="">Logg ut</a>

<div id="auth"></div>

Javascript

<script type="text/javascript">
    function on????Loaded() {
        // Initialise OIDC with required parameters
        window.????.doInit({
            // Merchant given client ID on the OIDC service
            client_id: 'your_client_id',
            // The resource scopes merchant want to gain access to for the user
            scope: 'openid address',
            // Implementation method, open the session in a iframe
            method: 'inline',
            // OIDC IDP endpoints for performing userinfo call.
            userinfo_endpoint: 'https://oidc-preprod.bankidapis.com/OIDC/oauth/userinfo'
			// Activate implicit flow mode by setting response type to token
            response_type: 'token',
			// Set response mode to query string when delivering parameters to the redirect_uri 
            response_mode: 'query'
        });
    }

    function on????ButtonClick() {
        window.????.doConnect({
			inlineElementID: 'auth',
            callback: function( err, data ) {
				if ( err ) {
					return;
				}
                console.log( data.access_token, data.token_type );
            }
        });
    }

    var button = document.querySelector('button');
    var logout = document.querySelector('a.logout');

    button.addEventListener('click', on????ButtonClick, false);
    logout.addEventListener('click', on????LogoutClick, false);
    document.body.addEventListener( '????-connector-loaded', on????Loaded, false);
</script>
<script async defer src="https://oidc-preprod.bankidapis.no/js/connector.bundle.min.js"></script>

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 ????.doConnect().

HTML

<!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: '????-connector-response-data', data: urlParams } ), '*' );
        } else {
            windowParent.postMessage( JSON.stringify( { type: '????-connector-error', error: urlParams['error'] } ), '*' );
        }
    } else {
        console.warn( '????ConnectorError: Could not send code, does not have parent window' );
    }
</script>

</body>
</html>

Luxembourg (OIDC)

Examples

Window example

Implicit mode example

Callback page example for redirect_uri