Geolocation Error: Only secure origins are allowed, Error getting location and not working on device


#1

Okay, Here is what happened, i have tried so many times to get geolocation working on an android device but nothing is happening instead it shows a white screen. I decided to test with an emulator by running ionic cordova run android -l -c then i discovered that it throws an exception Only secure origins are allowed. Then i tried using a solution i got from someone (platform.ready().then(() => { ) before calling geolocation.getcurrentPosition, I built the app for android and tested, it still shows a white screen. I ran with emulator and the exception changed to console log: Error getting location , I really need help, please anyone.

I run ionic 3.4.0 with npm 5.0.3 on Node.js 7.8.0

Home.ts


getMapLocation() {

   var options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 5000
    };


    /* Ensure the platform is ready */
   this.platform.ready().then(() => {
     console.log("platfrom is ready");
     
    /* Perform initial geolocation */
    this.geolocation.getCurrentPosition(options).then((position) => {
        console.log(position.coords.latitude)
        this.Latitude = position.coords.latitude;
        this.Longitude = position.coords.longitude;

     var pos = {
              lat: this.Latitude,
              lng: this.Longitude
            };

    this.location = pos;

     this.getMap(this.Latitude, this.Longitude);

    }).catch((err) => {
        console.log('Error getting location', err);
    });
})
 

}

##Config.Xml

<universal-links>
        <host name="tgp38.app.goo.gl" scheme="https" />
        <host name="taxi-59a68.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
    </universal-links>
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <allow-navigation href="http://192.168.8.101:8100" />
    <allow-navigation href="http://192.168.8.103:8100" />
    <allow-navigation href="http://192.168.8.102:8100" />
    <engine name="android" spec="^6.2.3" />
    <plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
    <plugin name="cordova-plugin-buildinfo" spec="^1.1.0" />
    <plugin name="cordova-plugin-compat" spec="^1.0.0" />
    <plugin name="cordova-plugin-device" spec="^1.1.6" />
    <plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
    <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
    <plugin name="cordova-plugin-network-information" spec="^1.3.3" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
    <plugin name="cordova-plugin-stripe" spec="^1.4.1" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
    <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
    <plugin name="cordova.plugins.diagnostic" spec="^3.6.5" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />

##AndroidManifest.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.playheavens.taxihub" xmlns:android="http://schemas.android.com/apk/res/android">
  <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true"/>
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
      <intent-filter android:label="@string/launcher_name">
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:host="tgp38.app.goo.gl" android:scheme="https"/>
      </intent-filter>
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:host="taxi-59a68.firebaseapp.com" android:scheme="https" android:path="/__/auth/callback"/>
      </intent-filter>
    </activity>
    <receiver android:name="cordova.plugins.Diagnostic$LocationProviderChangedReceiver">
      <intent-filter>
        <action android:name="android.location.PROVIDERS_CHANGED"/>
      </intent-filter>
    </receiver>
    <receiver android:name="cordova.plugins.Diagnostic$NFCStateChangedReceiver">
      <intent-filter>
        <action android:name="android.nfc.action.ADAPTER_STATE_CHANGED"/>
      </intent-filter>
    </receiver>
  </application>
  <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="25"/>
  <uses-feature android:name="android.hardware.location.gps"/>
</manifest>

Android - Geolocation : Only secure origins are allowed
#2

This error message tells you everything - when using -l it loads the app via http:// which is not a secure origin. If you just use cordova run android you don’t get that error, right?

Then your real problem is why you always get “Error getting location”, correct?


#3

Hi @Sujan12, Yes I suppose. But I get the same white screen whether i run with -l or cordova run android, which makes me believe that the not a secure origin error occur in both methods. I only started seeing Error getting location after calling the platform ready function before the geolocation function.


#4

Why don’t you check that so you don’t have to believe?

Remote debug the problem on the device. Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console tab for errors.


#5

Hi, @Sujan12 i was able to run a debug using the chrome dev tools and it turns out it was a geolocation error, here’s what i got Error getting location PositionError {code: 3, message: "Timeout expired"}code: 3message: "Timeout expired"__proto__: PositionError.


#6

hi, thanks this solution is working for me, but i cant constantly work with this mode, since some elements and pictures don’t appear unless i use -s -l -c --debug while running it to my device.
any overcome for this?
thanks.


#7

Hi chinedu50 , Did you solve the problem? I am experiencing exactly the same problem, the geolocation does not work on Android device, it only works on IOS device