Forum Documentation Showcase Pricing Learn more

How do resolve the Google MAP error: “API keys with referer restrictions cannot be used with this API.”?


#1

Hello,

I’m developing an App with Bubble and while I have an API Key for Google Map and 0Auth (works pretty fine when I use to display GEO Locations on pages and Map ) I’m facing an issue to record a GEOLOCATION into a database field within a Workflow.

Every time the workflow try to record in a GEOLOCATION field the GEOLOCATIOn, I have an error and this message : “ Error hitting Google Geocode API: API keys with referer restrictions cannot be used with this API.

Any idea about the solution? Is it linked to usage limit (very little access so far as the App is not yet in service) or after investigating it looks like Google policy is now to move from “server restrictions” to IP Address…

https://developers.google.com/maps/faq#browser-keys-blocked-error
How do I resolve the error: “API keys with referer restrictions cannot be used with this API.”?

You are using any of the web service APIs with an API key restricted to an HTTP referer. For security reasons, web service APIs need to use API keys restricted to IP addresses . Switch your key restriction type from an HTTP referer restriction to an IP address restriction, or create a new API key if your key is already used with the Maps JavaScript API.

Have you faced this message before?
What would you recommend me?
What is Bubble Server IP Address?

Thanks in advance for your support
Best Regards
Pierre


#2

Referer is a browser restriction. So you can’t use it for a server restriction, as the server doesn’t work that way. Use IP restrictions instead if you need to.

I think we have a set IP range ?


#3

Hello Nigel,

Unfortunately, I’m not skilled enough to understand what you try to explain me on your message…

I’m using Google Map API to

(1) Display Map and display addresses on the App pages
(2) Save the GEO Location or Curent GEO Address address into a data base field via a Workflow (neither on User nor another data base)

(1) and (2) work with NO RESTRICTIONS at Google API setup
(1) works when I restrict to my App domain but (2) get an error message
(1) and (2) does not work when I restrict to 54.69.164.32 IP address which is Bubble.is IP address and my domain name IP Address that I get when I Ping

What should I do?
I’m lost
Pierre


#4

Hey folks, I have the same problem. All worked fine until I went onto a custom domain… I have set up the account with Google, got an API Key, and pasted it into both of the fields in Settings… but now I have no map functionality and no sense of where I will see an error message that can guide me to the problem.
HELP! :grimacing:
@neerja, can you help us with this?


#5

@3whiteshirts @antony Static IPs are only on Dedicated. For all other apps, using http referer is the right approach. Google developers console can be confusing but there is a lot of documentation available. If you still run into issues, please submit a bug report. We can send you instructions on adding us to a project associated with the key in the developers console.


String concatenation for state values?
#6

For anyone experiencing the issue described here: Basically, I believe at present that you must forego (give up on) having this type of security in your Google Maps API key.

The conflict is:

  • We do not have a dedicated IP address to use in forming an IP address restriction.
  • While can CREATE an HTTP referrer restriction, the Maps API (and Geolocation API, I believe) no longer supports this and Google throws this error.

So, basically, @neerja, those of us on non-dedicated do not seem to have a way of restricting our Google Maps/Geo (and probably some other) keys by domain or IP.


#7

Hi there @neerja… thanks for your usual rapid response! This is all a bit beyond me… just a simple cheat sheet that tells me what buttons to click on Google would make life an awful lot easier… thank you! :slight_smile:


#8

You don’t need a static IP address for this. You just need to know the range of IP addresses of the SERVER that you are running on. The server doesn’t have lots of IP addresses, but many DNS entries will resolve to the same IP.

It should not be that hard for bubble to tell you what the range is. Afterall, it is on AWS Portland and they have a range.

34.192.0.0 - 34.255.255.255

“http referer” won’t work from a workflow action because … it isn’t a browser so doesn’t have a referer. I think you used to be able to spoof it, but it looks like they closed that loophole.

If bubble refuse to play ball, then you can just do a call to https://api.ipify.org from your app, and display the result (don’t just use the IP address from the editor, as that is the address of the editor !) for dev and live and add those.


#9

That is probably an Amazon name server or something. From what I can tell (happy to be proved wrong) the address is in the 34. range. Amazon publish a list of IP addresses for their data centre.

Google will allow CIDR notation in the IP address field. So if you can work out the data centre from the AWS list, you could put this in.


#10

@antony We are working on documentation for Google Developers Console settings and use within your app. This should be live this week.

@NigelG We cannot give IP ranges as this changes frequently and can break apps if setup that way


#11

So you are on Amazon AWS, which gives an IP address range … And yet you can’t give an IP address range ?

You may have to explain that one to me :slight_smile:


#12

@neerja Please make sure your Google Developers Console Settings documentation covers settings for either Map display and Map info display (at user side - Domain name restriction) AND Bubble workflows involving interactions between Google Map geo location & Bubble data base with are executed at AWS somewhere in the world.
And as @antony was saying: "This is all a bit beyond me… just a simple cheat sheet with pictures that tells us what buttons to click on Google would make life an awful lot easier… thank you! "
Thanks in advance as now I’m lost and blocked by this issue.
Regards
Pierre


#13

Hi @neerja!
Did you create the documentation?
I’m doing a customer release of my app on Thursday and would like to have maps working!
Best wishes,
Antony.


#14

Hi @antony, here is the guide to maps and keys in your Bubble app and Google Developers Console.

  1. In Google Developers Console (link), sign in > add billing details which is now required for Google APIs > you will likely get some free credits that will help while integrating with your Bubble app > create a project and make sure your billing details is enabled for that project

  2. From the menu, select ‘API & Services’ > credentials > click ‘create credentials’ > generate 2 API Keys with one called Client and another called Server to help you identify which is being used for a call > we will refine settings for these keys in the next steps

  3. Client key

  • Application restrictions > enable ‘http referrers’ > add your app domain like this ‘https://appname.bubbleapps.io
  • API restrictions> none required

  1. Server key
  • Application restrictions > none required
  • API restrictions:
    – Geocoding API
    – Places API
    – Geolocation API
    – Maps JavaScript API

  1. Back in your Bubble app editor, go to app settings > general > general services API keys:
  • Google Geocode API key > paste Server key from (4)
  • Google Maps API key > paste Client key from (3)

Test with browser console open though we display error message too if your setup is incorrect. You should be all set!


#15

Without application restrictions, won’t someone else be able to hijack your key and use your quota?


#16

Hi there @neerja

Thanks for the details!

I’ve been through your instructions, but I didn’t get the options to select for the API restrictions in Step 4. I only got this list:

maps

And then the mapping still didn’t work in my Bubble app.

So I went to the browser’s console, and saw an error message about geocoding not being enabled. That gave me a link to another Google Console page which with a couple of clicks had everything set up and working. At one point in those “couple of clicks” I had to choose “Google Places” as one of three options.

There must be something else to do around enabling “Google Places”? Would you be able to take a look at this and update the post so that the instructions are more straightforward for those who follow?

Many thanks!
Antony.


#17

You will only get the APIs that you have enabled in that restrict list.

image

Go into Library. Search for the API you want, click on it, then “Enable”.