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

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

Один из лучших инструментов, который поможет вам не сбиться с пути, - это хорошее приложение для бега. Я использую Strava, потому что он отслеживает данные, включая расстояние, темп, частоту сердечных сокращений, личное лучшее время и многое другое. Это также социальное приложение, поэтому его основными функциями являются поддержка друзей, обмен информацией и общественные вызовы.

Я работаю над проектом / приложением React, чтобы заменить и обновить мою текущую систему обучения, созданную в документации Google. В новой версии я хочу импортировать информацию о тренировке, чтобы я мог видеть свой прогресс и получать информацию в одном месте. К счастью для меня, Strava имеет открытый и поддерживаемый API.

В этом руководстве вы узнаете, как получить доступ к вашим личным данным тренировки из Strava в ваш проект JavaScript.

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

Обзор

  • Создайте свою учетную запись Strava или войдите в нее
  • Настройте новое приложение в своем аккаунте Strava
  • О сфере действия
  • Используйте Swagger для тестирования конечных точек
  • Создайте токен авторизации
  • Получите токен доступа и токен обновления
  • Вызовите Strava API из приложения React.

Создайте или войдите в свою учетную запись Strava

Нажмите здесь, чтобы войти в систему или создать учетную запись Strava.

Настройте новое приложение в своей учетной записи Strava

После входа в систему перейдите на https://www.strava.com/settings/api. В первый раз вам необходимо вручную ввести адрес в браузере, но после этого вы можете перемещаться по нему через веб-сайт Stava, нажав settings.

Было бы неплохо добавить эту страницу в закладки или оставить ее открытой на вкладке. Вы будете часто посещать его на протяжении всего урока.

Заполните следующую информацию:

  • Название приложения: назовите это как хотите.
  • Категория: Я составляю расписание марафона, поэтому выбрала «Тренировка».
  • Клуб: если вы являетесь членом клуба, вы можете выбрать его, в противном случае оставьте это поле пустым.
  • Веб-сайт: URL-адрес создаваемого вами веб-сайта. Если у вас его нет, просто поставьте https://www.strava.sampleapp.com.
  • Описание приложения: необязательное поле для описания того, что будет делать ваше приложение.
  • Домен обратного вызова авторизации: сейчас введите localhost. Это позволяет получить доступ к API в режиме разработки. Обновите это поле до developers.strava.com при тестировании конечных точек в Swagger (подробнее об этом позже) и обновите его до вашего домена после развертывания приложения.

После заполнения полей установите флажок, указывающий, что вы прочитали и согласны с Соглашением об использовании API Strava.

Щелкните Create.

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

Вы должны увидеть что-то вроде этого:

Прокрутите вверх. Теперь у вас есть следующая информация.

О сфере действия

Область в Strava API представляет различные уровни доступа, необходимые для чтения или изменения данных пользователя.

Как разработчик стороннего приложения, мы определяем, какие разрешения мы собираемся попросить Strava предоставить нам для конкретного пользователя. Хорошая практика - просить о том, что вам нужно; ни меньше, ни больше.

Strava в процессе аутентификации сообщает пользователю, какие разрешения запрашивает стороннее приложение, и позволяет пользователю предоставить или запретить этот доступ.

В этом случае мы одновременно и разработчик, и пользователь, поэтому это должно быть несложной задачей.

Когда вы настраиваете новое приложение в настройках Strava, перечисленные выше Access Token и Refresh Token будут работать для одного типа осциллографа, read.

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

Мне нужен доступ ко всем моим действиям, в том числе к закрытым, поэтому я буду использовать область activity:read_all. Это даст правильные права доступа к моим Refresh Token и Access Token.

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

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

Проверьте свою конечную точку в Swagger

Swagger - это инструмент, который предлагает Strava, который позволяет вам ознакомиться с их API. Он показывает, как выглядят ответы в зависимости от того, какие конечные точки вы вызываете и какая область действия необходима для доступа к этим конечным точкам.

Чтобы инструмент Swagger работал, вернитесь в раздел настроек вашего Strava account. В поле Authorization Callback Domain замените localhost на developers.strava.com.

Щелкните Update.

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

Перейдите к Swagger. Вы увидите все доступные конечные точки при прокрутке страницы вниз. Щелчок по конечной точке покажет вам, какая область необходима для доступа к данным, а также параметры для каждого маршрута.

Поскольку Swagger собирается вернуть нам реальную информацию, мы должны дать ему разрешение на вызов API.

Я собираюсь использовать маршрут get, конечную точку /athlete/activities. Щелкните эту строку.

В первой строке будет описано, в каком объеме вам нужно получить доступ к этой информации. Эта конечная точка требует activity:read для возврата только общедоступной информации или activity:read_all для возврата всей информации.

Returns the activities of an athlete for a specific identifier. Requires activity:read. Only Me activities will be filtered out unless requested by a token with activity:read_all.

Как я уже упоминал ранее, я хочу, чтобы все данные, включая действия, были конфиденциальными, поэтому я выберу activity:read_all.

Затем вернитесь к началу страницы и нажмите зеленую кнопку Authorize.

Введите Client ID и Client Secret из своей учетной записи Strava в соответствующие поля.

Выберите область, указанную в конечной точке, которую вы планируете использовать. Я выбрал activity:read_all для этого проекта.

Обратите внимание: в этом инструменте есть известная ошибка, которая позволяет вам тестировать только один осциллограф за раз.

Прокрутите вниз и нажмите Authorize.

Вы будете перенаправлены на страницу OAuth2, где еще раз щелкните Authorize.

