API Spotify невероятен, но может сбивать с толку вопрос о том, как надежно получить доступ к нужным нам данным. В этой статье мы рассмотрим все шаги, необходимые для получения доступа к данным пользователя Spotify в нашем приложении с помощью JavaScript. Я создаю приложение React Native с помощью Expo, поэтому код будет ориентирован на мобильное приложение на основе React, но этот процесс должен выполняться и для других веб-приложений и / или фреймворков.

Если вы видели такие фразы, как «токен доступа», «токен обновления», «учетные данные», «область действия» или «перенаправить uri», и не знаете, как они все сочетаются друг с другом, вы пришли вправо статья. Я не буду слишком много говорить о принципах OAuth; вместо этого мы просто проработаем все, что нам нужно сделать, чтобы настроить себя с помощью надежной аутентификации API. Давай займемся этим!

Выбор правильного потока авторизации

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

Из их документации для разработчиков:

Мы создаем приложение, поэтому на первый взгляд кажется, что мы хотим использовать поток учетных данных клиента. К сожалению, «доступны только конечные точки, которые не имеют доступа к пользовательской информации».

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

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

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

Не переживай, все будет хорошо.

TL; DR: мы работаем с потоком кода авторизации

Регистрация нашего приложения для получения наших учетных данных Spotify

Первое, что нам нужно сделать, это зарегистрировать наше приложение в панели управления разработчика Spotify. Вам понадобится учетная запись Spotify для доступа к панели управления (если вы создаете учетную запись после прочтения этого, позвольте мне быть первым, кто приветствует вас в вашей новой, лучшей жизни).

Действия, которые необходимо выполнить:

  1. Войдите в личный кабинет разработчика здесь: https://developer.spotify.com/dashboard/login
  2. Нажмите зеленую кнопку «СОЗДАТЬ ИДЕНТИФИКАТОР КЛИЕНТА».
  3. Следуйте инструкциям и заполните необходимую информацию (нажмите «Нет», если они спросят, разрабатываете ли вы коммерческую интеграцию. При необходимости вы можете изменить это позже)
  4. Скопируйте идентификатор клиента и сохраните его где-нибудь
  5. Нажмите «ПОКАЗАТЬ СЕКРЕТ КЛИЕНТА», затем скопируйте и сохраните его в том же месте.
  6. Нажмите зеленую кнопку «ИЗМЕНИТЬ НАСТРОЙКИ».
  7. Посмотрите на *** сообщение ниже
  8. Введите URI перенаправления там, где он запрашивает , и нажмите кнопку «ДОБАВИТЬ»! Не забудьте нажать кнопку «ДОБАВИТЬ». Это случилось с людьми, которых я знаю ...
  9. Скопируйте и сохраните URI перенаправления с другими учетными данными
  10. Радуйтесь! Кроме того, как только вы начнете использовать приложение, посмотрите на свою панель инструментов - Spotify показывает вам классные графики со всей статистикой использования и конечными точками API, которые вы проверяли.

*** Если вы, как и я, создаете приложение React Native с Expo, напишите где-нибудь в своем приложении следующее (подробнее об AuthSession мы поговорим позже):

Регистрируемая строка будет URI перенаправления, который мы хотим использовать. Это должно быть что-то вроде https://auth.expo.io/@your-username/your-app-name.

Если вы не используете Expo, просто выберите URI перенаправления, на который вы хотите, чтобы пользователь был перенаправлен после прохождения процесса авторизации Spotify.

TL; DR: ммм, не пропускайте эту часть или любую из частей ниже 😅

Безопасный доступ к нашим учетным данным Spotify

Пришло время сохранить только что созданные учетные данные приложения!

В процессе разработки я помещаю свои учетные данные в файл с именем secrets.js, который обязательно добавляю в свой .gitignore файл, чтобы он не попал в Github. Это выглядит так, если не считать фактических учетных данных:

