How do we access Google Places API key from iOS and Android?

[DaleMcGrew]

Research how to configure Google Places API key for the Cordova app, given the API restrictions limit us based on referring website. Until we figure this out, we lose the "auto-complete" feature when a voter changes their address in the Settings area: https://wevote.us/settings/address ...we are using "google.maps.places.Autocomplete" to offer suggested addresses.

[SailingSteve]

I made a trivial index.html fix, and on the https://console.cloud.google.com/apis/credentials/key/74?project=wevoteus-geolocation&authuser=0&folder&organizationId=1032986910497 page I added __file_url__//android_asset/www/index.html#/ballot as a configuration change.

But the suggested URL for iOS ... __file_url__//Users/stevepodell/Library/Developer/CoreSimulator/Devices/D1526046-D601-446F-A789-466F99AEE3DC/data/Containers/Bundle/Application/7A7D9D8F-7911-4264-A895-07A1D65FB10D/WeVoteCordova.app/www/index.html#/ballot doesn't make any sense, and crashed theGoogle Cloud Console page when (purely as an experiment) I tried to add it.

[SailingSteve]

"Google Maps JavaScript API error: RefererNotAllowedMapError " error from trying to use api from within React Cordova iOS, but works fine in Android

https://stackoverflow.com/questions/50498308/google-maps-javascript-api-error-referernotallowedmaperror-error-from-trying

[SailingSteve]

iOS (using chrome debug tools, after safari debug tools failed me my simplifying the http request so much I though there was no x-requested-with header): Request URL:https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2Fandroid_asset%2Fwww%2Findex.html%23%2Fballot&4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M&callback=_xdc_._5gfso5&token=52928 Request Method:GET Status Code:200 Remote Address:172.217.164.106:443 Referrer Policy:no-referrer-when-downgrade alt-svc:hq=":443"; ma=2592000; quic=51303433; quic=51303432; quic=51303431; quic=51303339; quic=51303335,quic=":443"; ma=2592000; v="43,42,41,39,35" cache-control:no-cache, must-revalidate content-disposition:attachment content-encoding:gzip content-length:57 content-type:text/javascript; charset=UTF-8 date:Wed, 23 May 2018 22:48:41 GMT expires:Fri, 01 Jan 1990 00:00:00 GMT pragma:no-cache server:mafe status:200 x-frame-options:SAMEORIGIN x-xss-protection:1; mode=block :authority:maps.googleapis.com :method:GET :path:/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2Fandroid_asset%2Fwww%2Findex.html%23%2Fballot&4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M&callback=xdc._5gfso5&token=52928 :scheme:https accept:/ accept-encoding:gzip, deflate accept-language:en-US user-agent:Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM1.180201.021; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36 x-devtools-emulate-network-conditions-client-id:52d32cbd-251e-4bb2-8c56-d7b213a3a21a x-requested-with:org.wevote.cordova 1sfile:///android_asset/www/index.html#/ballot: 4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M: callback:xdc._5gfso5 token:52928

[SailingSteve]

Android: Request URL:https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2Fandroid_asset%2Fwww%2Findex.html%23%2Fballot&4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M&callback=_xdc_._5gfso5&token=52928 Request Method:GET Status Code:200 Remote Address:172.217.0.42:443 Referrer Policy:no-referrer-when-downgrade alt-svc:hq=":443"; ma=2592000; quic=51303433; quic=51303432; quic=51303431; quic=51303339; quic=51303335,quic=":443"; ma=2592000; v="43,42,41,39,35" cache-control:no-cache, must-revalidate content-disposition:attachment content-encoding:gzip content-length:55 content-type:text/javascript; charset=UTF-8 date:Wed, 23 May 2018 19:22:36 GMT expires:Fri, 01 Jan 1990 00:00:00 GMT pragma:no-cache server:mafe status:200 x-frame-options:SAMEORIGIN x-xss-protection:1; mode=block :authority:maps.googleapis.com :method:GET :path:/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2Fandroid_asset%2Fwww%2Findex.html%23%2Fballot&4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M&callback=xdc._5gfso5&token=52928 :scheme:https accept:/ accept-encoding:gzip, deflate accept-language:en-US user-agent:Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM1.180201.021; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36 x-devtools-emulate-network-conditions-client-id:57617486-092f-46c3-896c-a17adcf27dc9 x-requested-with:org.wevote.cordova 1sfile:///android_asset/www/index.html#/ballot: 4sAIzaSyCM0vM1mzh56OuA5IfgW_U6Qd9jD99WH6M: callback:xdc._5gfso5 token:52928

