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

Posted 2023-03-16

【中文标题】使用 Restriction for Ionic 应用程序保护 Google Maps API 密钥

【英文标题】：Protect Google Maps API key with Restriction for Ionic app

【发布时间】：2020-09-06 16:57:52

【问题描述】：

我正在开发 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);
        
      );
  

有人可以帮忙吗？

【参考方案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 服务付费。

我希望这会有所帮助！

【讨论】：

正如我在问题中提到的，我没有在 webView 中打开谷歌地图，我从 ionic 应用程序启动谷歌地图应用程序以使用 DirectionsService 向用户显示方向。

我得到http://localhost/#/page 作为 window.location.href 值...使用这个值作为推荐人是否安全？ @xomena

我不明白 DirectionsService 与打开 Google 地图应用的关系。在我看来，这些事情是不相关的。为什么不在 deriections 模式下使用Google Maps URLs 来启动意图？在这种情况下，您既不需要任何 API 密钥，也不需要 DirectionsService，因为 Google 地图 URL 将直接打开本机应用程序。

我更新了问题...您能检查一下我在做什么是正确的还是有其他方法可以做到这一点？