Getting Started

Developing and managing an online identity solution continues to be challenging in terms of addressing security concerns, performance issues, or the high cost of the development and maintenance of the solution. LoginRadius provides a complete User Registration platform that can be implemented on any application.

This document covers how you can utilize our various features and functionalities via using JavaScript. We have explained the implantation of LoginRadius via JS in detail below, you can customize the provided code as per your need while implementing it on your web property.

Installation

Importing References

To import LoginRadius JavaScript interfaces on your page, add the following script reference to your page. By adding the below URL, you will always get the latest most up-to-date version of the LoginRadiusV2.js via our CDN.

https://auth.lrcontent.com/v2/js/LoginRadiusV2.js

If you are looking to have control over which version of the library you’re using, you can either download and serve your own copy of LoginRadiusV2.js. You can also specify any desired version (like 3.10.0) directly in the URL using the following format:

https://auth.lrcontent.com/v2/LoginRadius-vX.Y.Z.js

Here, each letter represents the type of change. For example, X, Y, and Z are Major, Minor, and Patch versions respectively as per Semantic Versioning. Let’s say if you want to access LoginRadiusV2.js version 3.10.0 then the following URL will work for you:

https://auth.lrcontent.com/v2/LoginRadius-v3.10.0.js

Note: LoginRadius may retroactively push urgent security updates to previous versions of LoginRadiusV2.js.

Instantiating LoginRadius Object

After adding the reference to the page, make sure to include the fallback JS for instantiation of LoginRadiusV2 singleton. It can be instantiated by defining the commonOptions parameter and calling creating a new instance of the LoginRadiusV2 Object.

<script type='text/javascript'>
    if (typeof LoginRadiusV2 === 'undefined') {
        var e = document.createElement('script');
        e.src = 'https://auth.lrcontent2.com/v2/js/LoginRadiusV2.js';
        e.type = 'text/javascript';
        document.getElementsByTagName("head")[0].appendChild(e);
    }
    var lrloadInterval = setInterval(function () {
        if (typeof LoginRadiusV2 != 'undefined') {
            clearInterval(lrloadInterval);
            LoginRadiusV2JsLoaded();
        }
    }, 100);
    function LoginRadiusV2JsLoaded() {
        var commonOptions = {};
        commonOptions.apiKey = "<your loginradius api key>";
        commonOptions.hashTemplate= true;
        commonOptions.sott ="<Get_Sott>";
        commonOptions.verificationUrl = window.location;//Change as per requirement
        var LRObject= new LoginRadiusV2(commonOptions);
    }
</script>

A detailed listing of all available parameters (and the actions they affect) for the commonOptions object is shown below:

