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