OCS iFRAME Integration

This is a documentation of how to integrate the OCS into your website as an iFrame.

OCS-Side

Configure your OCS with a shared secretkey. Use the same secretkey for the variable OCS_SECRETKEY

Parameters and Variables

These variables must be configured: – OCS_BASEURL : https:///login?embedded=true – OCS_SECRETKEY : secretkey shared with/from OCS – OCS_URL: : will be generated by PHP, see PHP snippet below

These variables must be dynamic set at runtime: – LANGUAGE : (ISOALPHA2, i.e. de, en, fr, …) – UUID : a generated uuid, to protect from replay attacks – EMAIL : email address of customer – TIME : current time as unix timestamp, url’s are only valid a limited time, the valid duration is configured in the OCS

Replace all occurrences of , <LANGUAGE,,,, and by its corresponding values / variables within the following two snippets

Generation of OCS-URL / OCS-LINK

<?php
$fnEncrypt = function encryptOcsLinkParams(array $params, string $key): string
{

	$params = json_encode($params);

	$cipher = 'AES-256-CBC';
	$sHashAlgo = 'sha256';

	$hashedKey = openssl_digest($key, $sHashAlgo, true);

	$ivlen = openssl_cipher_iv_length($cipher);
	$iv = openssl_random_pseudo_bytes($ivlen, $cryptoStrong);
	$ciphertextRaw = openssl_encrypt($params, $cipher, $hashedKey, OPENSSL_RAW_DATA, $iv);
	$hmac = hash_hmac($sHashAlgo, $ciphertextRaw, $hashedKey, true);
	$ciphertext = base64_encode($iv . $hmac . $ciphertextRaw);

	if (!$cryptoStrong) {
		throw new \RuntimeException('Iv is not strong!');
	}
		return $ciphertext;
}

$params = [
	'email' => '<EMAIL>',
	'language' => '<LANGUAGE>',
	'time' => <TIME>,
	'uuid' => <UUID>,
];

$encrypted = $this->encryptOcsLinkParams($params, '<OCS_SECRETKEY>');

// the url <OCS_URL> for usage in HTML snippet

$url = '<OCS_BASEURL>' . (strpos('<OCS_BASEURL>', '?') === false ? '?' : '&') . "lang=<LANGUAGE>&p=" . urlencode($encrypted);

Additional explanations for email encryption

Usage of the OCS-URL / OCS-LINK

You have to include jQuery and iframeResizer for the seamless integration.

<html>
<!-- include jQuery -->
<!-- include iframeresizer v4.2.x https://github.com/davidjbradshaw/iframe-resizer --> 
    <script> 
    const initOcs = function (iframeSel) { 
        iFrameResize({bodyBackground: '#fff'}, iframeSel); 
        var iframe = $(iframeSel).get(0); 
        window.addEventListener('message', function (evt) { 
            if (evt.source === iframe.contentWindow) { 
                if (evt.data.sso) { 
                    switch (evt.data.sso) { 
                        case 'sessionTimedOut': 
                        case 'linkTimedOut': 
                        case 'linkReused': 
                            window.location.reload(); 
                            break; 
                        case 'linkInvalid': 
                            break; 
                    } 
                } 
            } 
        }, false); 
     
    }; 
    </script>

     <div class="iframe-wrapper"> 
         <iframe id="ocsWindow" height="0" width="100%" src="<OCS_URL>" frameborder="0" scrolling="no" seamless="seamless"></iframe> 
     </div>

     <script>initOcs('#ocsWindow');</script>

</html>