Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

logoAsync

The latest news in the world of engineering.

Identity and Access Management (IAM), including security and customer experience.

Visit Blog
Fuel

Grow your business to millions.Engage and retain your customers.

Visit Blog

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…

Karl Wittig
Karl Wittig
November 09, 2015
2 min read

Free, Secure and Trusted Way to Authenticate Your Visitors

Add login to your website in 5 minutes completely for free!

Free Sign UpNo hidden costs. No credit card needed.

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:

<!--

-->

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

<!--
var options={};
options.login=true;
LoginRadius_SocialLogin.util.ready(function () {
    $ui = LoginRadius_SocialLogin.lr_login_settings;
    $ui.interfacesize = "";
    $ui.apikey = "";
    $ui.callback="";
    $ui.lrinterfacecontainer ="interfacecontainerdiv";
    LoginRadius_SocialLogin.init(options);
});
-->

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.

<!--Login

    

 -->

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:

<!--




 var options={};
options.login=true;
LoginRadius_SocialLogin.util.ready(function () {
$ui = LoginRadius_SocialLogin.lr_login_settings;
$ui.interfacesize = "";
$ui.apikey = "";
$ui.callback="";
$ui.lrinterfacecontainer ="interfacecontainerdiv";
LoginRadius_SocialLogin.init(options); }); 


 
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);
    });
}
 
Login
 

 
-->


LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptReactNodeJsAuthenticationCSSSecurityC#OAuthGo

Do you want a free authentication solution?

Add the world's most secure, reliable and easy to implement user authentication solution on your applications at $0Get Started Free

Karl Wittig

Karl Wittig

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.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces