[REST] Facebook Login return HTML response

Hello,

In my cordova app I use the native facebook plugin to handle all the authorization token and then I call the Login With Facebook SDK. I’m not using the JS SDK because it does not works inside a cordova app (ONLY social login does not work)

The login works perfectly in fact the user is created on the db. However the response of the REST API is a JSON inside an HTML page, so I’ve to parse the HTML to extract user information.

This is the way I call the REST API



var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://api.backendless.com/v1/users/social/facebook/sdk/login", true);
            xhr.setRequestHeader('application-id', Backendless.applicationId);
            xhr.setRequestHeader('secret-key', Backendless.secretKey);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('application-type', 'REST');
            xhr.onreadystatechange = function() {
              
                if (this.readyState == 4 && this.status == 200) {
                    console.log(this);
                }
            };
            var body = {
                accessToken: params.accessToken,
                fieldsMapping: params.facebookFieldsMapping
             };


            xhr.send(JSON.stringify(body));

This is the response

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
    window.setTimeout( function ()
                       {
                           if(window.opener)
                                window.opener.postMessage( JSON.stringify( {"birthday":"11/13/1997","image":null,"lastLogin":"Fri Dec 09 12:43:52 UTC 2016","gender":"male","created":"Fri Dec 09 12:43:52 UTC 2016","ownerId":"XXXXXXXXXX","__meta":"{\"relationRemovalIds\":{},\"selectedProperties\":[\"birthday\",\"image\",\"gender\",\"created\",\"ownerId\",\"__updated__meta\",\"password\",\"name\",\"___class\",\"id\",\"updated\",\"objectId\",\"email\"],\"relatedObjects\":{}}","user-registered":true,"name":"XXXXXXXXXXXXXXXXX","___class":"Users","id":"XXXXXXXXXXXXXX","user-token":"XXXXXXXXXXXXXXXXXXXXXX","updated":null,"objectId":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX","email":"XXXXXXXXXXXXXXXXXXXXX"} ), 'null' );
                           else
                                parent.postMessage( JSON.stringify( {"birthday":"11/13/1997","image":null,"lastLogin":"Fri Dec 09 12:43:52 UTC 2016","gender":"male","created":"Fri Dec 09 12:43:52 UTC 2016","ownerId":"XXXXXXXXXXXXXXXXXXXXXXXXXXXX","__meta":"{\"relationRemovalIds\":{},\"selectedProperties\":[\"birthday\",\"image\",\"gender\",\"created\",\"ownerId\",\"__updated__meta\",\"password\",\"name\",\"___class\",\"id\",\"updated\",\"objectId\",\"email\"],\"relatedObjects\":{}}","user-registered":true,"name":"XXXXXXXXXXXXXXXX","___class":"Users","id":"XXXXXXXXXXXXX","user-token":"XXXXXXXXXXXXXXXXXXXXX","updated":null,"objectId":"XXXXXXXXXXXXXXXXXXXXXXXX","email":"XXXXXXXXXXXXXXXXXXX"} ), 'null' );
                       }, 0 );
</script>
</body>
</html>"

Any idea how to fix?

I did a very dirty solution to fix it…

first i created an invisible iFrame, then I receive the response from Backendless, I replace all occurencies of the origin (that is ‘null’) with my local origin.

After that I create a listener for the message, I put the modified response on the iFrame, I wait for the message (handling the origin in case is a browser or a mobile device), parse it, extract the user and save it…

It is a very dirty solution so if you can help to find a better one I would be grateful :slight_smile:

Anyway this is the solution I found

 <iframe height="0px" id="fbContentIframe" style="display: none;" width="0px">
 </iframe>
 function makeBackendlessFbLogin(params, success, error) {
 var xhr = new XMLHttpRequest();
 xhr.open("POST", "[url=https://api.backendless.com/v1/users/social/facebook/sdk/login]https://api.backendless.com/v1/users/social/facebook/sdk/login"[/url];, true);
 xhr.setRequestHeader('application-id', Backendless.applicationId);
 xhr.setRequestHeader('secret-key', Backendless.secretKey);
 xhr.setRequestHeader('Content-Type', 'application/json');
 xhr.setRequestHeader('application-type', 'REST');
 xhr.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 //console.log(this);
 var iframe = $window.document.getElementById('fbContentIframe');
 _addMessageListener(success);
 iframe.contentWindow.document.open('text/htmlreplace');
 var html;
 if ($window.cordova.platformId == "browser") {
 html = this.response.replace(/\'null\' \)\;/g, "'http://localhost:8000');");
 } else {
 html = this.response.replace(/\'null\' \)\;/g, "'file://');");
 }
 iframe.contentWindow.document.write(html);
 iframe.contentWindow.document.close();
 console.log(iframe);
 //
 }
 };
 var body = {
 accessToken: params.accessToken,
 fieldsMapping: params.facebookFieldsMapping
 };
 xhr.send(JSON.stringify(body));
 }

 function _getUserFromResponse(user) {
 Backendless.LocalCache.set("current-user-id", user.objectId);
 var newUser = new Backendless.User();
 for (var i in user) {
 if (user.hasOwnProperty(i)) {
 if (i == 'user-token') {
 if (Backendless.LocalCache.get("stayLoggedIn")) {
 Backendless.LocalCache.set("user-token", user);
 }
 continue;
 }
 newUser = user;
 }
 }
 return newUser;
 }

 function _addMessageListener(success) {
 Backendless.Utils.addEvent('message', $window, function(e) {
 console.log("RECEIVED MESSAGE:");
 console.log(e);
 var origin;
 if ($window.cordova.platformId == "browser") {
 origin = 'http://localhost:8000';
 } else {
 origin = 'file://';
 }
 if (e.origin == origin) {
 try {
 var result = JSON.parse(e.data);
 if (result && result.objectId && result.name) {
 console.log(result);
 Backendless.LocalCache.set("stayLoggedIn", true);
 success();
 _getUserFromResponse(result);
 }
 Backendless.Utils.removeEvent('message', $window);
 } catch (e) {}
 }
 });
 }

Hi Michele,

thank you for the temporary solution, maybe it helps other users, but anyway we will investigate why you receive HTML instead of json and will resolve this issue. Thanks for patience.

Regards
Stanislav

Hello Stanislaw,

any news about this issue?

for the moment I check each time if the response is JSON or HTML and handle differently in both case, but I hope that will be a fix.

Thanks

Hi Michele,

seems you set in secret-key header JS secret key. You should set there REST secret key. After that everything should be OK.

Regards,
Stanislaw