Angular-dreamfactory, error 400 (Bad Request) ionic.bundle.js:18526

Hi,
I am using ionic in my project which about to complete, but i get strange type of response from angular-dreamfactory. On authentication process, i send http request to dsp which is in our server, for getting data from api services. All works well, even i can see the response body in chrome tool, but the function

DreamFactory.api.user.login(postData,
        function (data) {
            UserService.setUser(data);
            $scope.mediaLoading(2);
            $rootScope.$broadcast('user:loggedIn');
            $scope.loginModal.hide();
            //insert other request for data to fill app
        },
        function (errors) {
        alert("in errors");
            if (errors.error[0].code != 400) {
                
                $scope.mediaLoading(2);
                  ...

when a user enters incorrect login, it fails properly, but in second attempt in just stops responding in the app inside DreamFactory.api.user.login(postData,…) and doesnt seem to come out.
For reference:
__in 1st attempt console gives:
POST http://dsp.oshno.tj:7070/rest/user/session 400 (Bad Request) dsp.oshno.tj:7070/rest/user/session:1 // as expected
__in 2nd attempt:
http://domain_name/rest/user/session 400 (Bad Request) ionic.bundle.js:18526 // and then hangs in that function
//not expected

Please, anybody help on injecting DreamFactory properly ???

Hi @Bahodur, it looks like by the time the user makes the second login attempt, you’ve moved outside the scope of where you had your DreamFactory URL and method(s) defined. Because the first attempt is to your actual DreamFactory instance:

POST http://dsp.oshno.tj:7070/rest/user/session

But the second attempt is to a bogus or placeholder URL, and appears to be a GET instead of a POST (which is probably why it hangs up there waiting)

http://domain_name/rest/user/session

You can check the DreamFactory logs ({install directory}/platform/log/web.*.log) to be certain whether or not the second login call makes it there or not. (Every call that makes it to DreamFactory is logged.)

Hi @jeffreystables, thanks for reply, sorry for late response…
Actually i tried and checked all possible ways, but it seemed that the GET request is the same for all times first second, third… but after the first handle, the second request is handled by SDK js, and it breaks the request call.
So i came up with another solution of using Javascript SDK instead of AngularJS, because later i realised in git hub that AngularJS is outdated than Javascript so came up with working functionalities just by creating a .factory service to return the window.df object,
and that works WELL :smile:
BUT … unfortunately after build for android it seems that the js scripts of SDK are not ready in the device! i had the same failure experience by using AngularJS SDK, after build it seems that API:ready event is never reached…
and now i am stuck in this… any help please ???

sdk-init.js properly raises the apiReady event, and app.js receives the event, in the SDK. Beyond that I think you’re on the level of troubleshooting your code.

Do you have something similar to sdk-init.js in your implementation that raises the apiReady event for your app to consume?

yes you are right, actually i went through blog that described to fill sdk-init.js with dsp urs etc…
and also i saw the code and it has an event that to be called but however i couldnt catch the event on ionic by using $on(‘apiReady’, function(){}); … so i just used a timeout to wait for a ready state…
and that worked fine by using try/catch block to resolve the loading error in any case…
Even the app works without errors in the ionic lab chrome browser…
the problem is that i cant catch the apiReady event in AngularJS… therefore not working on android (as far as i think!).
May be some cordova plugin is required for that??? any idea ?? for now, i am planning to try angular $resource to make api calls, but that is too much of code handling :frowning: , any suggestion plz??

Hi @jeffreystables, now i realize that the SDK doesnt even set the http headers for the access-tokens once the user is logged in… :frowning:
May be i am just not able to understand this SDK the way to use…
Could you guide me with any sample (beside the available blog ) that uses $resource approach to set headers and call api methods ??? thanks in advance

Hi @Bahodur, I have reviewed and tested all three of these in pure AngularJS and they all pass the proper headers and throw and catch the API ready event without issue. Perhaps there is a layer in Ionic that is intercepting or obfuscating this functionality, as opposed to how it works in pure AngularJS. Either that, or some issue in your own code, must be the problem; as I have verified it’s working in our examples.

I’m posting the links here to ensure we’re on the same (web)page:

Angular screencast

Angular CRUD app example

Angular trivia app example

Hi, thanks for set of examples !!
Actually i had gone through some of them before, like trivia app from which i referred before getting such problems.
Let me check deeply into my code then i come back after trablshooting :sweat_smile:
Thanks a Lot !

Hi, thanks a lot for the set of examples … (i dont know why but my replies a taken as spam in here!!!)
is there anyone from ionic team to contribute here, may be something with ionic interception or cordova …?? because the code runs somewhat fine on local server , after build the app cant get swagger … anyone @mhartington ?

1 Like

Hey @jeffreystables, how are you?
I am here just to close this issue so to help others stuck in such problem :smile:
After research i came up with [mobile app example][1] which was very usefull to see the dreamfactory.js script. I realized that in ionic apps we are more concerned with deviceready event and that was the point to be targetted.
So, by using swagger.js and the shred.bundle.js which are available in that [app][1] project scripts, include in index.html. Also, sdk-init.js had to be removed because it will conflict.
Further, make a .factory in ionic service as below:

    .factory('df', [function() {
    //replace this dsp_url1 with yours ( leave the /rest/api_docs part )
    var dsp_url = "http://dsp_url1/rest/api_docs";
    //replace this app_name1 with yours
    var app_name = "app_name1";
    var df;
    //These are are necessary to communicate with the DreamFactory API
    window.authorizations.add("X-DreamFactory-Application-Name", new ApiKeyAuthorization("X-DreamFactory-Application-Name", app_name, "header"));
    window.authorizations.add('Content-Type', new ApiKeyAuthorization('Content-Type', 'application/json', 'header'));

    // Here I grab all the apis available, assigning them to a global df object
    df = new SwaggerApi({
        url: dsp_url,
        supportedSubmitMethods: ['get', 'post', 'put', 'patch', 'merge', 'delete']
    });
    df.authorizations = window.authorizations;
    df.build();
    return df;
}])

And then use the service in your controller as:

    cred2.email="myemail@mailing.com";
     cred2.password="mysecretPa$$w0rd";
    var postData = {
            body: cred2
        }
$ionicPlatform.ready(function () {
        DreamFactorySDK.apis.user.login(postData,
        function(result){
         //success function
        alert("result:"+JSON.stringify(result));
        apiToken(result.record.sessionId);//call function to set http header token
        },
       function(errors){
        //failure function
         alert("errors:"+JSON.stringify(errors));
       });
     });

Once the user is logged in successfully, the server should return sessionId which will be used as access token for next api calls. (configured by Roles and CORS)
So, the token should be included in the http default headers, like this :

var apiToken = function(sessionId){
 window.authorizations.add("X-DreamFactory-Session-Token", 
  new ApiKeyAuthorization("X-DreamFactory-Session-Token", 
  sessionId, "header")); 
}

And that’s it !! Enjoy the available hardwork of DreamFactory and Ionic Teams as I do :smile:
Regards.
[1]: https://github.com/dreamfactorysoftware/mobile-dreamfactory-app

2 Likes