Name Required Action
apiKey (String) Yes All
sott (String) Yes Registration
verificationUrl (URI String) Yes Registration, Login, Resend Email Verification, Add Email, Verify Email, Social Login
appName (String) No All
hashTemplate (Boolean) No Social Login, Link Account, Custom Interface
smsTemplateInstantOTPLogin (String) No Login
customObjectName (String) No Custom Object
callbackUrl (Encoded URI String) No Social Login, Custom Interface
debugMode (Boolean) No All
deleteUrl (URI String) No Delete User
maskSensitiveInput (Boolean) No Login, Registration
formValidationMessage (Boolean) No All
periodicPasswordReset (Boolean) No Login
showTwoFactorOnProfile (Boolean) No Profile Editor
v2Recaptcha (Boolean) No Registration
v2RecaptchaSiteKey (String) No Registration
v2RecaptchaLanguage (String) No Registration
invisibleRecaptcha (Boolean) No Registration
accessTokenResponse (Boolean) No Login, Social Login
appPath (String) No SSO Login, Logout
callbackInsideSameWindow (Boolean) No Social Login, Custom Interface, Link Account
callbackType (String) No Social Login, Custom Interface
enableHeaderSott (Boolean) No Registration
existPhoneNumber (Boolean) No Registration
formRenderDelay (Int) No Registration
passwordLength (Object) No Registration, Reset Password, Forgot Password
passwordlessLogin (Boolean) No Passwordless Login
passwordlessLoginOTP (Boolean) No Login
integrationName (String) No Login, Social Login, SSO Login
projectionFields (JSON Object) No All
providerCountry (String) No Social Login, Custom Interface, Link Account
providersList (Array) No Social Login, Custom Interface, Link Account
resetPasswordConfirmationEmailTemplate (String) No Reset Password
resetPasswordEmailTemplate (String) No Reset Password
deleteUserEmailTemplate (String) No Delete User
addEmailTemplate (String) No Add Email
onetouchLoginEmailTemplate (String) No One Touch Login
resetPasswordUrl (URI String) No Reset Password
smsTemplate2FA (String) No Login
smsTemplate2FAWelcome (String) No Login
smsTemplatePhoneVerification (String) No Registration
smsTemplateWelcome (String) No Registration
smsTemplateOneTouchLoginWelcome (String) No One Touch Login
smsTemplateOneTouchLogin (String) No One Touch Login
smsTemplateForgot (String) No Forgot Password
smsTemplateUpdatePhone (String) No Update Phone
termsAndConditionHtml (String) No Registration
tokenExpire (Boolean) No Logout
tokenType (String) No Login, Social Login, SSO Login
unLinkAccountCallbackUrl (Encoded URI String) No Unlink Account
verificationEmailTemplate (String) No Registration
welcomeEmailTemplate (String) No Registration
promptPasswordOnFirstLoginForSocial (Boolean) No Registration
autoFilledFieldForSocial (Boolean) No Login
otpEmailVerification (Boolean) No Registration, Reset Password
loginOnEmailVerification (Boolean) No Verify Email
promptPasswordOnSocialLogin (Boolean) No Social Login
usernameLogin (Boolean) No All
phoneLogin (Boolean) No All
twoFactorAuthentication (Boolean) No Login, Registration, Profile Editor
optionalTwoFactorAuthentication (Boolean) No Login, Registration, Profile Editor
googleAuthentication (Boolean) No Profile Editor
askEmailForUnverifiedProfileAlways (Boolean) No All
disabledEmailVerification (Boolean) No All
optionalEmailVerification (Boolean) No All
stayLogin (Boolean) No Login
askRequiredFieldForTraditionalLogin (Boolean) No Login
displayPasswordStrength (Boolean) No Registration, Reset Password, Forgot Password
securityQuestionsCount (Number) No All
duplicateEmailWithUniqueUsername (Boolean) No Registration
isMobile (Boolean) No All
noCallbackForSocialLogin (Boolean) No Social Login
disableAccountLinking (Boolean) No Link Account
customDomain (String) No All
securityQuestionEnabled (Boolean) No All
askRequiredFieldsOnPasswordLessLogin (Boolean) No One Touch Login
customizeSocialPopup (String) No Social Login
askOptionalFieldsOnRegistration (Boolean) No Registration
tencentCaptcha(Boolean) No Registration, Login
tencentCaptchaAsFallback(Boolean) No Registration, Login
tencentCaptchaAppid(String) No Registration, Login
progressiveProfilingTraditional(Boolean) No Progressive Profiling
askOptionalFieldsOnProgressiveSteps (Boolean) No Progressive Profiling
verifyEmailByOTP(Boolean) No Verify Email
passwordlessLoginEmailTemplate(String) No Passwordless Login
autoFilledFieldForTraditional(Boolean) No Login
preventVerificationEmail(Boolean) No Registration
disableButtonOnsubmit(Boolean) No All
enableSubmitOnSuccess(Boolean) No All
vNextUX (Boolean) No Registration
disableResendOTPButton (Boolean) No Smart Login, One Touch Login, Login, Create Two Factor Authentication, Update Phone, Forgot Password
disableResendOTPButtonDelay (String) No Smart Login, One Touch Login, Login, Create Two Factor Authentication, Update Phone, Forgot Password

Initialize Actions

Actions are initialized by calling the LRObject.init() method. This method takes two parameters. The signature of this method is:

LRObject.init(action, options);

Here is a table outlining the type and description of each parameter.

Parameter Type Description
options Object Initialization options. Refer below for the table of options available.
action String Action to initialize. Refer below for the table of actions available.

A detailed table for the options parameter from above:

Parameter Required Description
container (String) Yes Id/class of div or any HTML element where the form of this action will be rendered. (Not for SSO)
templateName (String) Yes Id of Script which contains Social Login/Account Linking Template
classPrefix (String) No This is an optional parameter, this is required when using two forms on the same page, example values are “registration-form1”, “registration-form2” etc.
onSuccess (Function) Yes Callback function to be called on a successful action. Signature of this callback function should be function(response, data) {} because on success response will be returned and data is original form data as JSON type.
onError (Function) No Callback function to be called on error (validation error, username exists, CAPTCHA error, etc.) of action. The signature of this callback function should be function(errors) {} because on error, errors will be returned and this will be an array of errors.

A detailed table for the actions parameter from above:

Parameter Type Description
login String Perform login action.
registration String Perform registration action.
resetPassword String Perform reset password action.
forgotPassword String Perform forgot password action.
verifyEmail String Perform email verification action.
changePassword String Perform change password action when the consumer is logged in.
socialLogin String Perform social login with User Registration.
linkAccount String Perform account linking action when the consumer is logged in.
unLinkAccount String Perform account unlinking action when the consumer is logged in.
profileEditor String Perform profile update action.
deleteUser String Send delete consumer email.
deleteUserConfirm String Confirm delete consumer functionality.
updatePhone String Perform update phone action.
<!— changeUsername String
resendVerificationEmail String Perform resend email verification action.
addEmail String Perform add email action when the consumer is logged in.
removeEmail String Perform remove email action when the consumer is logged in.
createTwoFactorAuthentication String Perform Two-Factor Authentication action.
onetouchLogin String Perform no registration Passwordless Login.
updateSecurityQuestion String Updates answers to the given security questions when the consumer is logged in.
resetPasswordBySecurityQuestion String Resets password using security questions.
smartLogin String Email prompt Smart Login.
passwordlessLoginValidate String Passswordless Login interface.
backupCodeButton String Show Backup Code button.
resetBackupCodeButton String Show Reset Backup Code button.

