怎么使用Netlify Lambda函数隐藏API密钥

本教程将介绍如何使用Netlify Lambda函数隐藏API密钥的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么使用Netlify Lambda函数隐藏API密钥 教程 第1张

问题描述

我正在使用Vanilla JS构建一个简单的应用程序,其中我检索用户的位置并将坐标传递给Google的geolocation API。我试图通过Netlify的UI将API密钥设置为环境变量来访问它,但我不太清楚怎么实现lambda函数来完成这项任务。

我有一个函数可以获取用户的纬度/经度,并在将数据显示在DOM中之前从geolocation API获取数据。到目前为止,我只有一个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的文档,但我不确定怎么将解决方案实现到我的简单项目中。如有任何帮助,我们不胜感激!

推荐答案

由于密钥是密钥,我们将创建一个Netlify函数来调用https://maps.googleapis.com/maps/api/geocode/json,终结点将位于/.netlify/functions/location我们的站点上。

对于此示例,我们不会使用节点工具创建生成包,因此我们将在函数中包括依赖项模块node-fetch

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

将机密API密钥添加到站点上的环境变量中MAP_GOOGLEAPIS_KEY

存储库项目结构

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}`;

好了关于怎么使用Netlify Lambda函数隐藏API密钥的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。