После авторизации вы будете перенаправлены обратно в Swagger. Щелкните close на всплывающем экране.

Теперь прокрутите вниз до /athlete/activites и разверните его. щелкните Try it out.

Нажмите большую Execute кнопку.

Прокрутите вниз и посмотрите ответ! Вот как будут выглядеть ваши данные, когда они будут вам возвращены.

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

  • ** Если вы видите пустой массив, это означает, что вы не записывали никаких действий за выбранный период времени. Почувствуйте облегчение от того, что вызов работает, но запишите действие (или измените параметры, чтобы зафиксировать записанное действие), чтобы вы могли видеть данные! ***

Антракт

Не знаю, как вы, но мне бы хотелось сделать небольшой перерыв. Возможно, вам подойдет какая-нибудь Кейт Ле Бон:

Создать токен авторизации

Нам нужен Authorization Token, чтобы запроситьAccess Token и Refresh Token.

Вставьте свою информацию в следующий URL-адрес (примечание: разрывы строк добавлены для ясности):

http://www.strava.com/oauth/authorize?
client_id=[CLIENT_ID]
&response_type=code
&redirect_uri=http://localhost/exchange_token&approval_prompt=force
&scope=[YOUR_SELECTED_SCOPE]

Вот как это выглядит с добавлением моей информации и удалением разрывов строк:

http://www.strava.com/oauth/authorize?client_id=54753&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=activity:read_all

Перейдите к только что созданному URL-адресу. Щелкните Authorize.

Вы будете перенаправлены на страницу, которая не открывается. Это ожидаемо !!

Скопируйте URL-адрес страницы. Это будет выглядеть примерно так:

http://localhost/exchange_token?state=&code=b29e1998446705436f2a2952b21eeb8f76c070c9&scope=read,activity:read_all

С добавленными перерывами для ясности:

http://localhost/exchange_token?state=
&code=b29e1998446705436f2a2952b21eeb8f76c070c9
&scope=read,activity:read_all

Вторая строка - это ваш authorization code. Скопируйте все, что находится после &code=, в данном случае это b29e1998446705436f2a2952b21eeb8f76c070c9.

Мы собираемся использовать этот authorization code, чтобы запросить наши Refresh Token и Access Token.

Получите токен доступа и токен обновления

Введите свою информацию в следующий URL-адрес (для ясности добавлены перерывы):

https://www.strava.com/oauth/token?
client_id=[YOUR_CLIENT_ID]
&client_secret=[YOUR_CLIENT_SECRET]
&code=[AUTHORIZATION_CODE]
&grant_type=authorization_code

Вот она с моей введенной информацией и удаленными перерывами:

https://www.strava.com/oauth/token?client_id=54753&client_secret=6308cc42367f364b3e1c29ede9434d1b92e9b06c&code=b29e1998446705436f2a2952b21eeb8f76c070c9&grant_type=authorization_code

Откройте свой терминал и введите следующий запрос cURL POST с URL-адресом, который вы только что создали вместо [URL]:

curl -X POST [URL]

Мой выглядит так:

curl -X POST https://www.strava.com/oauth/token\?client_id\=54753\&client_secret\=6308cc42367f364b3e1c29ede9434d1b92e9b06c\&code\=b29e1998446705436f2a2952b21eeb8f76c070c9\&grant_type\=authorization_code

Вот как этот возврат выглядит с разрывами строки для ясности:

Скопируйте Refresh Token, мы будем использовать его в нашем приложении React.

Access Token действителен только в течение 6 часов до истечения срока его действия. Мы используем Refresh Token, чтобы запросить новый. Насколько мне известно, Refresh Token не имеет срока действия.

Вызов Strava API из React

Мы на финише!

Сначала вернитесь в настройки Strava и верните в поле Authorization Callback Domain значение localhost.

Откройте свое приложение для реагирования и перейдите к компоненту, который отрисовывает в DOM. В этом примере я буду использовать App.js.

строка 1: Импортировать React с хуками useState и useEffect.

Строка 4–5: Установить состояние для логического loading и хранить все данные, которые мы получаем.

12–13: Задайте переменную для хранения нашего Refresh Token и URL-адреса для отправки запросов для текущего Access Token.

16: Установить переменную для URL-адреса для запроса действий.

19–25: при загрузке страницы useEffect запросит текущий Access Token. Как только токен получен, он передает его функции с именем getActivities.

28–34: getActivites выбирает действия, используя текущий код доступа, переданный от useEffect. Он устанавливает результаты в состояние, переключает логическое значение загрузки с true на false или отображает любые ошибки, если они возникают.

36–42: Создать функцию showActivities. Если наше логическое значение загрузки true, оно вернет LOADING. если это ложь, он распечатает состояние нашей активности на консоль и отобразит общее количество действий в DOM.

44–49: вернуть <div>, который вызывает нашу showActivities функцию, которая определяет, что будет отображаться в DOM.

Поздравляю!! вы успешно вызвали Strava API из своего приложения React.

Не забудьте после развертывания приложения вернуться в настройки Strava и изменить поле Authorization Callback Domain на ваш домен.

Спасибо Franchyze923, у которого есть одно из немногих видеоуроков, которые я смог найти по этой теме.

Посмотрите другие мои истории; Отправить электронное письмо из приложения React с помощью EmailJS, Сброс CSS или Recoil.js и простое глобальное состояние.

Вопросы? Комментарии? Обеспокоенность? Свяжитесь со мной по адресу [email protected] или через joshgotro.com.

Спасибо за чтение, и все хорошо!