ngCordova inAppBrowser, how to return info to app


#1

Hello,

I have an app that process credit card payments with a bank, , to do this I open a inAppBroser to a specific url that has all the credit card info, and url parameter.

After the process , a get an html with the following form, that has info that I need in my app ECI and EXA value.
As you can see there it is the url parameter I told you about before, this form gets submited on load to that url

<form action="url parameter" method="POST">
	<input type="hidden" id="ECI" name="ECI" value ="1234">
	<input type="hidden" d="EXA" name="EXA" value ="1234">
</form>

Does anybody has an idea of how to handle this, I’ve been trying using localstorage based on http://blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova’s-inappbrowser. with no luck.

Thanks

Alberto


#2

can you post your code? The blog post seems pretty straight forward so I am not clear what you might be doing wrong if I cannot see your code.


#3

i need some help with something like this too…
i have an API that redirects user to facebook, facebook redirects to the API with user info, i create the user on my database and after that, the response is a JSON with user info and access token. i’m opening the API login page with inAppBrowser so the user can be redirected to facebook and fill the login form and authorize my app to get the info.
How can i get the JSON response (page body?) when the login flow finish?


#4

Hello Aaron,

Thank you for your reply. Basically I am trying to make work TJ VanToll’s example, to make sure that I am in the right way.

It does not work in my browser chrome , It stores the name in local storage but I am not able to get it in the parent browser. Testing it on the phone, I works the same, I am able to open the browser but after I enter the name and click submit it does not close the browser.

thank you for your help.

Alberto Lopez

(function() {
  var injectParams = ['$scope', 'purchaseFactory', '$rootScope', '$ionicPlatform', '$cordovaInAppBrowser'];
  var CreditCardController = function($scope, purchaseFactory, $rootScope, $ionicPlatform, $cordovaInAppBrowser) {

var ref = null;

var options = {
  location: 'yes',
  clearcache: 'yes',
  toolbar: 'yes'
};
console.log('entro a otra.js controller')






$scope.openBrowser = function() {
  $ionicPlatform.ready(function() {
    //   document.addEventListener("deviceready", function() {
    console.log('open browser')
    var options = {
      location: "yes"
    };

    $cordovaInAppBrowser.open('http://jsfiddle.net/tj_vantoll/K2yqc/show', '_blank', options).then(function() {
      console.log("InAppBrowser opened");
    }, function(error) {
      console.log("Error: " + error);
    });

  });
};

document.addEventListener('deviceready', function() {

  $rootScope.$on("$cordovaInAppBrowser:exit", function(event, result) {
    alert("Exited Browser");
  });


  $rootScope.$on("$cordovaInAppBrowser:loadstop", function(event, result) {
    console.log('se ejecuto el listener')
      // Clear out the name in localStorage for subsequent opens.
    cordovaInAppBrowser.executeScript({
      code: "localStorage.setItem( 'name', '' );"
    });

    // Start an interval
    var loop = setInterval(function() {
      //
      // Execute JavaScript to check for the existence of a name in the
      // child browser's localStorage.
      cordovaInAppBrowser.executeScript({
          code: "localStorage.getItem( 'name' ); console.log('entro aqui')"
        },
        function(values) {
          var name = values[0];
          console.log('entro aqui')
            // If a name was set, clear the interval and close the InAppBrowser.
          if (name) {
            clearInterval(loop);
            cordovaInAppBrowser.close();
            //$("h1").html("Welcome " + name + "!");
          }
        }
      );
    });
  })
}, false);

  };
  CreditCardController.$inject = injectParams;
   angular.module('elizondo').controller('CreditCardController', CreditCardController);
}());

#5

@lamberts put me on the right direction but I was able to do this without an interval

document.addEventListener('deviceready', function () {
  var ref = window.open(externalProviderUrl, "_blank", "location=no");

  ref.addEventListener('loadstart', function (event) {
    //auto-complete.html stores the fragment and removes it from the url
    if (event.url.slice(-1) == "#") {
        ref.addEventListener("loadstop", function () {
            ref.executeScript({ code: 'fragment' }, function (fragment) {
                $scope.authCompletedCB(fragment[0]);
                //ref.close();
            });
        });
     }
 });
});

It works because the loadstart event fires multiples times whenever the url changes. So what I did was redirect the popup to a standalone html file which has a script tag which parses out the redirect fragment and then removes it from the url, causing loadstart to fire with “#” as the last character.

  var fragment = common.getFragment();
  window.location.hash = fragment.state || '';

The executeScript simply returns the “var fragment” and we can do whatever from there.