I'm new to cordova, i have an angular application with jwtModule for the authentication whit token.
When I compile the application and insert it in the 'www' folder of cordova everything goes well, even the emulation of the app on an android device, but when I try to authenticate myself the application does not send the data to the back-end.
I think it's a problem related to whiteListDomain! but if I try to emulate the application with a browser platform everything goes well
this is the index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drive</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type=”text/javascript” src=”cordova.js”></script>
</head>
<body class="bg-light text-dark">
<app-root></app-root>
</body>
</html>
this is the configuration of app.module.ts
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
whitelistedDomains:'http://localhost:7850','http://192.168.1.190:7850']
}
})
This is the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mobile.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MobileApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
Related
I tried to include external javascript code in my cordova app but it doesn't work.
My code as following:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://website.com/api/scripts.js"></script>
My whitelist script as following:
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
it's better to load the jQuery script from the app library instead external (unlike in web), makes the loading faster.
regarding the script add,
<access origin="https://*.website.com/api/scripts.js" launch-external="yes"/> check if it fixes the build.
I have been trying hard to make AJAX calls to my node.js server with no success.
I have done the following:
1) Installed the cors package in my node.js server. AJAX did work in the browser.
2) Added the following Content Security Policy to index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com https://163.172.175.135">
3) Added a few lines to my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="roda.X.XXXX" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Roda</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="browser" spec="^4.1.0" />
<plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
What have I missed?
I later found out that AJAX would work in debug mode, but not in release mode. The problem was that I was using the IP address instead of the domain name to connect to the server, thus failing SSL verification. In debug mode, SSL certificates are not verified.
Phew. Problem solved!
I am working on an simple Phonegap App with Cordova InAppBrowser. I am testing on my Android device.
In the config.xml I got the below code
....
<preference name="phonegap-version" value="cli-5.2.0" />
.....
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
.....
<access origin="*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
....
In Javascript I got the below code when a button is clicked
....
var ref = cordova.InAppBrowser.open('http://google.com', '_blank', 'location=yes','fullscreen=no');
....
index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src * 'self' data:">
I use Phonegap Desktop App for testing purposes. In that when the button is touched a browser window got opened and I could see the google.
But when I build the same via http://build.phonegap.com and install on my device. Nothing opens after I touch the button. Something goes wrong here.
Looks strange for me. Any help is appreciated.
I posted the same question on Adobe Forums and got the solution for my problem.
https://forums.adobe.com/thread/2138992
After changing the below, it started working
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
to
<plugin name="cordova-plugin-inappbrowser" />
Well i have multiple page
In cordova, when it start, this show first index.htmland trigger deviceready event on javascript, and when i clicked on link like to search.html, the WebView change and load the search.html but dont trigger deviceready javascript event.
So, right now i use onload in another pages because i think
deviceready event only trigger when the App is ready to work(only
one time at the start).
Example(index.html, this work well):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to search
</body>
</html>
Example( XYZ.html, this don't because never trigger deviceready):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to Index
</body>
</html>
Example of file structure:
+ www/
- .
- ..
+ js/
- jquery.min.js
- bootstrap.min.js
+ css/
- bootstrap.min.css
+ img/
- logo.png
- default.png
+ icons/
- alert.png
- danger.png
- important.png
- icon.png
- index.html
- searh.html
- favorites.html
- contacts.html
- configuration.html
- about.html
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.cordovacrosswalk.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CordovaAndCrosswalkApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
Thanks a lot!
#olaf,
you need to read the documentation and blogs Phonegap Build and Cordova. Cordova/Phonegap is a mess. NOTE: Cordova is the base for *many* hybrid platforms, including Phonegap,Phonegap Build, Ionic, Sencha Touch, etc, et al.
These FAQs should also help.
Top Mistakes by Developers new to Cordova/Phonegap
HOW TO apply the Cordova/Phonegap the whitelist system
Core Plugins Setup.
Your Fixes
replacement config.xml
addition to your index.html
About your confusion with onload() and deviceready.READ 4. In the code, did not listen for the 'deviceready' event. IN Top Mistakes by Developers new to Cordova/Phonegap
Just to be clear on this point. deviceready waits until things are load. So in theory, it is waiting for onload to complete. I can verify this. I just finished a new boilerplate for the latest version (cli-5.2.0) of Phonegap Build.
The load order is Splash screen -> onload() -> ondeviceready() -> splash screen hide().
UPDATE: One last thing. I have several programs that work with multiple pages, so I know most of the gotchas
Best of Luck
1. replacement config.xml
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
<?xml version='1.0' encoding='utf-8'?>
<!-- your header is off. READ http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.cordovacrosswalk.app"
version = "0.0.1"
versionCode = "10"> <!-- versionCode is optional and Android only -->
<name>CordovaAndCrosswalkApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<!-- ONLY needed for IDE/SDK -->
<!-- <content src="index.html" /> -->
<!-- Tool Set Version -->
<!-- <preference name='phonegap-version' value='3.7.0' /> --> <!-- turns off required whitelist -->
<!-- <preference name='phonegap-version' value='cli-5.2.0' /> -->
<!-- Target Platforms -->
<platform name="android" />
<platform name="ios" />
<platform name="windows" />
<!-- You'll very likely need this on different platform. So you can tell them apart -->
<plugin name="cordova-plugin-device" source="npm" version="1.0.1" />
<!-- WHITELIST * WHITELIST * WHITELIST -->
<!-- https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/the-whitelist-system.md -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
<plugin name='org.crosswalk.engine' version='1.3.0' source='pgb' />
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
2. addition to your index.html
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add to the top of every HTML file.READ HOW TO apply the Cordova/Phonegap the whitelist system The section on CSP
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src 'self' 'unsafe-inline' 'unsafe-eval';
script-src 'self' 'unsafe-inline' 'unsafe-eval';">
I am building a cordova app and i am stuck with a problem since three days.. I tried every thing i found on Stack or Google. My point is I can show a google map on android but not on iOS. There is just a grey div. On debug, when clicking on this div, I get this error : TypeError: undefined is not an object (evaluating 'a.x')
Another thing : I have a Gif loader that stay over the grey div, and it should go under the map div.
I am using gmap v3 with or without API key : same issue.
I copy my config.xml :
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.brandyapp.applitest8" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>applitest8</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*.google.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleapis.com" />
<access origin="*.brandyapp.co" />
<allow-navigation href="http://*.google.com" />
<allow-navigation href="http://*.googleapis.com/*" />
<allow-navigation href="http://*.gstatic.com/*" />
<allow-navigation href="http://*.brandyapp.co/*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
The strange thing is I get the same issue with this tuto : http://www.christianengvall.se/phonegap-and-google-maps/
Thank you for your help ! This issue is driving me crazy ! :)