Securing Google Maps API key in Ionic IOS app

Using Ionic 5, Angular 10, GCP

In my GCP project, I created a new api key. I restricted the key to IOS apps, and properly set my IOS application bundle id.

The api key is being used in an Ionic 5 app, which has been built in Xcode and is running on an IOS device.

The api key is being passed on a Google Maps static API request.

To test the api key restriction I crafted a url that looks like this:

https://maps.googleapis.com/maps/api/staticmap?center=290%20Bremner%20Blvd%2C%20Toronto%2C%20ON%20M5V%203L9&key=restrictedkeyhere&zoom=12&size=400x400

When I load this url from my laptop web browser a map is returned, but I expected this not to work, and instead that I would receive an http 403 error.

Any insight into what I’m missing here appreciated; how do I properly restrict my maps api key when using it in an Ionic 5 app?

Hi - did you manage to resolve this?

Sorry for the delayed response. Yes, for the most part I gained a good understanding, see here: ionic framework - GCP api key restrictions - Stack Overflow. If you have any insights or suggestions I’d love to hear them.

Thanks for that I’ll check it out