时间戳

首页 > 解决方案 > 谷歌地图反应前端API密钥存储

reactjs - 谷歌地图反应前端API密钥存储

问题描述

我正在构建一个完整的堆栈 MERN（MongoDB Express React Nodejs）应用程序。我正在使用 NPM 包Google Maps React在我的网站上显示谷歌地图。我很难想出一个策略来保护我的前端谷歌地图 API 密钥。

为了完全理解我的问题，查看下面的 Google Maps React 组件代码可能会有所帮助

import {Map, GoogleApiWrapper} from 'google-maps-react';
 
export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} >
 
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

可能的解决方案

解决方案 A

  1. 将密钥存储在我的 Mongo 数据库中
  2. 向数据库发出 GET 请求以获取 google Maps API 密钥
  3. 将 API 密钥数据字符串放入谷歌地图组件中

解决方案 B

  1. 将 api 密钥存储在谷歌地图反应节点模块文件中

对解决方案 A 的担忧

对解决方案 B 的担忧

感谢您的想法和时间。

PS我使用了create-react-app

标签： reactjsmernapi-keygoogle-maps-react

解决方案

您有多种选择来安全地存储 api 密钥。如果您使用 CircleCi 进行连续构建，您可以创建一个environment key。检查您的构建解决方案是否有类似的东西。

还有加密文件的替代方法，例如git-secret。这样你就可以使用环境配置文件。

底线不要将密钥存储在代码或配置文件中，除非您对其进行了加密。

推荐阅读