Registration

To implement the registration form interface, use the LRObject.init method with the registration action. The following code example can be used for reference:

var registration_options = {}
registration_options.onSuccess = function(response) {
//On Success
console.log(response);
};
registration_options.onError = function(errors) {
//On Errors
console.log(errors);
};
registration_options.container = "registration-container";
LRObject.util.ready(function() {
LRObject.init("registration",registration_options);
})
<div id="registration-container"></div>

Note: The success callback will return a JSON object {IsPosted: true} as the action’s response.

Registration Form Schema

To provide a custom schema for the registration form, the following code example can be used for reference. It will override the default schema.

LRObject.registrationFormSchema  = [
    {
        "type": "string",
        "name": "emailid",
        "rules": "valid_email|required",
        "options": "",
        "DataSource": null,
        "ParentDataSource": null,
        "Parent": "",
        "Checked": true,
        "display": "Email Id",
        "permission": "w"
    },
    {
        "type": "password",
        "name": "password",
        "rules": "min_length[6]|max_length[32]|required",
        "options": "",
        "DataSource": null,
        "ParentDataSource": null,
        "Parent": "",
        "Checked": true,
        "display": "Password",
        "permission": "w"
    },
    {
        "type": "string",
        "name": "firstname",
        "rules": "",
        "options": "",
        "Parent": "",
        "Checked": true,
        "display": "First Name",
        "permission": "w"
    }
]

Login

To implement the login interface, use the LRObject.init method with the login action. The following code example can be used for reference:

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);
})
<div id="login-container"></div>

Note: The success callback will return a JSON object {Profile: Object, access_token: "xxxxxxxxxxxxxxxxxxxxxxxxxx", expires_in: "2017-01-28T08:41:59.10265Z"} as the action’s response.

The object contains the consumer’s profile, access token, and expiry time.

Social Login

To implement the social login interface, use the LRObject.init with sociallogin action. Please have a look at the following sections for more details.

Social Login Interface

A custom interface needs to be defined as per the code shown below:

var custom_interface_option = {};
custom_interface_option.templateName = 'loginradiuscustom_tmpl';
LRObject.util.ready(function() {
LRObject.customInterface(".interfacecontainerdiv", custom_interface_option);
});
<div id="interfacecontainerdiv" class="interfacecontainerdiv"></div>

Then, a template should be applied for the interface. It can be done with the help of following code:

<script type="text/html" id="loginradiuscustom_tmpl">
<a class="lr-provider-label" href="javascript:void(0)" onclick="return <#=ObjectName #>.util.openWindow('<#=Endpoint #>');" title="<#=Name #>" alt="Sign in with <#=Name #>">
    <#=Name #>
</a>
</script>

Handling the Social Login Response

When the consumer logs in with the selected social provider, a social profile of the consumer is returned as a response. If the returned profile is missing required registration fields (For example, logging in with Twitter doesn’t return email which is required by default), it will prompt a form to let the consumer input the needed information. If the email is missing from the profile, the consumer will be required to verify their email address as well. Refer to the following code for more details.

var sl_options = {};
sl_options.onSuccess = function(response) {
//On Success
//Here you get the access token
console.log(response);
};
sl_options.onError = function(errors) {
//On Errors
console.log(errors);
};
sl_options.container = "sociallogin-container";

LRObject.util.ready(function() {
LRObject.init('socialLogin', sl_options);
});
<div id="sociallogin-container"></div>

Note: The success callback will return a JSON object {Profile: Object, access_token: "xxxxxxxxxxxxxxxxxxxxxxxxxx", expires_in: "2017-01-28T08:41:59.10265Z"} as the action’s response.

The object contains the consumer’s profile, access token, and expiry time.

Forgot Password

To implement the forgot password interface, use the LRObject.init method with the forgotPassword action. The following code example can be used for reference:

var forgotpassword_options = {};
forgotpassword_options.container = "forgotpassword-container";
forgotpassword_options.onSuccess = function(response) {
// On Success
console.log(response);
};
forgotpassword_options.onError = function(errors) {
// On Errors
console.log(errors);
}

LRObject.util.ready(function() {
LRObject.init("forgotPassword", forgotpassword_options);
});
<div id="forgotpassword-container"></div>

Note: The success callback will return a JSON object {IsPosted: true} as the action’s response.

Reset Password

After the forgot password operation, there might be a need for reset password interface. To implement the reset password interface, use the LRObject.init method with the resetPassword action. The following code example can be used for reference:

var resetpassword_options = {};
resetpassword_options.container = "resetpassword-container";
resetpassword_options.onSuccess = function(response) {
// On Success
console.log(response);
};
resetpassword_options.onError = function(errors) {
// On Errors
console.log(errors);
}

LRObject.util.ready(function() {
LRObject.init("resetPassword", resetpassword_options);
});
<div id="resetpassword-container"></div>

Go Back to Home Page