We Keep Coding

Meteor 1.3+ Accounts Facebook Login for iOS not working

I have been trying to find a solution (sadly for 3 months now) to login with Facebook using Meteors Accounts Facebook on iOS. I have tried just about everything a Google search will come up with, reached out on the Meteor forums and even opened up a Github issue.
But this problem still escapes me. Everything works fine on desktop but as soon I as I test on mobile I get a Facebook error "Not Logged in. You are not logged in. Please login and try again" .
I have found several others with this issue and very little input on a full proof answer. And at this point I am starting to get desperate.
This wasn't a problem until Meteor went to 1.3 up.

It's working for me with the following setup
Latest version of Meteor and Xcode
Account related Meteor Packages
accounts-base
accounts-password
accounts-facebook
accounts-google
useraccounts:materialize
service-configuration
accounts-ui
splendido:accounts-meld
Rendering the template with
{{> atForm}}
I also have 2 cordova plugins added (for that create a file inside .meteor folder with the name cordova-plugins and the following content
cordova-plugin-meteor-webapp#https://github.com/meteor/cordova-plugin-meteor-webapp.git#8bf95eed3f313299fc2de33658866278eea2cdc5
cordova-plugin-inappbrowser#https://github.com/apache/cordova-plugin-inappbrowser.git#2df0e72c36f1fda35c04b3b06bd7beaafaae6ee9
Also make sure you have the following line in your html's head tag
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: " />
Finally add the following lines in your mobile-config.js file
App.accessRule('http://*', {type: 'navigation'});
App.accessRule('https://*', {type: 'navigation'});
Also run a meteor reset command before building

Here might be the problem in the GitHub issues
According to the author- It appears that WKWebView in iOS 10 no longer applies the Meteor Cordova CSP (default-src *) to websockets, and blocks the connection, with the below message. This breaks production apps that make websocket connections (perhaps only connections other than the default connection to the Meteor server? not sure) when their users update to iOS 10 (which has been released).
The issue lies in the codeline
<meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';">
You can try to replace it by
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' data: blob: 'unsafe-inline' 'unsafe-eval' wss://*.ourdomain.tld ">
in the file https://github.com/meteor/meteor/blob/master/packages/boilerplate-generator/boilerplate_web.cordova.html
and then update the Meteor 1.4 by running meteor update boilerplate-generator
You can also try updating meteor update --release 1.4.2-beta.4 as mentioned in the link that
This package is run during the build process and updating this package on a project level would not change what files are used to build the app.
Also if it still doesnt work then as suggested by this author
You can add a simple plugin meteor add cordova:meteor-ios10-csp-fix#0.1.0
Repo is here and the npm page is here
Hope this helps.
Full attribution goes to the github link and the authors mentioned above

To make this work for me, I upgraded to the latest version of meteor, accounts-facebook, etc.
Next I deployed a web version of the app with working facebook login. Then I tested the web app facebook login. All good once the valid oauth redirect URI are added in your facebook app settings. These should be something like https://example.com
Then I ran in terminal meteor run ios-device --settings settings.json --mobile-server https://example.com
My mobile-config.js file also contained as recommended by #Afzal Hossain
App.accessRule('http://*', {type: 'navigation'});
App.accessRule('https://*', {type: 'navigation'});
The app put on my device worked for logging in.
No need for cordova plugins or CSP policy any more as meteor updates have made these unnecessary.

I have fixed the same issue by specifying correct Url in Facebook App's "Valid OAuth redirect URIs".
Earlier, I had specified
http://<domainname>/_oauth/facebook?close
which did not work. After some debugging, I found that the URL should be
http://<domainname>:<port>/_oauth/facebook?close (with port number)
So In case of a server running on http://localhost:3000, it would be http://<device ip/external ip>:3000/_oauth/facebook?close
And, in case you are running app with --server=http://www.domainname.com then it would be http://www.domainname:80/_oauth/facebook?close (port 80 for HTTP )
Now, I see the Facebook App login page and can login.
But now I am stuck with closing the InAppBrowser after authentication. Any help in this regard would be great!

Cordova whitelist plugin does not work

My app works fine on the browser but not on the device:
The ionic app only loads the HTML and CSS but does not load the http requests and run the JS.
In Xcode it's stuck at this point:
2016-06-18 11:43:59.169 waettr[719:414729] Apache Cordova native platform version 4.1.0 is starting.
2016-06-18 11:43:59.170 waettr[719:414729] Multi-tasking -> Device: YES, App: YES
2016-06-18 11:43:59.203 waettr[719:414729] Using UIWebView
2016-06-18 11:43:59.204 waettr[719:414729] [CDVTimer][handleopenurl] 0.057995ms
2016-06-18 11:43:59.205 waettr[719:414729] [CDVTimer][intentandnavigationfilter] 1.080990ms
2016-06-18 11:43:59.205 waettr[719:414729] [CDVTimer][gesturehandler] 0.043035ms
2016-06-18 11:43:59.217 waettr[719:414729] [CDVTimer][splashscreen] 12.061000ms
2016-06-18 11:43:59.224 waettr[719:414729] [CDVTimer][statusbar] 6.388009ms
2016-06-18 11:43:59.224 waettr[719:414729] [CDVTimer][keyboard] 0.630975ms
2016-06-18 11:43:59.225 waettr[719:414729] [CDVTimer][TotalPluginStartup] 20.883977ms
2016-06-18 11:43:59.366 waettr[719:414729] Resetting plugins due to page load.
2016-06-18 11:44:01.708 waettr[719:414729] Finished load of: file:///var/containers/Bundle/Application/8365EFD8-1FAA-4E82-8DB6-2ADCD8E53A90/waettr.app/www/index.html#/home
I have the following settings:
<access origin="*" />
<allow-navigation href="https://maps.googleapis.com/*"/>
<allow-navigation href="http://api.openweathermap.org/*"/>
This Tag:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' maps.googleapis.com 'unsafe-inline' 'unsafe-eval'">
What's my mistake? I'm getting headaches from this...

If you are making Ajax calls to:
<allow-navigation href="https://maps.googleapis.com/*"/>
<allow-navigation href="http://api.openweathermap.org/*"/>
which I guess is why you have those in your config.xml, then I recommend that you update your Content Security Policy meta tab to include a connect-src declaration. This defines where you can make Ajax calls to.
Try setting the following Content Security Policy:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' maps.googleapis.com 'unsafe-inline' 'unsafe-eval'; connect-src https://maps.googleapis.com http://api.openweathermap.org">
Here I added connect-src and the URLs that I think you are trying to make Ajax requests to. If you'd like more information on this, here's a relevant blog post.

Why is the Cordova Browser-Sync Plugin not working on a clean, new Apache Cordova app?

NOTE: This issue is reported from multiple parties on the official GitHub repository for Cordova Browser-Sync Plugin as well. Posting this here to bring more attention to the issue and to see if someone has any insight or a practical solution to this.
I’m new to the world of Apache Cordova, but fluent in full-stack LAMP development. That said, I am baffled by this issue: When I create a basic/simple Apache Cordova test application and add Cordova Browser-Sync Plugin to the mix, I can make changes in my www/ directory and then see them immediately reflected in platforms/browser/www/ but my open browser window does not live reload. I have to force a reload to get the changes to be reflected in the browser.
I am running this all on Mac OS X 10.10.5 (Yosemite), NodeJS is 4.4.0, NPM is 2.14.20, Cordova is 6.0.0 and the Cordova Browser-Sync Plugin is 0.1.1.
My steps to set things up are as follows; first create a new app like this:
cordova create MyApp
Then I go into the directory like this:
cd MyApp
And setup my simple “browser” Cordova app like this:
cordova platform add browser
A final test is to just run the app like this:
cordova run browser
Okay, so we know that simple “Hello world.” test works. Now I’ll add the Cordova Browser-Sync Plugin like this:
cordova plugin add cordova-plugin-browsersync
All good and now I will test the application like this:
cordova run browser -- --live-reload
And if I make a change in a file, the browser simply does not “live reload” as described; unless I am missing something? The output from that command is:
Running command: /Users/Giacomo1968/Desktop/MyApp/platforms/browser/cordova/run --live-reload
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down
Static file server running # http://localhost:8000/index.html
CTRL + C to shut down
Executing command: open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8000/index.html
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.20:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.20:3001
--------------------------------------
[BS] Serving files from: platforms/android/assets/www
[BS] Serving files from: platforms/ios/www
[BS] Watching files...
gzip
200 /index.html (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/index.html)
gzip
200 /css/index.css (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/css/index.css)
gzip
200 /cordova.js (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/cordova.js)
gzip
200 /img/logo.png (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/img/logo.png)
gzip
200 /js/index.js (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/js/index.js)
gzip
200 /cordova_plugins.js (/Users/Giacomo1968/Desktop/MyApp/platforms/browser/www/cordova_plugins.js)
[BS] Reloading Browsers...
Note how it says “Reloading Browsers...” at the end of the list? I assure you 100% not one browser was reloaded. And here is the HTML www/index.html from the root of the application I am attempting to edit to trigger a live reload:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Fucking Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I understand that live reload functionality often relies on inline JavaScript code that is somehow injected into the DOM of the HTML to communicate with the live reload server. And everything I have read online says these kind of issues—where live reload fails—often comes from the <body></body> tags not being set on a page. But they clearly are there. I almost want to think it’s a Content-Security-Policy related issue, but that would only really be a factor if the JavaScript was injected into the page to begin with.
So why exactly is live reload functionality not working in an incredibly bare-bones initial setup like this?

Code-wise, there doesn’t seem like there is a solution/fix that works. Why? Who knows. But the plug-in as it stands now is broken.
And past the technical specifics, according to this issue ticket on the GitHub repository connected to the official plug-in—and coming directly from the developer of the project itself—the project is “retired.”
I am planning to retire this project in favor of Taco-livereload.
That is also based on pretty much the same code, and I am now a PM on
that project. That project will also have more devs working on it, so
will have much more support as an official project.
Would that fulfill your needs ? Are there anything that this project
has, that taco-livereload does not have ?
Since Taco is a Microsoft project, I’m not going to touch that with a 10 foot pole even if they are using an MIT license. Microsoft’s philosophy of “embrace, extend, and extinguish” seems too risky for an open source endeavor like this.
So instead, I’m going to veer towards Ionic as a framework since it has live reload functionality right out of the box and is more widely adopted and embraced by the Cordova development world right now.
PS: The Content-Security-Policy solution discussed on the plug-in author’s blog which suggests setting ws: 'unsafe-inline' would only be a factor if the live reload JavaScript code was properly being injected in the page to begin with. JavaScript from a non-trusted source is what would make the process fail in cases where the plug-in would actually work. And the proof would be seeing such an error in the web browser console after the page loads.
But in this case, the code injection is not happening anymore and starting the application with cordova run browser -- --live-reload starts up the default development server on localhost:8000 but then afterwards the browser sync servers are started for localhost:3000 and localhost:3001. If this setup were working correctly it would be only running on localhost:3000; and not ports 8000 and 3000.

I think you miss ws: 'unsafe-inline' in your Content-Security-Policy definition.
The plugin needs this CSP for websocket to work.
Have a look to the video there http://blog.nparashuram.com/2015/08/using-browser-sync-with-cordova.html (linked in the plugin's readme.md) for detailed explanations about the plugin usage.
Should be:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ws: 'unsafe-inline' https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

There are three ways to use the code in this plugin. Ensure that you have added the ws: and unsafe-inline CSP policies to your default-src section of the CSP meta tag () in index.html file.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' ws: 'unsafe-inline';">

In Windows 11, I had to set the Ethernet option to Public Network first, for the smartphone to see the BrowserSync server.
Then I had to run.
npm i cordova-plugin-browsersync
and after that
cordova plugin add cordova-plugin-browsersync

Cordova only executes plugins after resume event

I'm using Cordova 3.5.0 on iOS.
My application loads, the 'deviceReady' event is fired, but no plugin actions are executed until I put my app in the background (by going to the homescreen).
When I go back into my app, the 'resume' handler gets fired, logs show up in LLDB and the PushNotification plugin starts listening to events and tries to register push notifications.
Why does this only happen once I have put my app to sleep?
These are the installed plugins (cordova plugins ls):
com.patrickheneise.cordova.statusbar 0.0.2 "Status Bar"
com.phonegap.plugins.PushPlugin 2.2.1 "PushPlugin"
com.phonegap.plugins.actionsheet 1.0.0 "ActionSheet"
org.apache.cordova.console 0.2.10-dev "Console"
org.apache.cordova.dialogs 0.2.9-dev "Notification"
org.apache.cordova.vibration 0.3.10-dev "Vibration"
Thanks in advance.

I had the same problem in my own app with cordova 6.3.0.
After dozens of tests I found the problem.
I had a Content-Security-Policy meta-tag defined like this:
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'
'unsafe-eval'; media-src *">
It turns out default-src * is not enough.
With the following policy it works:
<meta http-equiv="Content-Security-Policy" content="default-src *
'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">
The key part here ist the gap:
It seems to be required, to properly execute cordova plugin code on iOS.
But I still find it strange that the policy is influenced by resuming to the app.
Additional note: the problem seems to affect all plugins that are displayed outside the webview. I had it with cordova-plugin-camera, phonegap-plugin-barcodescanner, cordova-plugin-dialogs. Other plugins like cordova-plugin-file-transfer worked just fine.

Tom, although not really an answer as I'm not sure what fixed it, I can confirm that my app no longer does this. This is what I did:
Changed cordova to use 3.3.0 instead of 3.4.0 and at the same time, specified version numbers for my plugins:
<gap:plugin name="org.apache.cordova.console" version="0.2.7" />
<gap:plugin name="org.apache.cordova.contacts" version="0.2.11" />
<gap:plugin name="org.apache.cordova.device" version="0.2.8" />
<gap:plugin name="org.apache.cordova.device-orientation" version="0.3.5" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.6" />
<gap:plugin name="org.apache.cordova.file" version="1.0.1" />
<gap:plugin name="org.apache.cordova.file-transfer" version="0.4.2" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />
<gap:plugin name="org.apache.cordova.vibration" version="0.3.7" />
Then I re-built my app and it worked properly on iOS. So I then upgraded Cordova back to 3.4.0, kept the plugins the same, and it still worked.
So I don't know if it was because of an old plugin version or because I simply downgraded and then upgraded Cordova, but it has now fixed it.
Oh and FYI, I'm using Phonegap Build, so that's why it's easier to down/upgrade Phonegap/Cordova versions.

Phonegap, Cordova - Issue with Plugins

I have installed Phonegap (3.0.3) and the Cordova CLI.
I am also running iOS as a platform (confirmed using $ cordova platforms ls)
I have installed the plugins ($ cordova plugins ls)
org.apache.cordova.core.dialogs
org.apache.cordova.core.vibration
However, when I run this console command ($ cordova emulate ios), I get the following error.
Undefined symbols for architecture i386:
"_AudioServicesAddSystemSoundCompletion", referenced from:
_playBeep in CDVNotification.o
"_AudioServicesCreateSystemSoundID", referenced from:
_playBeep in CDVNotification.o
"_AudioServicesDisposeSystemSoundID", referenced from:
_soundCompletionCallback in CDVNotification.o
"_AudioServicesPlaySystemSound", referenced from:
_playBeep in CDVNotification.o
-[CDVVibration vibrate:] in CDVVibration.o
"_AudioServicesRemoveSystemSoundCompletion", referenced from:
_soundCompletionCallback in CDVNotification.o
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)
** BUILD FAILED **
The following build commands failed:
Ld build/MyApp.app/MyApp normal i386
(1 failure)
I have followed the directions from the API page here (http://cordova.apache.org/docs/en/edge/cordova_notification_notification.md.html#Notification) and below is my config.xml file in the MyApp > www > config.xml file which causes the error.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myapp.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#callback.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<plugin name="Notification" value="CDVNotification" />
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
</widget>
Any suggestions what the issue might be, and how I can go about fixing it?

Add AudioToolbox framework in your Xcode project:
Your Target > Build Phases > Link Binary With Libraries
Click the '+' button
Choose AudioToolbox.framework

Did you run cordova build ios?
then cordova emulate ios
This error happen when you don't add the source to the Compile sources in build phase.
Try to add plugins with :
TargetSettings -> Build Phases -> Compile Sources -> add your .m class

Take a look at CDVNotification.h - the #import lines tell you everything you need to add to your compile sources build phase.
Foundation/Foundation.h
UIKit/UIKit.h
AudioToolbox/AudioServices.h
Add those 3, and it will compile.
UPDATE - an additional change is necessary in CDVNotification.m
playBeep() calls soundCompletionCallback()
soundCompletionCallback calls playBeep()
In order for playBeep to be error free, soundCompletionCallback must be declared. The simple solution is to declare it before playBeep, then define it after.
Add this line just before static void playBeep(int count)
// declared but not defined to avoid undeclared error in playBeep
static void soundCompletionCallback(SystemSoundID ssid, void* data);