Ajax /jQuery based NAM authentication

Ajax /jQuery based NAM authentication

Introduction:


 
There is requirement or need to do Ajax/JQuery based authentication. It is a powerful technique to do authentication/form submit without reloading the browser window. This Cool solution explains how to create Ajax based form login for user authentication.

Minimum requirement to implement this solution is, familiarity with jQuery, a JavaScript library. jQuery is easy to use, because it has many built in library functions.

User login form submission without reloading the browser complete window can be useful in a number of scenarios. For example, you can use it to authenticate without public portal to access protected content.

Form Submission with JQuery


 
Submitting a form without reloading the browser can be done multiple ways. Popular are two ways using submit handler or the click handler. Below shows how to submit a form using the click handler.

<script language="JavaScript">
function imageSubmit()
{
$.post("/nidp/app/login?id=10",
{
Ecom_User_ID: $("#Ecom_User_ID").val(),
Ecom_Password: $("#Ecom_Password").val(),
option:"credentials"
},
function(data,status){
//alert("Data: " + data + "\nStatus: " + status);
var responseStr = data;
var searchStr = 'top.location.href=\''+location.protocol + '//' + location.host;
indexVal = responseStr.indexOf(searchStr);
if(indexVal == -1)
{
$("#resultdiv").text('login failed.');
}
else
{
$("#resultdiv").text("login success");
$("#loginContainer").html("welcome <b>" + $("#Ecom_User_ID").val()+"<b>  <a href='/nidp/app/logout'>logout</a>");
}
});


return false;
}
</script>



In the above script form is pasted to "/nidp/app/login?id=10" where 10 is contract id, wish to execute. This can be a string defined for contract in NAM configuration.
Sample script above handles authentication success and failure. Failure case or success case code need to be modified to your use case.

Deployment:


 
To deploy this sample for testing, download the zip file attached to this article and extract it. Copy the folder to nidp project in IDP same level as jsp folder.

Testing this deployment do access IDP with following url pattern

<nidp base url>/login    Example: https://www.idp.com/login


Sample downloaded from http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/

Download Ajax-based-NAM-authentication.zip
Labels (1)
Attachments

DISCLAIMER:

Some content on Community Tips & Information pages is not officially supported by Micro Focus. Please refer to our Terms of Use for more detail.
Top Contributors
Version history
Revision #:
3 of 3
Last update:
‎2020-01-31 22:07
Updated by:
Micro Focus Contributor
 
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.