AEM Post Servlet Ajax call fails on first time call when page opened in new browser.

[jineetv21622325]

I have a requirement to post a comment on successful authentication and I'm using AEM login mechanism as below:

1. Login using AJAX call

$(document).ready(function() { if(userName && password) { $.ajax({ type:'POST', url : path[0]+"/j_security_check", data: { j_username: userName, j_password: password, j_validate:"true" }, success: function(data, textStatus, jqXHR){ console.log("passed security authentication"); postCommentFunction(); }, error: function(xhr, textStatus) { console.log(textStatus); } }); } else { //error authentication } }

2. On successful authentication, the postCommentFunction() which is a javascript function is executed which in turns executes an Ajax call to servlet to post a comment.

function postCommentFunction() { var userName=$(".username").val(); var pageUrl = $(".page-url").val(); var pagetitle = $(".page-title").val(); var comment = $(".comments-area").val(); var operation = "comment"; $.ajax({ url : "/bin/likesAndCommentsNotifier", type : "POST", data : {comment:comment, pageUrl:pageUrl, pageTitle:pagetitle, operation:operation, userName:userName}, success : function(data, textStatus, jqXHR) { console.log("postcomment success"); }, error : function(xhr, status, error){ console.log("postcomment error is:" + xhr.responseText + error); } }); }

However, when I first open a new browser and enter the URL and open the page, I click on the login window, enter correct username and password, and on click on submit:

1. The ready function executes the if condition and I see message on console as 'passed security authentication'

2. Then it gives call to postCommentFunction() but executes a error on call to Ajax and returns message as 'postcomment error is: 403 Forbidden. Cannot serve request to /bin/likesAndCommentNotifier in /libs/sling/servlet/errorhandler/default.jsp'

3. When I refresh the page and try again, the postCommentFunction() returns success.

Not sure if this has to do with login token which is created or the Ajax function called inside a JS function called inside a Ajax function.

The case is only when I first open a new browser and try to login the Ajax call inside the function postCommentFunction() fails.

Any pointers will be appreciated greatly.

Thanks,

Jineet

[antoniom5495929]

Hi,

are you using jquery from AEM or custom jquery?

I think this could be a problem related to csrf token.

If you are using custom jquery you need to add a dependency to granite.csrf.standalone clientlib, in order to avoid 403 from AEM [0].

[0] https://docs.adobe.com/docs/en/aem/6-2/develop/security/csrf-protection.html

Let me know.

[leeasling]

You need to update the users information in the browser.  Try the below.  It clears any current information stored in the users profile and reloads it after successful login.

$(document).ready(function() { if(userName && password) { if (CQ_Analytics) { if (CQ_Analytics.ProfileDataMgr) { //Clear the current profile CQ_Analytics.ProfileDataMgr.clear(); } } $.ajax({ type:'POST', url : path[0]+"/j_security_check", data: { j_username: userName, j_password: password, j_validate:"true" }, success: function(data, textStatus, jqXHR){ console.log("passed security authentication"); if (CQ_Analytics) { //Load the users profile CQ_Analytics.ProfileDataMgr.loadProfile(userName); postCommentFunction(); } }, error: function(xhr, textStatus) { console.log(textStatus); } }); } else { //error authentication } }

[jineetv21622325]

I'm using jQuery from AEM itself.

[jineetv21622325]

When I change the second Ajax call method in function postCommentFunction() from POST to GET after adding doGet method in Java Servlet, this works.

Not sure what it has to do with POST.

[antoniom5495929 · Accepted solution]

Are you using AEM from a Dispatcher?

If yes, you need to be sure that dispatcher is configured in order to allow pass of csrf-tocket header and filter allow the following path /libs/granite/csrf/token.json

Otherwise token taked with the token.json is not sent to AEM.