jquery ajax request with authentication

Question

I have a JSP-servlets application which is deployed on tomcat.Now from my html I need to make web(Ajax) call and call the CQ5 webpage(which is entirely running in CQ instance). When i click on submit button, it goes in the error method of ajax call. Here is the code

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://crypto-js.googlecode.com/svn/tags/2.5.4/build/crypto/crypto-min.js"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script type="text/javascript">
  
$(document).ready(function() {
  
 
 $("#myAjaxRequestForm").submit(function(e){
        e.preventDefault();
 });
   
 
 $("#myButton").click(function(e){
          
   //get the form data and then serialize that
         dataString = $("#myAjaxRequestForm").serialize();
   
   

var username = 'admin';
var password = 'admin';
var url = 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json'; 

$.ajax({
    type: 'GET',
    url: 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json',
    dataType : 'json',
    'beforeSend': function(xhr) {
         var bytes = Crypto.charenc.Binary.stringToBytes('admin' + ":" + 'admin');
         var base64 = Crypto.util.bytesToBase64(bytes);
        xhr.setRequestHeader("Authorization", "Basic " + base64); //May need to use "Authorization" instead
    },
    error : function() {
        alert('errro');
    },
    sucess: function(result) {
    alert('done');
    }
    }); 
     }); 
  }); 
</script>
<div id="allContent">
  <div id="myExample">
 <form id="myAjaxRequestForm">  
   <h1> Please enter the Order Information -</h1>
    <label for="orderId">Order Id:</label>
    <input id="orderId" name="orderId" type="text"><br/>
    <br/>
    <label for="zipCode">ZIP Code:</label>
    <input id="zipCode" name="zipCode" type="text"><br/>
    <br/>
    <input id="myButton" type="button" value="Submit">
</form>
</div>
 <div id="ajaxResponse">

</div>
</div>
</head></html>

And what are the errors? `console.log(arguments[0], arguments[1], arguments[2])` — Johan, Jul 20 '13 at 17:25

score 0 · Answer 1 · answered Jul 20 '13 at 19:00

0

Try to change your beforeSend handler a bit and also debug the error:

beforeSend: function (xhr) {
    var base64 = btoa(username + ":" + password);
    xhr.setRequestHeader("Authorization", "Basic " + base64);
},
error: function (jqXHR, textStatus, errorThrown) {
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);       
},

If it doesn't work, please paste the result of those 3 console.log()

answered Jul 20 '13 at 19:00

Hieu Nguyen

8,563
2
36
43

jqXHR- Object { readyState=0, status=0, statusText="error"}, textstatus - error, errorThrown - empty string Can u pls let me know how should i debug it further ?? – Gaurav Jul 20 '13 at 22:25
is this page running on `http://localhost:4502/` as well? otherwise you might have cross domain ajax problem: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain. – Hieu Nguyen Jul 20 '13 at 22:28
I can see the json in the chrome console..but i get the parse error.Jquery17989898 was not called........ – Gaurav Jul 21 '13 at 15:11

score 0 · Answer 2 · answered Jul 21 '13 at 15:14

I can see the json in the chrome console..but i get the parse error.Jquery17989898 was not called.

This is the code ...

var user = 'admin';
var pw = 'admin';
var url = 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json'; 
alert("i1");

var authToken = null;
$.ajax({
    url: 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json',
    type: "POST",
    crossDomain: true,
    dataType: "jsonp",
    data: JSON.stringify({ "Username" : user, "Password" : pw, "Type" : "SaaSGrid"}),
    success: function(data)
    {
        alert("dsadsadsa");
         authToken = data.Token;
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert("jqXHR : " + jqXHR +
        " \n**** text Status : " + textStatus +
        " \n**** text Status : " + errorThrown);
        }
 });

{"textIsRich":"true","jcr:lastModifiedBy":"admin","sling:resourceType":"foundation/components/text","jcr:createdBy":"admin","jcr:created":"Wed Nov 03 2010 00:41:59 GMT-0400","jcr:lastModified":"Fri Nov 05 2010 11:14:54 GMT-0400","jcr:primaryType":"nt:unstructured","text":"

The measure of an exterior angle of a triangle is equal to the sum of the measures of the two interior angles that are not adjacent to it; this is the exterior angle theorem. The sum of the measures of the three exterior angles (one for each vertex) of any triangle is 360 degrees.</p>\n</p>\n"}

score 0 · Answer 3 · answered Jul 28 '13 at 12:04

I think you should explain a bit more your scenario. You are trying to access a page from a CQ5 instance, but authentication for that is probably just needed in an author instance. when accessing a publish instance that page will likely not need any authentication.

Will you always access the author instance? if you will switch to a publish instance later it would be easier to just adjust permissions in CQ5 to make the page public.

score 0 · Answer 4 · answered Aug 06 '13 at 18:51

from a security perspective, this sounds wrong - you are passing user & password to execute on the client side - exposing your authentication.

Better to open up the permissions on the resource so anonymous can write to it (the POST) then pass credentials out.

jquery ajax request with authentication

4 Answers4