Only secure origins are allowed in ionic 3 - geolocation

I am using Cordova geolocation plugin in my ionic 3 app. It is working on some android devices but not working on OnePlus A5010
I am getting the error "Only secure origins are allowed".
I have already SSL implemented in my app.
import { Geolocation } from '#ionic-native/geolocation';
let locationOptions = {timeout: 10000, enableHighAccuracy: true};
this.geolocation.getCurrentPosition(locationOptions).then((position) => {
}).catch((error) => { console.log('Error getting location', error); });
Can anyone help me in fixing this?

Related

Firebase Google sign in stopped working on iOS 16

I'm working in a React web app project that's using Firebase Google sign in. The sign in apparently stopped working on iOS mobile devices after an update to iOS 16 or higher. The issue is the same in both Safari and Chrome browsers. It still works fine on other devices though. It seems that the page gets reloaded after I have selected my Google account from the list. I've tried inspecting the network tab but I'm not getting any errors.
We're using Firebase version 7.6.2 and I tried updating to the latest, which is 9.15.0 but the problem persists. We also have email + password login and that works just fine on all devices.
Here's the Firebase part of our current code if that helps:
import * as firebase from 'firebase/app'
import 'firebase/auth'
import * as firebaseui from 'firebaseui'
import { apiGET, api } from './api'
const initFirebase = apiGET('/firebase-config-url')
.then((config) => firebase.initializeApp(config))
.then(() => firebase.auth())
export const firebaseAuth = initFirebase
export const signInOptions = {
signInSuccessUrl: '/',
signInOptions: [
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
customParameters: {
prompt: 'select_account',
},
},
firebase.auth.EmailAuthProvider.PROVIDER_ID,
],
}
export const bindUI = (el, options = signInOptions) => {
firebaseAuth.then((auth) => {
const ui = new firebaseui.auth.AuthUI(auth)
ui.start(el, { ...signInOptions, ...options })
})
}
Has anyone else experienced similar issues on newer iOS versions and is there a solution for fixing this?

Geolocation API in IE11

