Как создать и использовать ключ доступа API Kinsta

Kinsta — это облачная платформа, предназначенная для того, чтобы помочь компаниям и командам разработчиков запускать и управлять своими веб-проектами быстрее и эффективнее.

Kinsta предоставляет разработчикам и пользователям API для программного управления своими сайтами, приложениями и базами данных WordPress.

Kinsta API можно использовать для автоматизации задач, извлечения данных и интеграции Kinsta с другими приложениями без доступа к MyKinsta. Для доступа к API вам нужен ключ API. В этой статье объясняется процесс создания и использования ключа Kinsta API.

Как создать ключ API

Чтобы использовать API Kinsta, у вас должна быть учетная запись хотя бы на одном сайте, приложении или базе данных WordPress в MyKinsta. Вам также потребуется сгенерировать ключ API для аутентификации и доступа к вашей учетной записи через API. Чтобы сгенерировать ключ API:

Перейдите на панель инструментов MyKinsta.
Перейдите к Ключи API страница (Ваше имя > Настройки компании > Ключи API).
Нажмите Создать ключ API.
Выберите срок действия или установите пользовательскую дату начала и количество часов, в течение которых истечет срок действия ключа.
Дайте ключу уникальное имя.
Нажмите Создать.

Создайте ключ API на MyKinsta.

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

Как использовать API Kinsta с вашим ключом API

Получив ключ API, вы можете взаимодействовать со всеми службами Kinsta (сайтами WordPress, приложениями и базами данных) через API Kinsta, например получать список баз данных по идентификатору компании, сайтам компаний, создавать сайт WordPress и т. д.

Например, чтобы получить список сайтов компании в MyKinsta, конечной точкой будет /sites. Ключ API будет служить вашим заголовком авторизации; вы также добавите идентификатор компании (обязательный параметр). Вот как сделать этот запрос API с помощью cURL:

curl -i -X GET \
  'https://api.kinsta.com/v2/sites?company=' \
  -H 'Authorization: Bearer <YOUR_API_KEY_HERE>'

Заменять YOUR_API_KEY_HERE с помощью фактического ключа API, который вы сгенерировали, и

COMPANY_ID_HERE с вашим уникальным идентификатором компании. Это вернет ответ JSON для всех сайтов компании на панели инструментов DevKinsta:

{
    "company": {
        "sites": [
            {
                "id": "YOUR_SITE_ID",
                "name": "my-test-site",
                "display_name": "Test site",
                "status": "live",
                "site_labels": []
            }
        ]
    }
}

Другой пример, предположим, что вы хотите получить определенный сайт по идентификатору (запрос GET). Вы можете использовать /sites/{site_id} конечная точка. {site_id} будет заменен уникальным идентификатором конкретного сайта, который вы хотите получить. Вот как сделать этот запрос API с помощью NodeJS:

import fetch from 'node-fetch';

async function fetchSite() {
  const siteId = 'YOUR_SITE_ID';
  const response = await fetch(
    `https://api.kinsta.com/v2/sites/${siteId}`,
    {
      method: 'GET',
      headers: {
        Authorization: 'Bearer 
      }
    }
  );

  const data = await response.json();
  console.log(data);
}

fetchSite();

С Kinsta API вы можете делать больше. Для получения полной информации о доступных конечных точках API и необходимых параметрах, чтобы загрузить нашу спецификацию OpenAPI и опробовать конечные точки, см. наш Справочник по API.

Разрешения

Разрешения на доступ к API для Kinsta зависят от роли пользователя в компании, т.к. владельцы компаний, администраторы и разработчики может создавать ключи API.

Например, ключ API, созданный разработчиком, не будет иметь того же уровня доступа, что и ключ, созданный владельцем или администратором компании. Конкретные разрешения, связанные с каждой ролью пользователя, обеспечивают надлежащий контроль доступа и безопасность для Kinsta API.

Как использовать Kinsta API для создания средства проверки статуса

Когда вы создаете приложение, сайт или базу данных на MyKinsta, они проходят несколько этапов. Один из способов идентифицировать эти этапы — через их статус. Например, приложение, развернутое в Kinsta, будет иметь статус развертывания, успешного развертывания или сбоя.

Kinsta API предоставляет конечные точки, которые позволяют вам получать информацию о состоянии ваших проектов на MyKinsta. В этом проекте вы будете взаимодействовать с тремя конечными точками, т.е. /applications, /sitesи /databasesчтобы получить массив всех приложений, сайтов и баз данных с помощью JavaScript Fetch API.

Получив список, вы можете использовать find() метод в JavaScript для поиска определенного имени проекта, введенного в пользовательский интерфейс (UI). Это возвращает имя и статус проекта, если он существует.

Предпосылка

Чтобы следовать этому проекту, желательно иметь базовые знания HTML, CSS и JavaScript и некоторое знакомство с React. Основное внимание в этом проекте уделяется демонстрации использования Kinsta API, поэтому в статье не будут подробно описываться создание или стиль пользовательского интерфейса.

