如何从浏览器调用反向地理编码API时限制API密钥?

Question

我使用谷歌反向地理编码API从浏览器.

当使用API Key时，API工作正常，没有限制．例如:https://maps.googleapis.com/maps/api/geocode/json?key=API_KEY_WITH_NO_RESTRICTION&latlng=41.8857156,-87.64823779999999- OK

但是当我从浏览器调用API时，我想限制API密钥，最好是来自某些域的请求。

现在，根据限制指南，HTTP Referer限制不能用于地理编码API(Google Web Service API之一)。它返回错误"带有引用限制的API键不能与此API一起使用"。在这种情况下!

另一个选择是使用IP地址限制． 但如果呼叫来自服务器，则似乎更合适。在这种情况下，可以在限制中添加服务器地址。

如果我想继续从浏览器调用地理编码API，我如何保护(限制)API密钥?

Answer 1

我发现我必须使用Maps Javascript API，以便能够从浏览器调用反向地理编码(地址查找)(客户端)HTTP Referer限制

在我最初的实现中，我使用了浏览器中的fetch(requestUrl)，因为它看起来非常方便，最终出现了上述问题。

示例(使用TypeScript):

1. 启用地图Javascript API

2. Install required packages

npm install @googlemaps/js-api-loader
npm i -D @types/google.maps

3. reverseGeo.ts

import { Loader } from '@googlemaps/js-api-loader';
const loadScript = async (): Promise<void> => {
const loader = new Loader({
apiKey: API_KEY_WITH_REFERRER_RESTRICTION,
version: 'weekly',
});
await loader.load();
};
export async function reverseGeo(
lat: number, long: number
): Promise<string> {
await loadScript();
const geocoder = new google.maps.Geocoder();
const latlng = {
lat: lat,
lng: long,
};
try {
const { results } = await geocoder.geocode({ location: latlng });
if (results && results[0]) {
return results[0].formatted_address;
}
} catch (e) {
// handle exception
}
throw new TypeError('Zero result or reverse geo Failed'); // or handle other way
}

4. reverseGeo.spec.ts

import { reverseGeo} from './reverseGeo';
it('should test reverseGeo', async () => {
console.log(reverseGeo(22.5726, 88.3639));
});