Как вставить параметры в функции netlify?

У меня есть ввод, который отправляет вызов API при отправке в API unsplash. Я пытаюсь преобразовать это в функцию netlify, но не знаю, как передать параметры из ввода в функцию. Я пытаюсь скрыть ключ API. Я никогда не работал с пакетом qs и не просматривал документы, но не смог в этом разобраться.

script.js

const KEY = "" //secret
const URL = `https://api.unsplash.com/search/photos?page=1&per_page=50&client_id=${process.env.KEY}`;
const input = document.querySelector(".input");
const form = document.querySelector(".search-form");
const background = document.querySelector(".background");
const overlay = document.querySelector(".overlay");
const header = document.querySelector(".title");
let results = [];

search = (searchTerm) => {
  let url = `${URL}&query=${searchTerm}`;//this should hit the netlify endpoint instead
  return fetch(url)
    .then((response) => response.json())
    .then((result) => {
      toggleStyles();
      header.appendChild(form);
      result.results.forEach((image) => {
        const galleryItem = document.createElement("div");
        galleryItem.className = "gallery-item";
        const imageDiv = document.createElement("div");
        imageDiv.className = "image-div";
        document.querySelector(".results-page").appendChild(galleryItem);
        galleryItem.appendChild(imageDiv);
        imageDiv.innerHTML =
          "<img class='image' src=" + image.urls.regular + ">";
        form.classList.remove("toggle-show");
        input.classList.add("header-expanded");
        form.addEventListener("submit", (e) => {
          e.preventDefault();
          document.querySelector(".results-page").remove();
        });
      });

      console.log(result.results);
      return results;
    });
};

toggleStyles = () => {
  const resultsContainer = document.createElement("div");
  resultsContainer.className = "results-page";
  document.body.appendChild(resultsContainer);
};

input.addEventListener("focus", (e) => {
  e.preventDefault();
  input.style = "font-family: 'Raleway', sans-serif";
  input.placeholder = "";
});

input.addEventListener("blur", (e) => {
  e.preventDefault();
  input.style = "font-family: FontAwesome";
  input.value = "";
  input.placeholder = "\uf002";
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let searchTerm = input.value;
  search(searchTerm);
});

token-hider.js

const axios = require("axios");
const qs = require("qs");

exports.handler = async function (event, context) {
  // apply our function to the queryStringParameters and assign it to a variable
  const API_PARAMS = qs.stringify(event.queryStringParameters);
  console.log("API_PARAMS", API_PARAMS);
  // Get env var values defined in our Netlify site UI

  // TODO: customize your URL and API keys set in the Netlify Dashboard
  // this is secret too, your frontend won't see this
  const { KEY } = process.env;
  const URL = `https://api.unsplash.com/search/photos?page=1&per_page=50&client_id=${KEY}`;

  console.log("Constructed URL is ...", URL);

  try {
    const { data } = await axios.get(URL);
    // refer to axios docs for other methods if you need them
    // for example if you want to POST data:
    //    axios.post('/user', { firstName: 'Fred' })
    return {
      statusCode: 200,
      body: JSON.stringify(data),
    };
  } catch (error) {
    const { status, statusText, headers, data } = error.response;
    return {
      statusCode: error.response.status,
      body: JSON.stringify({ status, statusText, headers, data }),
    };
  }
};

Я добавил KEY в качестве переменной среды в своем пользовательском интерфейсе netlify и могу попасть в конечную точку функции. Любая помощь приветствуется, так как я новичок в бессерверных функциях, но очень хочу изучить JAMstack.


person Ren    schedule 21.07.2020    source источник


Ответы (1)


Я думаю, вы спрашиваете здесь о двух разных вещах: как использовать секретные ключи в функциях Netlify и как передавать им параметры из кода внешнего интерфейса.

  1. Вы можете определить переменные среды в настройках вашего сайта Netlify. Затем эти переменные можно использовать в ваших функциях Netlify через process.env. Таким образом, если вы назвали свою переменную SECRET_KEY, то ваш код функции Netlify (а не код внешнего интерфейса!) сможет прочитать ее через process.env.SECRET_KEY.

Глядя на свой код, кажется, что вы понимаете это, поскольку оно есть в вашей функции, но вы также пытаетесь использовать его в коде на стороне клиента. Вы можете удалить это.

  1. Ваш код получает параметры строки запроса, и похоже, что вам просто нужно добавить их в конец URL-адреса, по которому вы нажимаете. Вы пробовали это?
person Raymond Camden    schedule 23.07.2020