We're trying to develop an geoplacement app for one of our clients, and we want first to test it in out own domain.
We have signed for Google Maps JavaScript API, and we have a valid browser key and our domain, www.grupocamaleon.com, has been authorized to use that key.
But we can't make even the easiest example to run without error.
We have, in our domain and with our key, the following demo:
(1) http://www.grupocamaleon.com/boceto/aerial-simple.html
But it doesn't work, and Firebug console says:
"Google Maps API error: Google Maps API error: RefererNotAllowedMapError (link to Google documentation on RefererNotAllowedMapError) Your site URL to be authorized: (1)"
My credential page is missing the possibility of adding referrers to accept, so solutions involving adding referrers are not possible right now.
My credential Page:
Why do we get that error? How can we fix it?
I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn't work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.
What solved it for me was adding the actual protocol too; http://domain.tld/* is the only one I need for it to work on my site. I guess I'll need to add https://domain.tld/* if I were to switch to HTTPS.
Update: Google have finally updated the placeholder to include http now:
Come on Google, you guys are smarter than the API Credential page lets on. (I know because I have two sons working there.)
The list of "referrers" is far pickier than it lets on. (Of course, it should be more forgiving.) Here are some rules that took me hours to discover:
The order in the list is important. Moving your URL up in the list may make it work.
"http://" prefix is required.
Even "localhost" needs it: "http://localhost/foo/bar.html"
A trailing * as a wildcard seems to work as if it is a string compare.
Even with "http://localhost/foo/bar.html", "http://localhost/foo/bar.html?arg=1" will not work. (Will a wildcard help?)
For both prod dev, have (at least) two rows: "http://localhost/foo/bar.html" and "http://my.site.com/foo/bar.html"
A port number (8085? 4000?) does not seem to be necessary.
There are probably other rules, but this is a tedious guessing game.
Wildcards (asterisks) ARE NOT allowed in the subdomain part.
WRONG: *.example.com/*
RIGHT: example.com/*
Forget what Google says on the placeholder, it is not allowed.
According to the documentation, 'RefererNotAllowedMapError' means
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on the Google Developers Console.
I have the Google Maps Embed API set up for my own personal/work use and thus far have not specified any HTTP referrers. I register no errors. Your settings must be making Google think the URL you're visiting is not registered or allowed.
Just remind that if you just change it, it may take up to 5 minutes for settings to take effect.
I tried many referrer variations and waiting 5 minutes as well until I realized the example Google populates in the form field is flawed. They show:
*.example.com/*
However that only works if you have subdomain. or www. in front of your domain name. The following worked for me immediately (omitting the leading period from Google's example):
*example.com/*
According the google docs
this happened because the url on which you are using the Google Maps API, it not registered in list of allowed referrers
EDIT :
From Google Docs
All subdomains of a specified domain are also authorized.
If http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized
So,Please configure http://testdomain.com domain, then your http://www.testdomain.com will start work.
Check you have the correct APIS enabled as well.
I tried all of the above, asterisks, domain tlds, forward slashes, backslashes and everything, even in the end only entering one url as a last hope.
All of this did not work and finally I realised that Google also requires that you specify now which API's you want to use (see screenshot)
I did not have ones I needed enabled (for me that was Maps JavaScript API)
Once I enabled it, all worked fine using:
http://www.example.com/*
I hope that helps someone! :)
The Problem
Google suggests the format *.example.com/*This format does not work.
The Solution
Check the browser console for the Google Maps JavaScript API error: RefererNotAllowedMapError
Underneath the error it should have: "Your site URL to be authorized: https://example.com/".Use that url for the referrer and add a wildcard * to the end of it (https://example.com/*, in this case).
I found that even your HTTP Referreres are valid enough, wrong set of API Restrictions causes Google Maps JavaScript API error: RefererNotAllowedMapError.
For example:
You are using Javascript API for the key.
Add http://localhost/* to Application Restrictions / HTTP Referrences
Choose Maps Embed API instead of Maps Javascript API
This causes RefererNotAllowedMapError
There are lots of supposed solutions accross several years, and some don’t work any longer and some never did, thus my up-to-date take working per end of July 2018.
Setup:
Google Maps JavaScript API has to work properly with…
multiple domains calling the API: example.com and example.net
arbitrary subdomains: user22656.example.com, etc.
both secure and standard HTTP protocols: http://www.example.com/ and https://example.net/
indefinite path structure (i.e. a large number of different URL paths)
Solution:
Actually using the pattern from the placeholder: <https (or) http>://*.example.com/*.
Not omitting the protocol, but adding two entries per domain (one per protocol).
An additional entry for subdomains (with a *. leading the hostname).
I had the feeling that the RefererNotAllowedMapError error still appeared using the proper configuration (and having waited ample time). I deleted the credential key, repeated the request (now getting InvalidKeyMapError), created new credentials (using the exact same setup), and it worked ever since.
Adding mere protocol and domain seemed not to have included subdomains.
For one of the domains, the working configuration looks like this:
(As text:)
Accept requests from these HTTP referrers (web sites)
https://*.example.com/*
https://example.com/*
http://*.example.com/*
http://example.com/*
None of these fixes were working for me until I found out that RefererNotAllowedMapError can be caused by not having a billing account linked to the project. So make sure to activate your free trial or whatever.
This is another sh1tty Google product with a terrible implemenation.
The problem I have found with this is that if you restrict an API key by IP address, it wont work... BUT far be it from Google to make this point clear... It wasn't until troubleshooting and researching I found:
API keys with an IP addresses restriction can only be used with web
services that are intended for use from the server side (such as the
Geocoding API and other Web Service APIs). Most of these web services
have equivalent services within the Maps JavaScript API (for example,
see the Geocoding Service). To use the Maps JavaScript API client side
services, you will need to create a separate API key which can be
secured with an HTTP referrers restriction (see Restricting an API
key).
https://developers.google.com/maps/documentation/javascript/error-messages
FFS Google... Pretty important piece of information that would be good to clarify on setup...
Accept requests from these HTTP referrers (web sites)
Write localhost directory path
I experienced the same error:
This link talks about how to set up API key restrictions: https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions
In my case, the problem was that I was using this restriction:
HTTP referrers (web sites) Accept requests from these HTTP referrers
(web sites) (Optional) Use *'s for wildcards. If you leave this blank,
requests will be accepted from any referrer. Be sure to add referrers
before using this key in production.
https://*.example.net/*
This means that URLs such as https://www.example.net or https://m.example.net or https://www.example.net/San-salvador/ would work. However, URLs such as https://example.net or https://example.net or https://example.net/San-salvador/ would not work. I simply needed to add a second referrer:
https://example.net/*
That fixed the problem for me.
I add 2 website domains, set "*" in subdomain is not working but specific subdomain "WWW" and non-subdomain have been worked for my websites using the same Google Map API key.
dont' use "*" in subdomain
Hope it help.
That your billing is enabled
That your website has been added to Google Console
That your website is added to the referrers in your app.
(do a wildcard for both www and none www)
http://www.example.com/* and http://example.com/*
That Javascript Maps is enabled and you are using the correct credentials
That the website has been added to your DNS to enable your Google Console above.
Smile after it works!
Enable billing for Google project fixed the problem.
you show a screenshot of your api credentials page, but you have to click on "Browser key 1" and go from there to add referrers.
For deeper nested pages
If you have a project in a folder for example or nested pages
http://yourdomain.com/your-folder/your-page you can enter this in
http://yourdomain.com/*/*
The important part being /*/*/* depending how far you need to go
It seems that the * will not match / or get into deeper paths..
This will give your full domain access, well unless you have deeper nesting than that..
I struggled to make this work as well, but here are some pointers:
The URLs set as referrers include http, e.g. http://example.com/*
Google Maps JavaScript API was enabled
Billing was set-up on this account
Once all of this above was resolved, the maps displayed as expected.
http://www.example.com/* has worked for me after days and days of trying.
I got mine working finally by using this tip from Google:
(https://support.google.com/webmasters/answer/35179)
Here are our definitions of domain and site. These definitions are specific to Search Console verification:
http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site
I was attempting to use the Places API (Autocomplete) and had to also enable the Maps Javascript API from within Google Cloud Console before the Places API would work.
Removing the restrictions (to None) worked for me.
In my experience
http://www.example.com
worked fine
But, https required /* at the end
Chrome's Javascript console suggested I declare the entire page address in my HTTP referrer list, in this instance http://mywebsite.com/map.htm Even though the exact address is http://www.mywebsite.com/map.htm - I already had wildcard styles listed as suggested by others but this was the only way it would work for me.
This worked for me. There are 2 major categories of restrictions under api key settings:
Application restrictions
API restrictions
Application restrictions:
At the bottom in the Referrer section add your website url
" http://www.grupocamaleon.com/boceto/aerial-simple.html " .There are example rules on the right hand side of the section based on various requirements.
API restrictions:
Under API restrictions you have to explicitly select 'Maps Javascript API' from the dropdown list since our unique key will only be used for calling the Google maps API(probably) and save it as you can see in the below snap. I hope this works for you.....worked for me
Check your Script:
Also the issue may arise due to improper key feeding inside the script tag. It should be something like:
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
If you are working on localhost then do not include http or https in the url.
Use "localhost" without protocols. I struggled for days and found it working.
Something no one else seems to have mentioned in here that may be important is also this:
Http referrers are case sensitive.
So say you have someone access https://www.example.com/webpage, and someone wrote a link to that page as https://www.example.com/Webpage, you need BOTH entries, otherwise one of them is not going to work (unless you URL-rewrite to remove caps, or replace /Webpage with /*, but in our case, we want to limit down to folders under a certain domain, so this is a pain in the butt).
I feel like this is a bit stupid. Yes, URLs can be case sensitive, but not to the point where you would restrict a folder if its in caps, but not if it's lowercase, right?
Related
I'm having an issue getting Login Kit to work. Similar to the question asked here I have the correct redirect domain listed in tiktok settings and the redirect_uri is basically just "domain/tiktok" but no matter what I do I get the same error message:
Below is my backend code - it's basically exactly the same as what is listed in the tiktok docs. Any help on this would be much appreciated!
const CLIENT_KEY = 'my_key'
const DOMAIN = 'dev.mydomain.com'
const csrfState = Math.random().toString(36).substring(2);
res.cookie('csrfState', csrfState, { maxAge: 60000 });
const redirect = encodeURIComponent(`https://${DOMAIN}/tiktok`)
let url = 'https://www.tiktok.com/auth/authorize/';
url += '?client_key=' + CLIENT_KEY;
url += '&scope=user.info.basic,video.list';
url += '&response_type=code';
url += '&redirect_uri=' + redirect;
url += '&state=' + csrfState;
res.redirect(url);
UPDATE 8/13/2022
I submitted the app for review and was approved so the status is now "Live in production" instead of "staging". The issue is still there - still showing error message no matter what domain / callback URL I use
UPDATE 8/16/2022
OK so I've made some progress on this.
First off - I was able to get the authentication/login screen to finally show up. I realized to do this you need to:
Make sure that the status of your app is "Live in production" and not "Staging". Even though when you create a new app you may see client_key and client_secret show up don't let that fool you - Login Kit WILL NOT WORK unless your app is submitted and approved
The redirect_uri you include in your server flow must match EXACTLY to whatever value you entered in "Registered domains" in the Settings page. So if you entered "dev.mydomain.com" in Settings then redirect_uri can only be "dev.mydomain.com" not "dev.mydomain.com/tiktok".
I think I might know what the issue is. My guess is that before - on the Settings page you had to enter the FULL redirect URL (not just the domain) and whatever redirect uri was included in the authorization query was checked against this value which was saved in TikTok's database (whatever was entered in the Settings page when path/protocol were allowed). At some point recently, the front-end business logic was changed such that you could only enter a domain (e.g., mydomain.com) on the Settings page without any protocols - however TikTok's backend logic was never updated so during the Login flow they are still checking against an EXACT match for whatever was saved in their DB as the redirect uri - this would explain why an app that was previously using the API with a redirect uri that DOES include protocols (e.g., for Later.com their redirect uri is https://app.later.com/users/auth/tiktok/callback) continues to work and why for any app attempting to save redirect WITH protocols are getting the error message screen. My gut feeling is telling me that the error is not on my part and this is actually a bug on TikTok's API - my guess is it can be addressed either by changing the front-end on the Settings page to allow for path/protocols (I think this is the ideal approach) or to change their backend so that any redirect uri is checked such that it must include 1 of the listed redirect domains.
I've been emailing with the TikTok team - their email is tiktokplatform#tiktok.com - and proposed the two solutions I mentioned above. I suggest if you're having the same issue you email them as well and maybe even link this StackOverflow question so that maybe it will get higher priority if enough people message them about it.
If you're looking for a shot-term hack I'd recommend creating a dedicated app on AWS or Heroku with a clean domain (e.g., https://mydomain-tiktok.herokuapp.com) and then redirect to either your dev or production environment by appending a prefix to the "state" query (e.g., "dev_[STATE_ID]"). I'll just reiterate I consider this a very "hacky" approach handling callbacks and would definitely not want to use something like this in production.
In my case, the integration worked after doing following steps:
In TikTok developers page:
Like #eugene-blinn said: make sure your app is in Live in production status (I couldn't find anything in the documentation about why Staging apps don't work);
Add the Login Kit product to your app and set the Redirect domain field with your host domain, for example: mywebsite.com.
In your code:
From my tests, I could add whanever url path I wanted, the only constraint was that the domain should match with step 2. So, yes, you can add https://mywebsite.com/whatever/path/you/want in redirect_url parameter.
That's it. It should work with these 3 steps.
Additionally, I got other issue related to use specific features in the scope property (like upload or read videos, etc), so here the solution as well:
Only add Video Kit product to the TikTok app and set video.upload or video.list in the scope authorize request won't work unless you also add the TikTok API product in your TikTok app as well. Btw, it neeeds to be approved too.
TikTok fixed the bug that resulted in URL mismatch with redirect domain from working. However, they fixed it only for paths (e.g., /auth/tiktok) but PORT additions still result in an error - so www.domain.com:8080/auth/tiktok won't work but www.domain.com/auth/tiktok WILL work
UPDATE 10/3/2022
Got the following response directly from TikTok engineering team:
At this point, we only support production integrations with TikTok for Developers and require that you have a URL without port number. However, we understand from your communication that this makes it harder for you to build, test, and iterate your integration with us. Unfortunately, at this time, we do not have a timeline for when this additional support for development servers will be added. We request that you only redirect to URLs without port numbers. Thank you for the feedback.
The frontend of the developer's dashboard still rejects protocol and path in validation. However, the backend skips the path validation.
To be able to update the "Redirect domain" simply:
Open dev tools in chrome and go to the "Network" tab.
Clic on "Save changes" button on the dashboard.
Right clic on the "publish" request that appeared and copy as cURL.
Modify the "redirect_domains" field in the request before pasting it in the terminal.
I believe the app still needs to be approved and in production to get it to work. I'm still waiting for approval and it has been a couple of weeks.
UPDATE 9/17/2022
Just like #mauricio-ribeiro, my app worked after it was approved to production. Setting up the redirect domain without path and scheme works just fine.
I had the same problem, my solution:
1.- In my TikTok App dashboard, the “redirect_uri” is: mydomain.com, without http/https and without path (/my-redirect-url). Also you can add subdomains using this rule
2.- In my code, I have to add http or https to the redirect_uri, and feel free to use path (/my-redirect-uri)
I hope this help you
I'm validating addresses to make sure they exist. I'm using the google API to do this. I have a google API key and it works great.... until I go over 100. At request 110 I get this
{
candidates: [],
error_message: 'You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account',
status: 'REQUEST_DENIED'
}
All I'm doing is looping through a list of addresses. It works perfectly up until then. And it's always at the exact same point.
I've tried slowing it down (thinking i'm making too many requests too quickly) by wrapping it in a while loop and only doing 50 at a time, but all that does it slow it down but still crashes at exactly 110.
Any ideas why or how or how to fix it? It is an unpaid API key if that helps (wondering if they have a request limit, I can't find anything saying they do)
While it seems most likely that you have reached the quota allowed on an non-billing account, the status code should read "OVER_QUERY_LIMIT" which indicates that you are over your quota, rather than "REQUEST_DENIED", which you are getting.
https://developers.google.com/maps/documentation/geocoding/intro#StatusCodes
Further down, on the same page you have a suggestion as to the likely cause:
"REQUEST_DENIED" indicates that the request was denied. Possibly because the >request includes a result_type or location_type parameter but does not include an >API key or client ID.
You have to set up a billing account.
Turned out to be one of the parameters I was sending to it had a special character that was breaking it. I printed out the URL before sending it to see what was going on.
TLDR had to use encodeURIComponent on the addresses I was sending, before sending them
I use below function to get the Continent Code from the api which works fine on localhost but fail in live environment which is website
$.getJSON('//www.geoplugin.net/json.gp?jsoncallback=?', function (data) {
// console.log(JSON.stringify(data, null, 2));
console.log(JSON.stringify(data.geoplugin_continentCode));
});
Warning which i see in Console is
Loading failed for the with source
“https://www.geoplugin.net/json.gp?jsoncallback=jQuery16407901144106031991_1537089290623&_=1537089292750”.
I am not sure why it fails on website https://www.example.com
could SSL version some problem as i am not sure as i tried it on fiddle & it works fine http://jsfiddle.net/om8ahkp3/
UPDATE
Since problem was due to crossdomain issue which as this api used a different url for ssl version. i was not able to use this ssl version as it was not free.
So ended up using another api which had free option also limited to 50k request on monthly basis.
$.ajax({
url: 'https://api.ipgeolocation.io/ipgeo?fields=is_eu& excludes=ip&apiKey=YOURKEY',
dataType: 'json',
success: function (json) {
console.log("json.is_eu " + json.is_eu);
}
});
What is the whole problem?
You want to access to a third site (crossDomain). So, That site decides that you can access to it, or not. When a site provides a service (similar geo service that you have used it), it determines which part of it's services are free.
In your case, if your source site's protocol is http (like as localhost) and dest site (service provider site) is http too, you can access to this geo service with your above code (because this third site allows this now). But if you want to access to this service from a https site (I think you are trying this now) the geoPlugin don't allow you easily or free!
In this cases, the destination sites, provide another urls and define user levels (to getting money for special services.).
In act, if your dest site was for yourself too(which it is not in this case), you could add needed access to specific referer sites, but now...
I look at its site to be sure. You must use this url in this case:
https://ssl.geoplugin.net/json.gp?k=yourAPICode
But this is not all of things! What is k in above url? This site writes:
"For SSL access, an API Key is required to offset certificate prices and costs €12 per year."
I don't know, but if you need it, you should search for free plugins (if exists) or buy it.
How can I get the storage usage of Gmail programmatically? This value appears in two places, but I cannot find an API for it.
The main goal is to automatically log Gmail storage usage to a Google Sheet and graph the storage usage trend.
What I've tried:
DriveApp.getStorageUsed() does not include Gmail usage.
Reports API (gmail_used_quota_in_mb) is not available for consumer Gmail accounts (only G Suite)
Scraping www.google.com/settings/u/0/storage is not possible because a log-in is required, even when spoofing cookies (probably detects a new device/IP address).
Not the programmatic answer I am looking for, but this is my manual work-around until I discover an API method:
Examine the source code for google.com/settings/u/0/storage
Find exact bytes of usage embedded in JSON:
...
,[["Drive",["24004828","0.02 GB"]
]
,["Gmail",["4859735562","4.52 GB"]
]
,["Google Photos",["0","0 GB"]
...
Log that (4,859,735,562) into a Google Sheet, along with the current date/time
Using precise measurements of bytes and seconds, it should only take a few measurements to get an accurate trend. (And I don't need to scale this for multiple accounts.)
You can use Google Drive V2 API.
About: get returns quotaBytesByService[] where you can filter service by name (e.g. GMAIL, in your case)
If you want to use the API, you have to enable the advance API option and use it.
Note that the version 3 does not give you the service breakdown.
I have a site on Vue with vue-router navigation which needs to work with google drive. I've set up the app, tokens uri in the google developer's console and it works fine on its own:
https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=668711006022-7igan4in4ob7ngtsmqjh8ld7j8hs5t16.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Ftwine.teivaz.com/auth&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive
But when it came to integrating to vue-router navigation I faced a problem. After making a request to the google ouath2 server it redirects me to a specified address with the token in url params like this:
http://twine.teivaz.com/auth#access_token=ya29.Ci8o1gdfpkN51F3yjAbW-v9r-JN9YD3ze5B2123rvv62KuFc5b1OgzF-9XQ&token_type=Bearer&expires_in=3600
I've came up with several solutions:
Set authorized redirect URIs to match the vue-router's format to simply read as parameter, like this:
http://twine.teivaz.com/#!/login/
But the google console does not allow me to do that giving a message
Invalid Redirect: http://twine.teivaz.com/#!/login/ cannot contain a fragment.
It seems that I won't be able to paste in google console my vue-readable URI from the first approach. Is it supposed to be like this or it's a bug in the console?
Capture token from url from default page. But in the vue-router I have a default redirect which drops all parameters:
TwineRouter.redirect({
'*': '/stories'
});
It should be there for all url without parameters.
Is there any way to parse the parameter before redirect occurs and maintain behaviour for all cases when there is no token in parameters?
Create another page that will simply save the token to cookies and redirect to the index. And set it up in the google console:
http://twine.teivaz.com/login.html
It seems that this option is a poor design but it might actually work.
Is it the best option among given? Is there anything I missed?
a bit too late I think, but you can use
mode: 'history'
in vue-router, this eliminates # thing from the URL.
http://router.vuejs.org/en/essentials/history-mode.html