Login to AEM6.1 using ajax call

[Former Community Member]

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

[smacdonald2008]

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]

This article was really helpful.

Regards

Tuhin

[Former Community Member]

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]

Are you performing POST/GET from an outside client? 

[Former Community Member]

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

[smacdonald2008 · Accepted solution]

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 "

[Former Community Member]

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'); } });