Когда ваше приложение будет готово к развертыванию, вы должны сохранить учетные данные на своем сервере и предоставить конечную точку, которая выполняет вызовы API для вашего клиента и передает данные обратно во внешний интерфейс. Если вы выполняете развертывание на Heroku, это можно сделать, установив учетные данные в качестве переменных конфигурации (либо с помощью интерфейса командной строки Heroku, либо на панели инструментов Heroku), а затем получив к ним доступ с node.js по process.env. Вот руководство Heroku по настройке переменных конфигурации: https://devcenter.heroku.com/articles/config-vars.

Вот каким может быть маршрут на стороне сервера:

А вот как может выглядеть ваш интерфейсный вызов API с помощью axios:

Получение кода авторизации

Предполагая, что теперь у вас есть безопасный доступ к вашим учетным данным приложения Spotify, пора найти им хорошее применение и фактически выполнить авторизацию! Прежде чем мы сможем получить токен доступа к API, нам нужно получить код авторизации. Поскольку я использую Expo для создания и тестирования своего приложения React Native, я могу использовать встроенную функцию AuthSession Expo, чтобы безопасно и легко перенаправлять пользователей на URL-адрес авторизации Spotify для получения кода.

Согласно docs Expo, это то, что AuthSession делает для нас:

  • Он открывает URL-адрес для входа для вашего поставщика аутентификации (authUrl, вы должны указать его) в веб-браузере, который использует файлы cookie для вашего системного браузера.
  • Он обрабатывает успешные перенаправления и извлекает все данные, закодированные в URL-адресе.
  • Он обрабатывает сбои и предоставляет информацию о том, что пошло не так.

Звучит круто. А если вы не используете Expo, вам просто нужно вручную перенаправить пользователя в то же место, так что не волнуйтесь - это руководство по-прежнему для вас!

Работая над этим, я просто скопировал код из Expo Пример AuthSession и заменил Facebook authURL тем, что я нашел в Руководстве по авторизации Spotify. Области - это данные пользователя, к которым вы будете запрашивать доступ. Их полный список находится здесь. Добавьте или удалите все, что хотите. Я знаю, что хочу иметь возможность просматривать, изменять и создавать списки воспроизведения для пользователя - другие вещи тоже могут пригодиться.

Вот как это должно выглядеть:

Ни на секунду не думайте, что вы должны знать, как на самом деле извлечь код авторизации из результата. Я вышел из системы result на своей консоли, чтобы выяснить, что он хранится в result.params.code.

Хорошо, отлично, мы только что завершили шаг 1 последовательности действий с кодом авторизации. Осталось еще 2!

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

Теперь, когда у нас есть код авторизации, мы можем использовать его, чтобы получить то, что нам действительно нужно: токен доступа API. Эту часть было сложно понять, но я справился с ней с помощью репозитория Bene Studio на Github и этого сегмента Руководства по авторизации Spotify:

Вот как это должно выглядеть:

Примечания:

  • Я использовал fetch API, встроенный в React Native, но вы можете делать POST запрос, как хотите, если он содержит правильную информацию.
  • Функция btoa в строке 7 создает кодировку base-64 для clientId и clientSecret, которая требуется для раздела авторизации заголовка.
  • Потребовалось время, чтобы понять, что параметры тела должны быть отправлены в виде строки и разделены символом «&».
  • В строке 26 я вычисляю фактическое время истечения срока действия во времени Unix. Мне нужно умножить свойство expiresIn на 1000, потому что Spotify отправляет его в секундах, а время Unix - в миллисекундах.
  • В строках 27–29 я сохраняю три свойства в asyncStorage устройства с помощью написанной мной настраиваемой функции setUserData. Вы можете сохранять их в любом месте, если у вас есть доступ к ним, когда вы хотите выполнять вызовы Spotify API.

Привет! Теперь у нас есть токен доступа, что означает, что мы действительно можем звонить в API Spotify. Это потрясающе, и мы вернемся к этому через секунду. Нам просто нужно коснуться последней части потока кода авторизации, а именно о том, как получить новый токен доступа, когда у нас истекает срок действия (что происходит каждые 6 минут 😿). Я был безразличен к третьему свойству, фигурирующему в этом запросе на выборку. Токен доступа получает всю славу, но он быстро превратился бы в пыль без нашего удобного токена обновления. Давайте приступим к работе.

