Iframe Implementation

The iframe implementation is an extension of the LoginRadius Identity Experience Framework (IDX). This feature allows you to display the Hosted Registration and Profile pages directly on your website within an <iframe>.

The hosted page emits events (both success and error) directly to callback handlers on the parent window. You can also emit custom events from the IDX iframe to the parent window to further customize any actions. The iframe implementation allows you to leverage all aspects of the Identity Experience Framework directly into your web properties: ease of implementation, a centralized look and feel, and customizability.

Components

The Identity Experience Framework Iframe Implementation comprises four JavaScript files. Two files are required on your parent website, and two are needed within the Identity Experience Framework to manage operations.

Get a copy of the Iframe Identity Experience Framework files from the iframe-hosted-page branch here: iframe hosted library.

Note: If you are cloning the repo make sure to switch to the iframe-hosted-page branch.

JavaScript File Descriptions

File Name	Location	Purpose
LoginRadiusV2.iframeSDK.js	Parent Website	Responsible for communication between the iframe and the parent website, managing iframe Screens, and rendering the iframes in specified HTML container elements.
iframeSDK-options.js	Parent Website	Holds your JavaScript configurations, including the appName, iframe settings, and custom domains.
iframeSDK-Auth-Communication.js	IDX Hosted Page	Assists with communication for Authentication features. Must be added as the Before Script in the LoginRadius Admin Console under Authentication Pages (Branding > Hosted Pages > Before Script). Wherever `iframe == true`, it instructs the hosted page to run when it renders in the Iframe.
iframeSDK-Profile-Communication.js	IDX Hosted Page	Assists communication for Profile Area features (post-authentication). This file is optional. If used, it needs to be added as the Before Script under the Profile Page area.

Configuration

The iframeSDK-Options.js file manages most of the implementation settings by defining the LRConfigObj JavaScript object.

1.Specify your LoginRadius Site/App Name:

Create an object named LRConfigObj and provide your LoginRadius site/app name using the appName property:

var LRConfigObj = {
'appName': 'YOUR LOGINRADIUS APP NAME'
}

2.Configure Iframe Settings

Add an iframeSettings object inside LRConfigObj to control the iframe's size and styling:

height: Manages the height of the Iframe.
width: Manages the width of the frame.
class: Pass custom class names to add custom CSS to the Iframe.

var LRConfigObj = {
  'appName': 'YOUR LOGINRADIUS APP NAME', 
  iframeSettings : {
    height : '85%',
    width : '100%',
    class : 'iframe'
  }
}

3.(Optional) Using a Custom Domain:

If you are using a custom domain, pass the domain value in the LRConfigObj via the customdomain property.

var LRConfigObj = {
 'appName': 'YOUR LOGINRADIUS SITENAME',
 iframeSettings : {
   height : '85%',
   width : '100%',
   class : 'iframe'
 },
 'customdomain': 'YOUR CUSTOM DOMAIN'
}

Adding a Custom Domain

To enable a custom domain for your iframe implementation:

Navigate to Tenant > Custom Domain in the Console and press the save button.
In your iframeSDK-Options.js file, update the customdomain property:

'customdomain': 'your custom domain'

Note: This feature must be enabled by LoginRadius Support.

Using the LoginRadiusV2.iframeSDK.min.js

The LoginRadiusV2.iframeSDK.js file provides the render function to display the iframes on your parent website.

Rendering Format

ciamwidget_obj.render('action','containerID', 'pagetype', function(response){
},function(error){});

Parameters:

Parameter	Description
action	The name of the action to render. See the List Of Actions below.
containerID	The `id` of the HTML element where the iframe will be rendered.
pagetype	The Identity Experience Framework type. Always set to `auth.aspx` by default.
function(response)	The success callback function to handle the response object.
function(error)	The error callback function to handle the error response.

List Of Actions

LoginRadiusV2.iframeSDK.js support the following default actions:

Action	Description
login	Render Login Form
register	Render Register Form
forgotpassword	Render Forgot Password Form
resetpassword	Render Reset Password Form
editprofile	Render Edit Profile Form
accountsetting	Render Account Setting Form
changepassword	Render Change Password Form
profile	Render View Profile Form

Custom events can also be emitted from the LoginRadius Identity Experience Framework.

Implementation

Follow these steps to generate and display the interface within your iframe.

1. Include Required Scripts

Add the following tags to your parent page:

<script type="text/javascript" src="LoginRadiusV2.iframeSDK.min.js"></script>
<script type="text/javascript" src="iframeSDK-Options.js"></script>

2. Add a Container Element

Add a div container with an id where the iframe will be generated:

<div id="containerID"></div>

3. Initialize and Render the Interface

Add the following script to initialize the LoginRadiusCiamWidget and call the render method:

<script type="text/javascript">
  var ciamwidget_obj = new LoginRadiusCiamWidget(LRConfigObj, LRCommonOptions);
  ciamwidget_obj.render('action','containerID', 'auth.aspx', function(response){
        console.log(JSON.stringify(response));
       /* -- your code here to handle success -- */
  },
  function(error){
      /* -- your code here to handle error --*/
    });
</script>

Response Object Format

Upon success, the response object will be returned in the following format:

{
	response:<response Data>,
	event: <action>
}

Use this sample code for a quick reference on rendering the Login form

<html>
<body>
<head>
<script type="text/javascript" src="../parent-page-files/LoginRadiusV2.iframeSDK.js"></script>
<script type="text/javascript" src="../parent-page-files/iframeSDK-Options.js"></script>
</head>

<div id="login-iframe"></div>
<div id="result" class="result"> </div>

<script type="text/javascript">

  var ciamwidget_obj = new LoginRadiusCiamWidget(LRConfigObj, LRCommonOptions);
  
  // Render the 'login' action into the 'login-iframe' container
  ciamwidget_obj.render('login','login-iframe', 'auth.aspx', function(response){
       /* -- handle success -- */
        console.log(JSON.stringify(response));
        console.log("Success: Login completed.");
  },
  function(error){
      /* -- handle error --*/
      document.getElementById("result").innerHTML = "Error : " + JSON.stringify(error);
    });
</script>
</body>
</html>