Not able to attach event handler in Ionic 2 on InAppBrowser - ionic-framework

I'm very new to Ionic 2 framework and I'm trying to write an app in which I need to open an external URL in an embedded browser (InAppBrowser). I create an InAppBrowser instance and launch the browser. The browser opens and it also opens the link, but I keep getting an error.
Cannot read property 'addEventListener' of undefined
Here's the code that I'm using:
let browser = new InAppBrowser(
"http://www.google.com",
"_blank",
"location=no,hidden=yes",
);
console.log(browser);
browser.on('loadstop').subscribe(
(res) => {
// Handle url checking and body parsing here
},
(error) => {
// Handle error here
}
);
browser.on('deviceready').subscribe(
(res) => {
browser.show();
console.log(res);
},
(error) => {
console.log(error);
}
);
I don't understand what I'm doing wrong. I want to check what the url is everytime the browser loads a webpage and if it is the desired web page then parse the body of the browser and then close it.
I'm trying to integrate a payment gateway. So basically I load the payment url in the browser, user makes the payment and the payment gateway redirects the user to my backend url. Now I want to parse what my backend returns and close the browser. Also, that console.log(browser) in there does logs an instance of InAppBrowser.

Related

Why Google Pay doesn't work from iPhone Safary after an ajax request?

I try to add a Googla Pay button on a website. I follow the Google Pay implementation tutorial (https://developers.google.com/pay/api/web/guides/tutorial).
There is a code:
var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
//...
})
.catch(function(err) {
//...
});
I need to get some data from my server side before I call the above code so I do the http post request. Within success hanlder of my post request I call the above code. It works fine in my Android browser and my laptop browser. But it doesn't work from Safari. I get the "Unexpected developer error please try again later" error. If I call it without ajax request it works in Safari as well. Could someone suggest the solution?
Thanks for including the jsfiddle.
The reason that it's not working is because Google Pay tries to open a popup window when you call loadPaymentData in Safari. When a new window is triggered as the result of a click event (user initiated action), the popup window opens as expected. When it is triggered by a non-user initiated action, Google Pay gets loaded in the same window which ends up causing it to fail.
It looks like when you make an ajax request in the click handler and then call loadPaymentData, Safari considers it a non-user initiated action.
Check out the following example in Safari:
const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');
ajaxButton.addEventListener('click', event => {
$.get('/echo/json/', () => {
window.open('about:blank');
});
});
nojaxButton.addEventListener('click', event => {
window.open('about:blank');
});
I would recommend avoiding making any http calls on the button click event before loadPaymentData. If you can fetch the data before the button is clicked, then do so.
Out of interest, what kind of data are you fetching?

Ionic 3 - Watch requests in InAppBrowser

I am using InAppBrowser plugin to redirect user to payment website. The problem is that, when payment is done , I need to close that window automatically.
Is there any way to watch requests in InAppBrowser and check them, so that I can catch the successful response and close browser?
Normally you listen to page load events or other events happening in the InAppBrowser. Here is an example of using the Cordova plugin directly (without Ionic Native):
browser.addEventListener("loadstart", (event) => {
if ((event.url).indexOf("http://localhost/callback") === 0) {
browser.removeEventListener("exit", (event) => {});
browser.close();
// do things with `event.url` here
}
});

First ajax attempt miss authorization in header on iphone/ipad

We use windows authentication in our application and it is working fine on our test server. When we publish it onto Production environment (Google compute engine), every first ajax request (per URL) on iPhone/iPad (not matter chrome or safari) after user logon will fail(can not connect to the server). When we perform exactly same action again, it will success. Here is one of our ajax request:
$.ajax({
url: '#Url.Action("GridData")',
type: 'post',
data: {
JobName: $("#JobName").val(),
JobNumber: $("#JobNumber").val(),
},
success: function (data) {
...
},
error: function (xhr, textStatus, errorThrown) {
// first attempt in iPad/iPhone(no matter safari or chrome) will go to here
alert('#Params.AjaxErrorMsg');
},
complete: function() {
...
}
});
After debugging with mac, I found the first ajax call missing the content of Authorization but I have no idea why (this is working fine in any browser with computer version.) Also, I am not sending cross domain request. If I tried to manually put valid data of Authorization for the first ajax call, it will success. Any direction or suggestion will be appreciated. Thanks!

Worklight saml 2.0 SSO

I am using Worklight 6.0 and in this case testing with iOS7.
I'm trying to setup saml 2.0 SSO with Worklight and I seem to have succeeded, but I don't know how it works... At first, I have my app attempt to access my url like this:
WLJQ.ajax({
url: 'url.com',
type: 'GET',
xhrFields: {
withCredentials: true
},
success: function(data, status, xhr) {
console.log(data);
},
error: function(result) {
console.log("error");
console.log(result);
}
});
The request goes to success and returns me the url of the login page, which is correct because I haven't authenticated yet, but it does not display the login (as I intended).
Next I click a button to display a Native page (iOS) which is a UIWebView of url.com. This displays the login page via:
WL.NativePage.show('LoginController', backFromNativeLoginPage, params);
I log in successfully and see the contents of url.com that I expect. Then I return back to the non-native app via:
[NativePage showWebView:0];
Now that I'm back in the non-native code, I sent the same request above and I expect for it not to return the contents of url.com, but rather the login page because I have no headers attached to my request and I think the non-native code shouldn't have any knowledge of the cookies I may have made in the UIWebView.
My question is how does this work? Does my non-native part of worklight have knowledge of all the cookies that were created in the native code's UIWebView?
Let me start by saying my answer is partly based on speculation, but I think this is whats happening:
Since your Native page is using the a WebView and Cordova is also using the WebView, any headers and cookies that your Native page is using will be visible when you return from native since cookies are shared across differet UIWebViews.
If your native page was using the native URL request methods or some third party / open source mechanism for connecting to your backend server, then I would think that your non-native page would not be able to see the headers and cookies.

Uploading Image With Facebook JS SDK

I've put together a script, with the help of another SA post, but the issue I'm having is it's always returning error. When logging the error with console log it contains no properties so I can't determine why I am getting the error.
$(".add-image").click(function() {
FB.login(function(response) {
if (response.authResponse) {
var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";
FB.api('/album_id/photos', 'post', {
message:'Test',
url:imgURL
}, function(response){
if (!response || response.error) {
console.log(response);
} else {
alert('Post ID: ' + response.id);
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'publish_stream'});
});
I've created the app. Added the API ID when including the Javascript.
When running I get a pop up asking me to log in, and it seems to log me in without problems. But it returns an error when checking for a response or response.error.
Any advice.
Not sure if this is still a problem for you, but I've been looking into the same thing recently and I believe that, for this type of upload, FB basically requires source to be the image data itself, not a URL to the image. (See the create photos section on https://developers.facebook.com/docs/reference/api/album/ - it indicates that the source paramater must be multipart/form-data.)
So you have a few workarounds:
1) You may be able to do it from JS if you can create a custom Open Graph Object. I haven't tried this yet, but https://developers.facebook.com/docs/opengraph/usergeneratedphotos/ looks like it expects a URL rather than the post data itself.
2) If the image is originating on the user's computer, you can create an HTML form that submits to FB and have the image go directly from the user to FB without ever hitting your server. This blog post shows an example of that: https://developers.facebook.com/blog/post/498/
3) If the image is originating in your system, you can do a POST from your server to FB that mimics the above form. If it's somewhere else online (such as Flickr), you can download it to your system first and then POST it to FB. You'll have to include an access_token in the request. I don't know what language / framework you're using on your server, but there's probably a library to make creating POST requests easier.