react-geocode - get address from lat/lng with referrer restricted API? - reactjs

I am trying to use react-geocode to get a user's address from their lat/lng coordinates, but unfortunately I am getting the error API keys with referrer restrictions cannot be used with this API. Is it possible to get react-geocode to use a different API which does allow referrer restrictions? Otherwise how would I go about doing this, as I cannot remove the referrer restrictions for my API key. Is there a way to reverse geocode lat/lng coordinates using the Google Maps API which I am already using to display my map anyway?
import Geocode from "react-geocode";
Geocode.setApiKey("AIzaSyDsb7F-VyBJn7r4LilYH_lRHBpPfgyUga8");
Geocode.enableDebug();
Geocode.fromLatLng("48.8583701", "2.2922926").then(
response => {
const address = response.results[0].formatted_address;
console.log(address);
},
error => {
console.error(error);
}
);
CodeSandbox

If you want to switch to Google Maps, their (reverse) geocoding is pretty straight forward. Obviously you want to get a Google Maps API Key (get it here) to write a GET request:
https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY
Parsing the results should be easy. :)
Sources:
https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding
https://developers.google.com/maps/documentation/geocoding/intro#reverse-example

It means Google has blocked access from referrer-restricted API key, and it's very unlikely that Google has two versions of same API with different API restrictions, so you can't use Geocoding API with your restricted key. But you can create other API key with other restrictions applied, i.e. IP restriction.

Did you consider using reverse proxy function of web server? for nginx, you can set it the same to the restricted website configured in your google geo api with command proxy_set_header.
However you have to change the GOOGLE_API to your own webserver here in react-geocode .

Since you've placed a referrer restriction on your API key, it will be limited to executing on the browser with the web service APIs, including the Geocoding API. It didn't work for me even when manually setting the referrer in the request headers. You can find the other web service APIs on this page: https://developers.google.com/maps/web-services/
Important: If you are using any of the web service APIs with an API key that has referer restictions, your requests will fail with the error message: "API keys cannot have referer restrictions when used with this API." You should switch to using a server restriction.
You'll want to create a separate key to use server-side. You can change your restriction from a browser restriction to a server restriction by using IP addresses to restrict access, instead of browser referrers.
Alternatively, you can continue using a browser key and geocode client-side (JavaScript), then return the result to the backend.

You have to add Geocoding API
to your google maps library, and then you can add to your API restrictions for your API key.

Related

Coinbase API keys required for non-auth endpoints?

Using the coinbase API (in Python) to try and get price information for currency pairs. supposedly this endpoint does not require authentication and sure you can get the information from a http request. But if you want to use the Client from coinbase.wallet.client as in the examples, you are forced to provide API keys.
1. Is there another class that can be used to retrieve price data without providing API keys?
2. If you must create an API key for your account, what is the absolute minimum permissions you need to enable on the API key to allow getting price data for currency pairs
For data endpoints in the API, not requiring auth, turns out you can simply pass any string as the api key and the request will succeed.

Google API Request stopped working

I have an API that I use to get the events from multiple accounts. Recently the API stopped working and I am not able to figure out why.
Here is an example of my request: https://www.googleapis.com/calendar/v3/calendars/pub500.mankato%40gmail.com/events?key=myKey
The call returns a Google_Service_Exception - (400) Bad Request
From you question, I take it that you are managing authentication for calling APIs. Based on the information provided by Michael, I think you will find this GCP documentation for using API keys helpful:
https://cloud.google.com/docs/authentication/api-keys#api_key_restrictions
The answer to this question (is|was) to validate the error response message from the API and read it carefully. I also recommend rechecking API settings(Console), the API call and to check every single step if its use in any kind of framework. (Test against the API)
Google_Service_Exception - (400) Bad Request
seems to be invalid API credentials (API key)
Update after creating new API key:
"(403) The request did not specify any referer.
Please ensure that the client is sending referer
or use the API Console to remove the referer restrictions."
That means you have to specify a referer in your API call or go to your API console (where you created the new KEY) and remove the "referer restriction"

Google Places web api not cooperating with superagent

