由于密钥是秘密密钥,我们将创建一个 Netlify 函数来进行 api 调用https://maps.googleapis.com/maps/api/geocode/json
终点将是/.netlify/functions/location
在我们的网站上。
对于这个例子,我们将not使用节点工具创建构建包,因此我们将包含我们的依赖模块node-fetch
与我们的功能。
在 Netlify 管理控制台上添加秘密 api 密钥
将秘密 api 密钥添加到站点上的环境变量中的变量中MAP_GOOGLEAPIS_KEY
存储库项目结构
netlify.toml
文件(构建配置):
我们实际上并没有进行任何构建,但这将帮助我们在 Netlify 上配置部署容器,以了解我们的函数所在的位置。
[build]
functions = "functions"
publish = "site"
command = "echo 'No build here yet!'"
The 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}`;