如何解决从浏览器调用反向地理编码 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):
-
安装所需的软件包
npm install @googlemaps/js-api-loader
npm i -D @types/googlemaps
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
}
reverseGeo.spec.ts
import { reverseGeo} from './reverseGeo';
it('should test reverseGeo',async () => {
console.log(reverseGeo(22.5726,88.3639));
});
注意:目前仅针对 Beta 版 v=beta 返回 Promise。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。