Блог

Во — первых, я довольно новичок как в реагировании, так и в Shopify, поэтому, пожалуйста, имейте это в виду при своих ответах.

Я создал базовое приложение Shopify, используя их инструменты CLI, которые предоставляют приложение React. Теперь мне нужно подключить это приложение к третьей стороне, которая управляет пользовательскими вариантами доставки. Поэтому мне необходимо пройти аутентификацию у этой третьей стороны, которая затем возвращает токен, который я могу использовать в своих вызовах API. Я прочитал здесь много ответов о хранении таких токенов, некоторые рекомендуют локальное хранилище/файлы cookie, другие утверждают, что никогда этого не делают, но не дают четкого ответа на то, что следует делать вместо этого.

В настоящее время у меня есть что-то вроде следующего:

 let data = {
  grant_type: 'client_credentials',
  client_id: process.env.REACT_APP_THIRDPARTY_API_KEY,
  client_secret: process.env.REACT_APP_THIRDPARTY_API_SECRET  
}

axios.post('https://oauth.somethirdparty.se/v1/token', data).then(res => {
  if (typeof window !== 'undefined') { // Check for browser
    localStorage.setItem('t', res.data.token);
  }
});
 

Однако я получаю «неопределенные» ошибки для этих переменных env, и, следовательно axios.post , сбой (отлично работает, если я введу ключ/секрет непосредственно здесь вместо .env). Помимо того, что это небезопасно, согласно многим публикациям здесь, мне интересно, могу ли я, возможно, сделать что-то похожее на то, что делает Shopify, только мое отсутствие знаний мешает мне понять, что именно они делают!

Созданное приложение Shopify использует файл .env в своем server.js файл, вот так:

 Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:///, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: true,
  // This should be replaced with your preferred storage strategy
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});
 

Как можно безопасно хранить учетные данные API в моем случае? И, пожалуйста, приведите реальный пример.

РЕДАКТИРОВАТЬ Я обнаружил, что если я изменю Shopify server.js файл в console.log(process.env) , я вижу все используемые переменные env в терминале, и я предполагаю, что причина, по которой они «не определены», когда я пытаюсь зарегистрировать их в своем компоненте приложения, заключается в том, что они намеренно не отображаются, и это здорово. К сожалению, это все еще не помогает мне, когда мне нужно подключиться к сторонней службе и получить токен и т.д. — Как мне это сделать в этом случае?

На этот вопрос очень легко ответить. Это правда, вы всегда хотите хранить свои секреты в чем-то вроде файла dotenv. Современные продвинутые платформы, такие как Rails, даже позволяют вам шифровать их, хотя в конечном итоге для этого вам необходимо убедиться, что на вашем сервере присутствует секретный ключ.

Таким образом, ваша служба публичного хостинга позволяет вам устанавливать переменные среды. Вот где вы гарантируете, что они существуют. Вы не проверяете эти значения в своей общедоступной/частной копии кода на GitHub.

Так что теперь, когда ваш код выполняется, он имеет доступ к вашим секретам. Кажется, что когда вы запускаете свой код и получаете неопределенные значения, именно из-за этого вам не удалось правильно настроить свою среду. Прочтите документацию на вашем хостинге, чтобы понять это.

Обратите внимание, что Shopify не является уникальным, 99% всех сервисов работают таким образом. Так что у вас не должно возникнуть проблем с поиском ответа на вашу проблему.