im trying to open an external link to facebook within my iOS Phonegap app without it taking over the whole page. Ideally I want it in sort of an iFrame where the navigation would remain.
At the moment I have a share button that opens up Facebook using the in app browser. Here is the code:
function shareonfb()
{
photoid = sessionStorage.PhotoId;
filename = sessionStorage.PhotoFilename;
postUrl = "http://mysitelink.com/page.php?photoid="+photoid;
imageUrl = "http://mysitelink.com/pages/"+filename;
var sSiteUrl="http://www.facebook.com/sharer.php?s=100&u="+postUrl;
var ref = window.open(sSiteUrl, '_self', 'location=yes,');
}
<input id="btnshare" type="button" value="Share" data-icon="arrow-r"
data-inline="true" onclick="javascript:{shareonfb();};" />
My problem is Facebook takes over, with no way of returning to the app. Any ideas of a better way to do this?
You will need to setup an exit event to listen for a window.close coming from the inapp browser..
These are the events from phonegap doco
loadstart - event fired when the InAppBrowser starts to load a URL
loadstop - event fired when the InAppBrowser finished loading a URL
loaderror - event fired when the InAppBrowser encounters an error loading a URL
** exit - event fired when the InAppBrowser window is closed**
So something like .
ref.addEventListener('exit', function() { ref.close(); });
should do the trick.
Related
I am trying to submit a form but I get an "internal" error after submit on IOS Safari. Happened on two separate devices. I'm using Firebase functions onCall function. Client code:
var contactForm =
window.firebase.functions().httpsCallable('contactForm');
let result = await contactForm({ accountUID, foldersFilter,
firstName, lastName, email, cellNumber, dobDay, dobMonth })
And server code:
exports.contactForm = functions.https.onCall(( data, context ) => {
return contactForm.contactForm( data, context )
});
This function is called via form. The form works great on chrome, safari desktop, but for some reason it gets an internal errror sometimes when testing on IOS device. At first I thought it only happened when I was using autofill, but I've tested more and I get the same error when not using autofill too.
The confusing thing is my function code is actually never being called (I don't see any firebase function logs). Here is my console in safari:
The network connection was lost.
Fetch API cannot load https://us-central1-projectId.cloudfunctions.net/contactForm due to access control checks
Failed to load resource: The network connection was lost.
internal
Why won't this form submit on ios safari?
I fixed the issue. Turns out it has something to do with Google Cloud Functions being IPv4, and Safari requiring IPv6. I suspect this will become a bigger issue moving forward. I'm having to move all onCall Firebase functions to https triggers. In order to make https triggers work, you have to use a custom domain in Firebase hosting and rewrite to your function endpoint.
{
"hosting": {
...
"rewrites": [
{
"source": "/api/contactForm",
"function": "contactForm"
}
}
and so now instead of calling https://us-central1-projectId.cloudfunctions.net/contactForm to trigger my api. I call https://customdomain.com/api/contactForm
I am using the alloy framework with appcelerator titanium and have done like this:
alloy.js
Alloy.Globals.Facebook = require('facebook');
Alloy.Globals.Facebook.permissions = ['public_profile'];
index.js
Alloy.Globals.Facebook.addEventListener('login', function(e) {
if (e.success) {
Ti.API.info("VALID FACEBOOK LOGIN");
var token = Alloy.Globals.Facebook.accessToken;
Ti.API.info("*** fb accessToken: "+token);
}
else{
Ti.API.info("FAILED FACEBOOK LOGIN...");
}
});
index.xml
<LoginButton id="fbButton" module="facebook" />
When i try to login using the button, the login is okay, and the facebook button changes to "logout" instead. However, no login event is ever fired and the evenlistener in index.js never gets anything.
What is causing this? Should i add the event lister in some other way?
iOS on device 9.3.1
Titanium SDK 5.2.2.GA
As pointed out in an earlier comment to the question the module was not initialized. Adding the initialize() line into my alloy.js seems to fix the problem, now i receive the login events.
in alloy.js
Alloy.Globals.Facebook = require('facebook');
Alloy.Globals.Facebook.permissions = ['public_profile'];
Alloy.Globals.Facebook.initialize();
i think you forget to add this instruction :
Alloy.Globals.Facebook.authorize();
As an ugly workaround until events gets fixed i simply added a setInterval that polls if Alloy.Globals.Facebook.loggedIn is true or not and then do the appropriate codes that should have been inside the event handler...
After submitting the app to app store, for some reason the reviewers could not get any events... this is really bad. It works in my simulators and on my device, but not for the submitted app when they test it...
No idea what to do really...
I define a Challenge Handler,
var AuthRealmChallengeHandler = WL.Client.createChallengeHandler("AuthRealm");
AuthRealmChallengeHandler.isCustomResponse = function(response) {
//returns true or false
};
once I click the login button i send a request to the adapter:
var resourceRequest = new WLResourceRequest(
"/adapters/AuthAdapter/getSecretData", WLResourceRequest.GET,
30000);
resourceRequest.send().then(getSecretData_CallbackOK,
getSecretData_CallbackFail);
However, after closing the app, re-launching and the login button is pressed again, the isCustomResponse is not called again. Why is it so?
I've checked that the isUserAuthenticated returns true, however it still doesn't call isCustomResponse:
WL.Client.updateUserInfo();
if (WL.Client.isUserAuthenticated("AuthRealm")) {
}else{
}
In addition to changing the project settings as was mentioned in the comments, to answer the remaining questions:
There is no relation between the application session "state" to JSONStore. JSONStore is local to your app itself in the device and not to the network.
You can invoke the logout function on application initialization, as a way to ensure that the client will be logged out once you have re-started the app in order to simulate the expected behavior by you. You will likely also want to extend the splash screen duration while this action is done so the user experience will be better... the logout function needs to simply call WL.Client.logout (refer to the documentation for this).
I'm building an hybrid app for Android and iPhone based on html5. I want to implement in my app login with Facebook. All the Html on the application are a local on the device; I don't have a server so I want to save the token from Facebook in the local storage. Is it possible to implement this with Facebook javascript SDK?
I tried the code from Facebook developer site:
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked. -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
But I get the following error in browser console:
"Given URL is not allowed by the Application configuration.: One or
more of the given URLs is not allowed by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the App's domains. "
In your apps config.xml you should have something like <access origin="*">
I've been looking through the documentation for the Contacts API and there are ways to retrieve and save contacts to display them on your own UI.
But is there any way to trigger the native contacts to display your address book?
Something similar to the SMS plugin which pops up the native sms composer within the app.
Thanks
I was looking for the exact same thing and came across this http://fqnow.com/phonegap-contact-picker/. Here's the Javascript code, all you need to do is:
function contactChooser(){
var options = new ContactFindOptions();
options.fields = ["displayName", "name", "emails", "phoneNumbers"];
navigator.contacts.chooseContact( onSuccess, options);
}
function onSuccess(id, contact){
alert(id);
alert(contact);
}