Использование токена обновления для получения нового токена доступа

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

Примечания:

  • Наше свойство grant_type в теле запроса просто меняется на refresh_token, а не на authorization_code.
  • Функция может выйти из строя, если срок действия токена обновления истечет (не уверен, произойдет ли это и когда), или если мы вызовем его, фактически не имея доступного токена обновления. В этом случае responseJson будет иметь свойство error, и мы знаем, что должны запустить нашу функцию getTokens, чтобы сгенерировать код авторизации и вместо этого получить токены из этого метода. Эта логика может быть не самой эффективной, но она позволяет нам просто вызывать эту функцию всякий раз, когда мы хотим получить действительный токен доступа. Если это сработает - отлично. Если нет, вместо этого он вызовет другую нашу функцию.

Это все, что нам нужно сделать! Прежде всего, нашему приложению необходимо использовать Spotify API, мы можем просто добавить такую ​​логику:

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

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

При первом использовании приложения Expo пользователь должен увидеть следующие два экрана.

Интересная часть: собственно с использованием Spotify API

После всей этой тяжелой работы мы, наконец, можем сделать то, что намеревались сделать: использовать freakin API! Мы можем показать пользователям их лучшие треки и исполнителей, мы можем искать любой медиа-объект и получать все его метаданные, и мы даже можем генерировать музыкальные рекомендации и создавать настоящие плейлисты Spotify для пользователя. Полная справка по API находится здесь: https://developer.spotify.com/documentation/web-api/reference/

На момент написания этой статьи новый справочник по API Spotify находится в стадии бета-тестирования и находится здесь: https://developer.spotify.com/documentation/web-api/reference-beta/

Большинство конечных точек не изменились в бета-версии, но некоторые - особенно API списков воспроизведения - отличаются, так что будьте осторожны!

Используя свой токен доступа, вы можете вызывать API как угодно. Мне лично нравится использовать клиентскую оболочку spotify-web-api-js, созданную JMPerez (бывший сотрудник Spotify). Оболочка просто предоставляет вам объект с методами, которые обращаются к большинству, если не ко всем методам API, так что вам не нужно писать запрос самостоятельно. Существует также оболочка spotify-web-api-node для node.js, если вы хотите что-то делать на серверной части, а также оболочки для многих других языков. Огромная поддержка всем, кто помогал их создавать. Но будьте осторожны: поскольку Spotify обновляет свои конечные точки API, некоторые методы, вероятно, больше не будут работать, пока они не будут обновлены. Я создал некоторые проблемы в репозиториях Github для тех, которые я нашел - я уверен, что не повредит сделать то же самое, если вы их обнаружите! Пока они не будут исправлены, вам придется создавать эти запросы самостоятельно.

Я просто собираюсь быстро показать вам, как я использую обертку.

Я установил и импортировал пакет spotify-web-api-js и создал вспомогательную функцию, которая использует функции, которые мы написали выше, чтобы убедиться, что у меня есть функциональный токен доступа. Вот:

Я запускаю эту функцию перед выполнением какой-либо группы вызовов API, просто чтобы убедиться, что у меня есть действующий токен доступа. Если я выполняю вызов в цикле, я буду вызывать его внутри цикла на всякий случай. Возможно, это не лучший метод, но до сих пор он работал у меня (любые отзывы / разногласия приветствуются).

Возвращенный объект sp содержит все вышеупомянутые методы. Так, например, чтобы получить список из 50 последних плейлистов пользователя, я бы сделал следующее:

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

По сути, это все, что вам нужно знать, чтобы приступить к работе. Я надеюсь, что это было полезно. Пожалуйста, не стесняйтесь оставлять отзывы и задавать любые вопросы в комментариях ниже или пишите мне по адресу [email protected].

Спасибо за прочтение!!