Вы можете создать репозиторий Git, используя этот шаблон на GitHub. Выбирать Используйте этот шаблон > Создать новый репозиторий чтобы скопировать начальный код в новый репозиторий в вашей собственной учетной записи GitHub, и убедитесь, что вы установили флажок, чтобы включить все ветки. Когда вы подключаетесь к локальному компьютеру, убедитесь, что вы переключаетесь на статус проверки пользовательского интерфейса ветке для использования начальных файлов с помощью команды ниже:

git checkout status-checker-ui

Установите необходимые зависимости, выполнив команду npm install команда. После завершения установки вы можете запустить проект на локальном компьютере с помощью npm run start команда. Это откроет проект в http://локальный: 3000/.

Этот проект имеет две основные страницы: Дом и Сервисные страницы. Домашняя страница отображает список услуг, предоставляемых Kinsta (WordPress, размещение приложений и баз данных). Когда вы нажимаете на любой из сервисов, вы попадаете в Сервисная страницакоторый предназначен для предоставления конкретной информации, связанной с выбранной услугой.

Например, щелкнув раздел «Приложения», вы будете перенаправлены на Сервисная страница посвященный приложениям. Вы можете искать любое приложение в своей учетной записи MyKinsta на этой странице, поэтому оно получает статус приложения, используя либо его уникальное имя, либо отображаемое имя.

Взаимодействие с API Kinsta

Чтобы реализовать функцию поиска для этого проекта, вы должны создать три функции для обработки запросов на выборку для каждой службы (приложений, сайтов и баз данных). Затем вы реализуете функцию поиска, которая сканирует весь массив данных, чтобы проверить, существует ли заданное значение поиска.

Вам нужен ваш Идентификатор компании и ключ API для взаимодействия с Kinsta API, чтобы вы могли получить список баз данных, приложений и сайтов, доступных в вашей учетной записи MyKinsta. Получив их, сохраните их как переменные среды в своем приложении React, создав .env-файл в корневой папке вашего проекта.

REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'

Теперь вы можете получить доступ к этим значениям в любом месте вашего проекта, используя process.env.THE_VARIABLE. Например, для доступа REACT_APP_KINSTA_COMPANY_IDты используешь process.env.REACT_APP_KINSTA_COMPANY_ID.

Перед использованием API создайте три состояния в Сервис.jsx страница для хранения состояния и имени вывода, сгенерированного при поиске сайта, приложения или базы данных. Третье состояние предназначено для хранения информации об ошибке.

let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');

Кроме того, создайте переменную для хранения URL-адреса Kinsta API:

const KinstaAPIUrl="https://api.kinsta.com/v2";

Когда закончите, прикрепите onClick мероприятие с CheckQuery() функцию кнопки отправки формы на Сервис.jsx page, поэтому она запускает функцию, основанную на слаге. Это означает, что если слаг указывает базы данных, то CheckDatabases() будет запущена функция:

const CheckQuery = async (name) => {
  if (slug === 'wp-site') {
      await CheckSites(name);
  } else if (slug === 'application') {
      await CheckApplications(name);
  } else if (slug === 'database') {
      await CheckDatabases(name);
  }
}

Получить список сайтов с помощью Kinsta API

Чтобы получить список сайтов, доступных в вашей учетной записи компании MyKinsta с помощью Kinsta API, вы создадите функцию, передадите запрос с идентификатором компании в качестве параметра, а затем авторизуете запрос с помощью своего ключа API. Этот запрос будет использовать /sites конечная точка Kinsta API:

const CheckSites = async (name) => {
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/sites?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
}

Этот код выше будет получать все сайты, доступные в вашей учетной записи MyKinsta, теперь вы можете использовать find() метод поиска, если поисковый запрос соответствует какому-либо имя или отображаемое имя:

const data = await resp.json();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);

При этом вы можете затем создать некоторые условия, чтобы проверить, возвращает ли он какое-либо значение, а затем установить состояния, иначе обновите состояние ошибки с сообщением, чтобы сообщить пользователю, что такой сайт не существует:

if (site) {
    setName(site.display_name);
    if (site.status === 'live') {
        setStatus('🟢 Running');
    } else if (site.status === 'staging') {
        setStatus('🟡 Staging');
    } else {
        setStatus('🟡 Unknown');
    }
    setUniqueName('');
} else {
    setError('No such site found for your account');
    setUniqueName('');
}

Когда вы соберете все это вместе, ваш код для проверки статуса конкретного сайта будет выглядеть следующим образом:

const CheckSites = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/sites?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);
  if (site) {
      setName(site.display_name);
      if (site.status === 'live') {
          setStatus('🟢 Running');
      } else if (site.status === 'staging') {
          setStatus('🟡 Staging');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such site found for your account');
      setUniqueName('');
  }
}

Примечание: Все три состояния инициализируются как пустые строки каждый раз, когда CheckSites() функция срабатывает. Это необходимо для того, чтобы все предыдущие данные поиска были стерты.

