Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Login to AEM6.1 using ajax call

Nitin_dev
Level 2
Level 2

I have been trying to login to AEM6.1 using ajax post but I have been continuously getting:

OPTIONS http://localhost:6102/bin/testupload
XMLHttpRequest cannot load http://localhost:6102/bin/testupload. Response for preflight has invalid HTTP status code 403 

I already tried to configure the CSRF and Referrer filter setting by removing POST and allowhost configuration.
Basically I need to upload some data into CRX using POST servlet from a 3rd party application. thus first I need to login and then upload to crx using ajax call.

For testing purpose, at the moment I am using a simple HTML file suing ajax call to AEM.

I am using chrome extension "Allow-Control-Allow-Origin" so that the request should send "Origin: http://evil.com/" instead of null.

function uploadToAEM(paths){ var username="admin"; var password="admin"; console.log("path =  " + paths); $.ajax({ url: 'http://localhost:6102/bin/testupload', beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password")); }, crossDomain: true, headers: { 'Authorization': 'Basic '+ btoa('admin:admin'), 'Access-Control-Allow-Origin': 'http://evil.com/', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE' }, method: 'POST', data: {path: paths}, success: function(data){ console.log('succes: '+data); } });

when I execute the above code, I see following message in error.log:

*INFO* [qtp256628383-5791] org.apache.sling.auth.core.impl.SlingAuthenticator getAnonymousResolver: Anonymous access not allowed by configuration - requesting credentials

1 Accepted Solution
smacdonald2008
Correct answer by
Level 10
Level 10

If HTTP Post does not work - then this looks like a good workaround: " I used both GET and POST for my servlet so it first calls the GET and from GET it then call to POST method to upload data "

View solution in original post

7 Replies
smacdonald2008
Level 10
Level 10

Are you trying to write a Login component so user can log into a secure AEM site? 

See this Ask the AEM Community Session where Justin talks about how to do this: 

https://helpx.adobe.com/experience-manager/using/secure_sites.html

The link to the webinar is at the start of the article. There is also sample code  in GitHub. 

Tuhin_Ghosh
Level 7
Level 7

This article was really helpful.

Regards

Tuhin

Nitin_dev
Level 2
Level 2

Thanks for your response Scott. No, I am not using any UI for login into AEM6.1 but trying to authenticate into CQ before i can use POST. After some more research I found a way to do this by JSONP to resolve Cross Domain issue. But JSONP only works for GET with a callback function, thus I used both GET and POST for my servlet so it first calls the GET and from GET it then call to POST method to upload data. Not sure if it is recommended approach tough ?

smacdonald2008
Level 10
Level 10

Are you performing POST/GET from an outside client? 

Nitin_dev
Level 2
Level 2

Hello Scott, I need to perform POST but as I said in my last reply, I am now performing GET request.

smacdonald2008
Correct answer by
Level 10
Level 10

If HTTP Post does not work - then this looks like a good workaround: " I used both GET and POST for my servlet so it first calls the GET and from GET it then call to POST method to upload data "

View solution in original post

Nitin_dev
Level 2
Level 2

Here is the sample code:

 

function uploadToAEM(paths){ var username="admin"; var password="admin"; console.log("path =  " + paths); var tok = 'admin' + ':' + 'admin'; hash = btoa(tok); authInfo = "Basic " + hash; $.ajax({ url: "http://localhost:4502/bin/testupload", beforeSend: function (xhr) { xhr.setRequestHeader ("Authorization", authInfo); }, type: "GET", data: {path: paths}, async: false, crossDomain: true, contentType: 'multipart/form-data', dataType: "jsonp", success:  function(html){ console.log(html); }, error: function(html){ console.log('error'); } });