I'm trying to query the places autocomplete api by google, using the following snippet
request.get(`https://maps.googleapis.com/maps/api/place/autocomplete/`).query(params)
With the correct params the code will fail, giving me a CORS exception
Failed to load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=amsterdam&key={super secret key}: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7000' is therefore not allowed access.
If I switch to my network tab, I can see that the request itself is working perfectly fine and that it even returns the date I want it to.
I'm working with superagent-es6-promise.
The CORS headers are not set for Places API web service on Google backend servers. So you won't be able to call Places API web service from the client side JavaScript code due to the Same-Origin policy of the browsers.
In order to use Places on client side JavaScript you have to use a Places library of Google Maps JavaScript API. The places library has nearby and text search functionality, also autocomplete widget and service very similar to the corresponding web service.
For further details please have a look at the documentation:
https://developers.google.com/maps/documentation/javascript/places
Hope it helps!

get value of access token

I started using google API recently . I am using simpleauth https://github.com/crhym3/simpleauth for authentication to google app engine . Now I am using google blogger API for publishing my blog and fetching data .
This API requires access_token value to use the API https://developers.google.com/blogger/docs/3.0/using#RetrievingPostsForABlog for Authorization . I cant find a way to get value of access token .
Is there a way to get the value of acces token or am I doing something wrong ?
You need to register your webapp with Google to get a client ID and client secret. Then, you can configure your OAuth2 library with these details to allow you to send fully authenticated requests from your webapp to Blogger.
For the specific scenario you listed, retrieving a blog post, I think you can follow step 1 of this page and then follow these steps. You should be able to copy+paste the key from there into the query params of the GET request.
To issue fully authenticated requests, for publishing new posts, for example, you'll have to get your OAuth2 library with the client ID and client secret and have it issue the requests for you.

Cloud Endpoints HTTP Cookies

I am implementing Cloud Endpoints with a Python app that uses custom authentication (GAE Sessions) instead of Google Accounts. I need to authenticate the requests coming from the Javascript client, so I would like to have access to the cookie information.
Reading this other question leads me to believe that it is possible, but perhaps not documented. I'm not familiar with the Java side of App Engine, so I'm not quite sure how to translate that snippet into Python. Here is an example of one of my methods:
class EndpointsAPI(remote.Service):
#endpoints.method(Query_In, Donations_Out, path='get/donations',
http_method='GET', name='get.donations')
def get_donations(self, req):
#Authenticate request via cookie
where Query_In and Donations_Out are both ProtoRPC messages (messages.Message). The parameter req in the function is just an instance of Query_In and I didn't find any properties related to HTTP data, however I could be wrong.
First, I would encourage you to try to use OAuth 2.0 from your client as is done in the Tic Tac Toe sample.
Cookies are sent to the server in the Cookie Header and these values are typically set in the WSGI environment with the keys 'HTTP_...' where ... corresponds to the header name:
http = {key: value for key, value in os.environ.iteritems()
if key.lower().startswith('http')}
For cookies, os.getenv('HTTP_COOKIE') will give you the header value you seek. Unfortunately, this doesn't get passed along through Google's API Infrastructure by default.
UPDATE: This has been enabled for Python applications as of version 1.8.0. To send cookies through, specify the following:
from google.appengine.ext.endpoints import api_config
AUTH_CONFIG = api_config.ApiAuth(allow_cookie_auth=True)
#endpoints.api(name='myapi', version='v1', auth=AUTH_CONFIG, ...)
class MyApi(remote.service):
...
This is a (not necessarily comprehensive list) of headers that make it through:
HTTP_AUTHORIZATION
HTTP_REFERER
HTTP_X_APPENGINE_COUNTRY
HTTP_X_APPENGINE_CITYLATLONG
HTTP_ORIGIN
HTTP_ACCEPT_CHARSET
HTTP_ORIGINALMETHOD
HTTP_X_APPENGINE_REGION
HTTP_X_ORIGIN
HTTP_X_REFERER
HTTP_X_JAVASCRIPT_USER_AGENT
HTTP_METHOD
HTTP_HOST
HTTP_CONTENT_TYPE
HTTP_CONTENT_LENGTH
HTTP_X_APPENGINE_PEER
HTTP_ACCEPT
HTTP_USER_AGENT
HTTP_X_APPENGINE_CITY
HTTP_X_CLIENTDETAILS
HTTP_ACCEPT_LANGUAGE
For the Java people who land here. You need to add the following annotation in order to use cookies in endpoints:
#Api(auth = #ApiAuth(allowCookieAuth = AnnotationBoolean.TRUE))
source
(Without that it will work on the local dev server but not on the real GAE instance.)

Resources