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

Question

我正在使用 Browser 中的Google Reverse Geocoding API。

使用 API Key 无限制时，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 Web Service API 之一）。它返回错误“具有引用者限制的 API 密钥不能与此 API 一起使用。”在这种情况下！

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

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

Answer 1

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

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

示例（使用 TypeScript）：

1. 启用Maps Javascript API

2. 安装所需的包

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

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

注意：目前 Promise 仅返回测试版，v=beta。