Получить список приложений с Kinsta API

Как и для сайтов, вы будете использовать /applications конечной точке, передать запрос, содержащий идентификатор компании, а также использовать find() метод для поиска в возвращаемом массиве:

const CheckApplications = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/applications?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let appsData = data.company.apps.items;
  let app = appsData.find(app => app.unique_name === name || app.name === name || app.display_name === name);
  if (app) {
      setName(app.display_name);
      if (app.status === 'deploymentSuccess') {
          setStatus('🟢 Running');
      } else if (app.status === 'deploymentFailed') {
          setStatus('🔴 Failed');
      } else if (app.status === 'deploymentPending') {
          setStatus('🟡 Pending');
      } else if (app.status === 'deploymentInProgress') {
          setStatus('🟡 In Progress');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such app found for your account');
      setUniqueName('');
  }
}

Получить список баз данных с помощью Kinsta API

Чтобы получить список баз данных, вы будете использовать /databases конечная точка Kinsta API:

const CheckDatabases = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/databases?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let databasesData = data.company.databases.items;
  let database = databasesData.find(database => database.name === name || database.display_name === name);
  if (database) {
      setName(database.display_name);
      if (database.status === 'ready') {
          setStatus('🟢 Running');
      } else if (database.status === 'creating') {
          setStatus('🟡 Creating');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such database found for your account');
      setUniqueName('');
  }
}

Как только это будет сделано. Вы успешно использовали Kinsta API в своем проекте React. Чтобы убедиться, что ваше приложение работает хорошо, добавьте данные, которые возвращаются из этих функций, для которых были установлены состояния, которые мы создали ранее, в ваш код разметки:

{status !== '' && (
  <div className="services">
      <div className="details">
          <div className="name-details">
              <span> className="tag">Name: </span>
              <span> className="value">{name}</span>
          </div>
          <div className="status-details">
              <span> className="tag">Status: </span>
              <span> className="value"> {status}</span>
          </div>
      </div>
  </div>
)}

Также добавьте условие, которое будет срабатывать при возникновении ошибки. Например, когда пользователь ищет проект, которого нет в MyKinsta, возникает ошибка.

{error !== '' && (
  <div className="services">
      <div className="details">
          <p>{error}</p>
      </div>
  </div>
)}

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

Как развернуть средство проверки статуса на Kinsta

Чтобы развернуть проект React в Kinsta, вам необходимо передать проект предпочитаемому вами провайдеру Git. Когда ваш проект размещен на GitHub, GitLab или Bitbucket, вы можете приступить к развертыванию в Kinsta.

Чтобы развернуть репозиторий в Kinsta, выполните следующие действия:

Войдите или создайте свою учетную запись Kinsta на панели инструментов MyKinsta.
На левой боковой панели нажмите «Приложения», а затем нажмите «Добавить службу».
Выберите «Приложение» в раскрывающемся меню, чтобы развернуть приложение React в Kinsta.
В появившемся модальном окне выберите репозиторий, который вы хотите развернуть. Если у вас несколько веток, вы можете выбрать нужную ветку и дать имя вашему приложению.
Выберите одно из доступных местоположений центра обработки данных из списка из 25 вариантов. Kinsta автоматически обнаружит команду запуска для вашего приложения.

Наконец, небезопасно отправлять ключи API на общедоступные хосты, такие как ваш провайдер Git. При размещении вы можете добавить их как переменные среды, используя то же имя переменной и значение, указанные в .env-файл.

Установите переменные среды на DevKinsta при развертывании.

Как только вы инициируете развертывание своего приложения, он начнет процесс и обычно завершается в течение нескольких минут. После успешного развертывания вы получите ссылку для доступа к развернутой версии вашего приложения. Например, в этом случае ссылка https://status-checker-1t256.kinsta.app/.

Краткое содержание

Ключ API Kinsta позволяет легко автоматизировать задачи, извлекать данные и интегрировать Kinsta с другими приложениями. Не забудьте сохранить ключ доступа в безопасности.

Теперь вы можете использовать возможности Kinsta API для составления некоторых отчетов, планирования задач, создания сайтов WordPress и автоматизации различных действий.

Какую конечную точку вы хотели бы видеть следующей в API Kinsta? Дайте нам знать об этом в комментариях.

Получите все свои приложения, базы данных и сайты WordPress онлайн и под одной крышей. Наша многофункциональная высокопроизводительная облачная платформа включает в себя:

Простая настройка и управление в панели управления MyKinsta.
Круглосуточная поддержка экспертов
Лучшее оборудование и сеть Google Cloud Platform на базе Kubernetes для максимальной масштабируемости.
Интеграция с Cloudflare корпоративного уровня для скорости и безопасности
Глобальный охват аудитории благодаря 35 центрам обработки данных и 260 точкам присутствия по всему миру

Начните с бесплатной пробной версии нашего хостинга приложений или хостинга баз данных. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти наиболее подходящий вариант.