从浏览器调用反向地理编码 API 时如何限制 API Key？

问题描述

我正在使用 浏览器 中的 Google Reverse Geocoding API。

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

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

现在，根据 restriction 指南，HTTP Referer 限制不适用于 Geocoding API（Google 网络服务 API 之一）。它返回错误“具有引用限制的 API 密钥不能与此 API 一起使用。”在这种情况下！

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

如果我想继续从浏览器调用地​​理编码 API，如何保护（限制）API 密钥？

解决方法

我发现我必须使用 Maps Javascript API 才能从具有 HTTP Referer 限制的浏览器（客户端）调用反向地理编码（地址查找） API 密钥。

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

示例（使用 TypeScript）：

1. 启用 Maps Javascript API

2. 安装所需的软件包

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

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: 'beta',});

  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));
});

注意：目前仅针对 Beta 版 v=beta 返回 Promise。