[SailingSteve]

So for iOS we could use the x-requested-with:org.wevote.cordova but we would have to setup a parallel api account, since it appears that you can't configure for both "HTTP Referrers" and "iOS Apps"

I think I'll wait a week to see if I get a response on my StackOverflow question.

[SailingSteve]

I think this was closed by accident.

[DaleMcGrew]

Thank you @sailingsteve! Is there a workaround, or does this prevent us from auto completing addresses in iOS and Android? Please let me know if you need additional access to our Google API account.

[SailingSteve]

@DaleMcGrew no, the auto-complete works perfectly in Android, there is a problem with iOS.

[SailingSteve]

Using the unrestricted API key, this works correctly in iOS

[SailingSteve]

From the Google API Key page:

https://wevote.us/ http://localhost:3000/ https://localhost:3000/ https://api.wevoteusa.org/ http://localhost:8000/ http://localhost:8001/ https://localhost:8000/ https://localhost:8001/ http://wevote.us/ file_url//android_asset/www/index.html#/ballot file_url//var/containers/Bundle/Application/ fileurl//Users/* \_fileurl_\//Users/*

---

The "file_url//android_asset" line works nicely for Android. The "file_url//var/containers/Bundle/Application/* " line works for iOS on the phone (not on a simulator). The last two work for iOS in a simulator.

[SailingSteve]

With the config above, this works for Cordova on iOS and Android.

[SailingSteve]

This is working now

[crisz]

How is this supposed to be a restriction? I could use a stolen API key in any app without any problem

[DaleMcGrew]

Thank you @crisz for raising this question. When we run use the Google API key from our website, we can restrict the key to only be used from our domain. How can we have a similar restriction in our iOS and Android apps?

[crisz]

Too bad looks like __file_url__ and wildcards (*) don't work if used together, except if the wildcard is in the last position.

This is a big problem, since ios generates a HEX code for each installed application, and that code is included in the referrer like:

var/containers/Bundle/Application/<HEX code>/MyApp.app/www/index.html#/app

But, as mentioned above, a wildcard in that position won't work:

__file_url__//var/containers/Bundle/Application/*/MyApp.app/www/index.html#/app

It looks like a bug, who wants to open an issue in google issue tracker?

[luigi37]

As per today (10 Feb 2019) the following http referrers allows to show a Google map in a cordova app:

iOS:

__file_url__//var/containers/Bundle/Application/*

Android:

__file_url__//android_asset/www/index.html#/*
__file_url__//android_asset/www/index.html

cordova simulate (eg: simulate ios --target=chrome)

127.0.0.1
localhost

NOTE: SailingSteve answer is correct but it took me a while to understand the "Styling Markdown" has changed the double underscore into bold text... I hope it helps

[piotr-cz]

For iOS 13.1 it's probably __file_url__//private/var/containers/Bundle/Application/*

[SailingSteve]

Ooops, fixed the styling markdown on my earlier comment. Thanks.

[DaleMcGrew]

I can now set up an iOS specific and another Android Specific Google API key that is tied to the App's bundle. @SailingSteve I will send you the updated keys. They can be injected in this file for each specific bundle: src/index.html

Search for: https://maps.googleapis.com/maps/api/js?key=