DeveloperDeveloper Pro

Enable Web SSO

Single sign-on (SSO) is the authentication mechanism, which allows consumers to sign in to different applications with a single digital identity. Also, upon signing into one application consumer is signed into another (SSO enabled) application automatically.

Web SSO is a method of browser-based session management that utilizes browser storage mechanisms like sessionStorage, localStorage, cookies to maintain the consumer’s session across your applications.

Note: Web SSO is only available for the developer and higher plans.

LoginRadius Web SSO: A centralized domain managed by LoginRadius Auth Page ( IDX ) is utilized to perform the authentication. When requested, this centralized domain shares the session with authorized applications.

So that the consumers logged in to one application automatically logs into other applications, independent of technology, platform, or domain the consumer is using.

Configuration

Step 1: Whitelist Your Domain

For security reasons, LoginRadius processes the API calls that are received from the whitelisted domains. Local domains (http://localhost and http://127.0.0.1) are whitelisted by default.

To whitelist your domain, in your LoginRadius Dashboard, navigate to Configuration > Whitelist Your Domain and add your domain name:

alt_text

Step 2: Get SSO Token

Now let's get a LoginRadius access_token for SSO as explained below:

Use the SSOLogin action to set the SSO session on a centralized domain managed by LoginRadius (Auth Page (IDX)). ssologinoptions.onSuccess will return the token if a valid access token is already available at the centralized LoginRadius domain. You can write your custom code in ssologinoptions.onSuccess to handle the successful SSO call.

Add the following code to the Index.html file of your Web Application:

// If found activated session, go to the callback/onsuccess function
var ssologin_options= {};

ssologin_options.onSuccess = function(response) {
// On Success
//Write your custom code here
console.log(response);
}; 

LRObject.util.ready(function() {
LRObject.init("ssoLogin", ssologin_options);

});
var login_options = {};
login_options.onSuccess = function (response) {

        //On Success
        console.log(response);


    };
    login_options.onError = function (errors) {
        //On Errors
        console.log(errors);
    };
    login_options.container = "login-container";

    LRObject.util.ready(function () {
        LRObject.init("login", login_options);
    })

Note: You can visit the below URL to check whether you are logged in or not: https://.hub.loginradius.com/ssologin/login

The following JSON response in the console log of your browser will indicate the successful login and active SSO session:

{"token":"xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx","isauthenticated":true}

Step 3: Set SSO Token

Now lets set a LoginRadius access_token for SSO. There are 2 ways to achieve this - Ajax Call or HTTPs Redirect.

Set SSO Token via Ajax Call

To manually set the access_token for SSO via AJAX, make an AJAX call to the following endpoint: https://<LoginRadius Site Name>.hub.loginradius.com/ssologin/setToken

The following are the Query Parameters:

  • token: Pass in the access_token that you desire to set for SSO.

  • apikey: Your LoginRadius API Key.

  • callback: Your AJAX callback method.

Example of an AJAX Call function:

$.ajax({
            type: "GET",
            url: "https://<your lr app name>.hub.loginradius.com/ssologin/setToken",
            dataType: "json",
            data: $.param({
                token: token,
                apikey: "your-API-key"
            }),
            xhrFields: {
                withCredentials: true
            },
            success: function (response) {
                console.log(response);
                //write your code here after setting the token successfully
            },
            error: function (xhr, status, error) {
                console.log(error);
                //write your code here for error handling
            }
        });

Set SSO Token via HTTPs Redirect

In Safari browsers, there is an additional security layer preventing cookies from being modified externally, which restricts the use of JSONP for this use case. As a solution, you can simply use an HTTPs redirect for your Safari consumers.

Do a redirect to the following endpoint:

https://<sitename>.hub.loginradius.com/ssologin/setSafariToken

The following are the Query Parameters:

  • token: Pass in the access_token that you desire to set for SSO.

  • apikey: Your LoginRadius API Key.

  • callback: The callback URL where you would like the redirect the consumer.

Example of a redirect method:

if(safari){ // This is for safari browser, you need to check if your consumer is using safari or not
window.location="https://<sitename>.hub.loginradius.com/ssologin/setSafariToken?token=<accesstoken>&apiKey=<apikey>&callback=<callbackURL>"
}else{
   	Ajax function provided previously
}

Go Back to Home Page