如何使用 Netlify Lambda 函数隐藏 API 键

Question

我正在使用 vanilla JS 构建一个简单的应用程序，我在其中检索用户的位置并将坐标传递给 Google 的地理定位 API。我试图通过 Netlify 的 UI 将其设置为环境变量来访问 API 密钥，但我不太了解如何实现 lambda 函数来完成任务。

我有一个函数可以获取用户的 latitude/longitude 并从地理位置 API 中获取数据，然后再将其显示在 DOM 中。到目前为止，我只有一个 index.html 和 app.js 文件。

getUserLocation();

function getUserLocation() {
  async function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const geoAPI = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${apiKey}`;

    const { city, state, country } = await getGeoData(geoAPI);

    updateWidget({ city, state, country });
  }

  function error() {
    alert("Unable to retrieve your location");
  }

  if (!navigator.geolocation) {
    console.log("Geolocation is not supported by your browser");
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

我尝试阅读 Netlify 的文档，但我不确定如何为我的简单项目实施解决方案。非常感谢任何帮助！

Answer 1

由于密钥是秘密密钥，我们将创建一个 Netlify 函数来对 https://maps.googleapis.com/maps/api/geocode/json 进行 api 调用，端点将是我们网站上的 /.netlify/functions/location。

对于这个例子，我们将不会使用节点工具创建一个构建包，所以我们将在我们的函数中包含我们的依赖模块node-fetch。

在 Netlify 管理控制台上添加秘密 api 密钥

在变量 MAP_GOOGLEAPIS_KEY

中将秘密 api 密钥添加到您网站上的环境变量

存储库项目结构

netlify.toml 文件（构建配置）：

我们实际上并没有进行任何构建，但这将帮助我们在 Netlify 上配置我们的部署容器以了解我们的功能所在的位置。

[build]
  functions = "functions"
  publish = "site"
  command = "echo 'No build here yet!'"

functions/location/location.js功能代码

const fetch = require('node-fetch');

const apiKey = process.env.MAP_GOOGLEAPIS_KEY;

exports.handler = async function(event, context) {
  try {
    const { latitude, longitude } = event.queryStringParameters || {};
    if (!latitude || !longitude) {
      return { statusCode: 400, body: "Missing query parameters" };
    }
    const uri = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}`;

    const response = await fetch(`${uri}&key=${apiKey}`);
    if (!response.ok) {
      // NOT res.status >= 200 && res.status < 300
      return { statusCode: response.status, body: response.statusText };
    }

    const data = await response.json();

    return {
      statusCode: 200,
      headers: { "content-type": "application/json" },
      body: JSON.stringify(data)
    };
  } catch (err) {
    console.log("invocation error:", err); // output to netlify function log
    return {
      statusCode: 500,
      body: err.message // Could be a custom message or object i.e. JSON.stringify(err)
    };
  }
};

客户端脚本的新端点调用

客户端没有密钥！

function getUserLocation() {
  async function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const geoAPI = `/.netlify/functions/location?latitude=${latitude}&longitude=${longitude}`;