I'm attempting to use HTML5 Geolocation on IE11, but despite allowing location permission, I get an error, "This site does not have permission to use the Geolocation API."
To replicate:
Open any site in IE11 (I'm user browerstack to emulate a Windows 10)
Copy/paste the following code in the console:
var options = {
enableHighAccuracy: false,
timeout: 1000000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('got your position');
}
function error(err) {
console.log(err);
}
navigator.geolocation.getCurrentPosition(success, error, options);
Click "Allow Once" when the location prompt appears
Observe the Resulting Error Message, "This site does not have permission to use the Geolocation API."
My browserstack is running IE11 version 11.1.17134.0, on a Windows 10.
Thanks in advance for your help!

InAppPurchase erreur

Ionic:
#ionic/cli: "^6.10.0",
Ionic Framework : "#ionic/angular": "^5.1.1"
#angular-devkit/build-angular : 0.1102.13
#angular-devkit/schematics: "^9.1.7",
#angular/cli: "^9.1.7",
#ionic/angular-toolkit: "~2.0.0",
System:
NodeJS : v12.14.0
npm : 6.13.4
OS : macOS Big Sur version 11.2.3
Xcode : Xcode 12.4 Build version 12D4e
In the need to activate in-app-purchase in an Ionic/iOS app, I built my product in App Store Connect for test.In the need to activate in-app-purchase in an Ionic/iOS app, I built my product in App Store Connect for test.
enter image description here
I developed an Angular / Ionic application with online payment and I created an ios application and when I sent it for verification it was rejected by Apple requiring to integrate "in-app-purchase", that is is why I used the Plugin "In-App-Purchase2" to manage the purchase But when I try to access the package I created, XCode launches the following logger: "Undefined" or nothing display .
I don't understand why I can't find my product (my product list is empty), I noticed that there is no connection between my app and AppleStoreConnect ..
Could you help me find out if the method I am using was good and why it is not working well.
My Code :
Pasted Graphic 4
Pasted Graphic 3
Log Xcode
Loadina network plugin
Applications Agreement is signed
Capture d’écran, le 2021-06-11 aΜ€ 12 24 03
Ps: i tested it in simulator
Hi #Juliana welcome to the community! Lets help you with a snippet code. You need to be sure the Store is ready before ask to handle the products, and use NgZone to get the products data.
constructor(private store: InAppPurchase2){
this.productId = 'my_product_name'
}
ngOnInit() {
this.platform.ready().then(() => {
if (this.platform.is('ios')) {
this.setupPurchase();
}
});
}
setupPurchase() {
this.store.verbosity = this.store.DEBUG;
this.store.register({
id: this.productId,
type: this.store.NON_CONSUMABLE
});
console.log('verbosity πŸ‘‰πŸ½ ', JSON.stringify(this.store.verbosity));
this.store.ready(() => {
this.registerHandlersForPurchase(this.productId);
});
// refresh/store purchase
this.store.refresh();
}
registerHandlersForPurchase(productId) {
// Approved
this.store.when(productId).approved((product: IAPProduct) => {
console.log('Approved πŸ‘‰πŸ½ ', JSON.stringify(product));
// Product Finish
product.finish();
});
// User closed the native purchase dialog
this.store.when(this.productId).cancelled((product) => {
console.error('User Canceled! ', product);
});
this.store.refresh();
this.product = this.store.get(this.productId);
if (!!this.product.id && !!this.product.priceMicros) {
this.zone.run(() => {
// Use on HTML view to show the products
this.displayProduct = this.product;
});
}
console.log('Handlers produto πŸ‘‰πŸ½ ', JSON.stringify(this.product));
// Track all store errors
this.store.error( (err) => {
console.error('Store Error ' + JSON.stringify(err));
});
}
Please, adapt it to your code and run on native device. You will see the console.log() on debugging with the errors and status of the products.

react native check if location services are on iOS

I'm using navigator.geolocation.getCurrentPosition() in react native and it's working fine.
But i would like to be able to react nicely if location services are turned off (a dialog box that leads the user to settings).
I found that plugin for android and i think it's going to work fine :
https://www.npmjs.com/package/react-native-android-location-services-dialog-box How should i do in iOS ?
EDIT
You can use this very well done 3rd party library
and then use it like this :
Location.getAuthorizationStatus((authorization) => {
console.log(authorization)
});
Previous answer
getCurrentPosition can take an error callback. This will be triggered if the location is not enabled.
You can do something like:
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({ position });
},
(error) => {
console.log(alert);
},
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);
You can check the docs for more informations.

React Native network request fails on iPhone but succeeds in iOS simulator

As many people have suggested in answers to similar questions, I have edited my info.plist by adding:
<key>NSAllowsArbitraryLoads</key>
<true/>
I have also made sure in Xcode that arbitrary loads are allowed:
Everything works perfectly fine in the iOS Simulator but when I try to make a network request on my iPhone I get this error in the remote debugger:
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.js:441)
at XMLHttpRequest.dispatchEvent (event-target.js:172)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:542)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:378)
at XMLHttpRequest.js:482
at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
at MessageQueue.__callFunction (MessageQueue.js:236)
at MessageQueue.js:108
at guard (MessageQueue.js:46)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:107)
I've restarted Xcode more times than I can count at this point. I've never had this issue with any other app. Here the code from the request, the error comes from the second catch from the bottom:
loginFinished (error, result) {
if (error) {
console.log(error)
alert("Login failed with error: " + error);
} else if (result.isCancelled) {
alert("Login was cancelled");
} else {
AccessToken.getCurrentAccessToken()
.then(response => {
console.log('1',response)
fetch(`http://localhost:3000/auth`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
fbAccessToken: response.accessToken
})
})
.then(response => response.json())
.then(data => {
console.log('data: ', data)
this.props.setUser(data)
})
//Network error comes from this catch
.catch(err => console.log(err))
})
.catch(err => console.log(err))
}
}
The problem is that you are trying to access localhost from your phone. When you run the iOS simulator on the same computer as your server that works fine, but your phone needs the hostname or IP address of your computer. These are a few ways you could solve this:
Run a network tunnel like ngrok on your computer (ngrok http 3000) and access it at http://<hash>.ngrok.io. Since ngrok does TLS termination you'll be able to test HTTPS URLs as well.
Find the hostname of your computer and access it at http://<hostname>.local:3000. This requires your computer and router to support Bonjour.
Find the LAN IP address of your computer and access it at http://<ip>:3000

Resources