Displaying the LoginRadius interface in a pop-up

In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK.

1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

2. Include the LoginRadius Interface Javascript and HTML5 SDK reference:

<script src="https://hub.loginradius.com/include/js/LoginRadius.js"></script>
<script type="text/javascript"> var options={};
options.login=true;
LoginRadius_SocialLogin.util.ready(function () {
$ui = LoginRadius_SocialLogin.lr_login_settings;
$ui.interfacesize = "";
$ui.apikey = "<LoginRadius_API_Key>";
$ui.callback="";
$ui.lrinterfacecontainer ="interfacecontainerdiv";
LoginRadius_SocialLogin.init(options);
}); </script>
<script src="LoginRadiusSDK.2.0.0.js" type="text/javascript"></script>

3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating.

<button onclick="Login();">Login</button>
<div id="dialog" style="display:none;"title="Login Popup">
<div id="interfacecontainerdiv" class="interfacecontainerdiv"></div>
</div>
<div id="profile"> </div>

4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup:

function Login(){
$( "#dialog" ).dialog();
LoginRadius_SocialLogin.init(options);
}

5. Include the JavaScript callback script to handle a successful authentication and display the profile data.

LoginRadiusSDK.setLoginCallback(Successfullylogin);
function Successfullylogin(){
LoginRadiusSDK.getUserprofile( function( data) {
$( "#dialog" ).dialog("close");
document.getElementById("profile").innerHTML = JSON.stringify(data);
});
}

Full Example:

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://hub.loginradius.com/include/js/LoginRadius.js"></script>
<script type="text/javascript"> var options={};
options.login=true;
LoginRadius_SocialLogin.util.ready(function () {
$ui = LoginRadius_SocialLogin.lr_login_settings;
$ui.interfacesize = "";
$ui.apikey = "<LoginRadius_API_Key>";
$ui.callback="";
$ui.lrinterfacecontainer ="interfacecontainerdiv";
LoginRadius_SocialLogin.init(options); }); </script>
<script src="LoginRadiusSDK.2.0.0.js" type="text/javascript"></script>
<script>

function Login(){
$( "#dialog" ).dialog();
LoginRadius_SocialLogin.init(options);
}

LoginRadiusSDK.setLoginCallback(Successfullylogin);
function Successfullylogin(){
LoginRadiusSDK.getUserprofile( function( data) {
$( "#dialog" ).dialog("close");
document.getElementById("profile").innerHTML = JSON.stringify(data);
});
}

</script>
</head>
<body>
<button onclick="Login();">Login</button>
<div id="dialog" style="display:none;"title="Login Popup">
<div id="interfacecontainerdiv" class="interfacecontainerdiv"></div>
</div>
<div id="profile"> </div>
</body>
</div>
Karl Wittig

About 

Karl is a Software Developer at LoginRadius, the rapidly-expanding social login and sharing provider. He graduated from NAIT with a diploma in Computer Engineering Technologies. He enjoys snowboarding, watching TV series and gaming.