使用 Restriction for Ionic 应用程序保护 Google Maps API 密钥

Question

我正在开发 ionic 应用程序，我想将用户从应用程序重定向到谷歌地图应用程序以向用户显示路线，但是当我将 Key restriction 设置为 NONE 时，它可以完美运行。

但是当我将限制设置为 Android apps 并提供正确的包名称和 SHA-1 时，它给了我错误：Google Maps JavaScript API error: RefererNotAllowedMapError。

我认为是因为：

ionic app is basically a webview. (which I am using)

如果这是我如何保护我的 API 密钥的原因？

我在安卓应用中使用代码打开谷歌地图是

showDirection(currentLocation, destLocation) {
    let destination = destLocation.latitude + ',' + destLocation.longitude;
      var directionsService = new google.maps.DirectionsService;
      directionsService.route({
        origin: currentLocation,
        destination: destination,
        travelMode: 'DRIVING'
      }, function (response, status) {
        if (status === 'OK') {
          let mapUrl = 'http://maps.google.com/?';
          var route = response.routes[0];
          route.legs.forEach((value, index) => {
            if (index == 0) {
              mapUrl += 'saddr' + value.start_address + '&daddr=' + value.end_address;
            } else {
              mapUrl += '+to:' + value.end_address;
            }
          });
          window.location.href = mapUrl;
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
  }

有人可以帮忙吗？

Answer 1

Android 应用限制仅对适用于 Android 的 Google Maps SDK 有效。在您的情况下，当您将 Ionic 与 WebView 和 Google Maps JavaScript API 一起使用时，唯一支持的限制是 HTTP 引荐来源网址。

您可以在此页面上自行查看每个 API 支持哪种类型的限制

https://developers.google.com/maps/faq#keysystem

为了在您的 Ionic 应用程序中设置有效的 HTTP 引荐来源网址限制，当您在 WebView 中打开地图时，您应该检查 window.location.href 的值。

例如，如果window.location.href 类似于file://some/path，则应使用此值作为引荐来源网址。

另请注意，带有 file:// 协议的 URL 需要特殊表示，如

中所述

https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key

注意： file:// 引用者需要一个特殊的表示来添加到密钥限制中。在添加到密钥限制之前，应将“file://”部分替换为“__file_url__”。例如，“file:///path/to/”应格式化为“__file_url__//path/to/*”。启用 file://referers 后，建议您定期检查您的使用情况，以确保它符合您的期望。

更新

我相信你可以避免使用DirectionsService，直接用Google Maps URLs在方向模式下打开谷歌地图

代码 sn-p 可能是

showDirection(currentLocation, destLocation) {
    const destination = destLocation.latitude + ',' + destLocation.longitude;
    let mapUrl = "https://www.google.com/maps/dir/?api=1";
    mapUrl += "&origin=" + currentLocation;
    mapUrl += "&destination=" + destination;
    mapUrl += "&travelmode=driving";
    mapUrl += "&dir_action=navigate";
    window.location.href = mapUrl;
}

在这种情况下，您不需要使用 Google Maps JavaScript API，不需要 API 密钥，也不需要为使用 Maps JavaScript API 服务付费。

我希望这会有所帮助！