Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Spotify промени изцяло начина, по който предаваме музика с каталог, съдържащ милиони песни, албуми и плейлисти.

Използвайки неговия уеб API, можете да направите изживяването си в Spotify още по-забавно, като създадете свое собствено приложение за търсене на музика React. API предоставя достъп до набор от музикални данни, които можете да използвате, за да създадете персонализирано музикално приложение и да го персонализирате според вашите вкусове.

Spotify за разработчици

Spotify предлага широк набор от функции за поточно предаване на музика, като търсене, офлайн възпроизвеждане и персонализирани препоръки. Платформата Spotify за разработчици предоставя достъп до API и SDK, които захранват тези функции. В това ръководство ще разгледате уеб API и ще научите как да го интегрирате във вашето приложение React, за да търсите песни, които харесвате.

instagram viewer

Регистрирайте се за акаунт

За да започнете, трябва да имате акаунт в Spotify. Ако все още нямате такъв, посетете страницата за регистрация в Spotify. Ако обаче вече имате такъв, влезте в Spotify за разработчици конзола.

Регистрирайте своето приложение

След като влезете в конзолата за разработчици, регистрирайте приложението си, за да получите достъп до уеб API. На страницата на таблото щракнете върху Създайте приложение бутон, попълнете името и описанието и накрая приемете правилата и условията за създаване на приложението.

Накрая щракнете върху Редактиране на настройките бутон за промяна на настройките на URL адреса за пренасочване. Тъй като приложението ви все още е в режим на разработка, добавете http://localhost: 3000 като URL адрес за пренасочване. Това е URL адресът, към който искате да пренасочите потребителя, след като се удостовери със Spotify.

След като регистрирате вашето приложение, Spotify ще предостави вашия уникален клиентски идентификатор и клиентски тайни, които можете да използвате за:

  • Добавете поток за удостоверяване на Spotify, за да влезете с вашите идентификационни данни на Spotify във вашето приложение React.
  • Вземете своя уникален токен за достъп, за да правите заявки към различни крайни точки на уеб API, включително търсене на данни като песни или албуми.

Настройте React Client

Създайте приложение React и отидете до основната директория и създайте нов файл, .env, за да зададете някои променливи на средата. Можете да получите своя клиентски идентификатор от таблото за разработчици на Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "вашият клиентски идентификатор"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "жетон"

Можете да намерите кода на това приложение в него GitHub хранилище.

Инсталирайте необходимите пакети

Инсталирайте Axios. Ще използвате неговите методи, за да правите HTTP заявки към уеб API на Spotify.

npm инсталирайте axios

Добавете работния процес за удостоверяване на Spotify

Spotify уточнява, че всички заявки към всяка крайна точка на Web API имат валиден маркер за достъп в заглавката на заявката. За да получите токена за достъп, вашето приложение трябва първо да се удостовери със Spotify.

Spotify поддържа няколко удостоверяване и оторизацияметоди като код за оторизация, идентификационни данни на клиент или методи за имплицитно предоставяне.

Най-лесният за прилагане е методът на имплицитно предоставяне, който изисква приложението да прави заявки към крайната точка за удостоверяване (вие добавихте това в ENV файла), предавайки вашия клиентски идентификатор. При успешно удостоверяване Spotify ще отговори, като предостави токен за достъп, който изтича след определен период.

Отворете файла src/App.js, изтрийте шаблонния код на React и добавете кода по-долу:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране Търсач от'./components/Searcher';
функцияПриложение() {
конст CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
конст REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
конст AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
конст RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


конст [токен, setToken] = useState("");


 useEffect(() => { 
конст хеш = прозорец.location.hash;
позволявам жетон = прозорец.localStorage.getItem("жетон");

ако (хеш && хеш) {
 токен = hash.substring(1).split("&").намирам(елем => elem.startsWith("жетон за достъп")).split("=")[1];
прозорец.location.hash = "";
прозорец.localStorage.setItem("жетон", символ);
 }


 setToken (токен)
 }, [])


конст излизане = () => {
 setToken("");
прозорец.localStorage.removeItem("жетон");
 }


връщане (


износпо подразбиране Приложение;

Нека да го разбием:

  • Този компонент рендира условно компонента за търсене и бутона за излизане, ако токенът за достъп присъства в противен случай, той изобразява div с връзка, която насочва потребителя към разрешението на Spotify страница. Връзката съдържа параметри на заявката, които указват стойностите CLIENT_ID, REDIRECT_URI и RESPONSE_TYPE.
  • След като сте удостоверили потребител, извикайте куката useEffect, за да изпълните кодов блок, когато компонентът се монтира. Този кодов блок извлича токена за достъп от URL хеша и го задава като новата стойност на променливата за състояние на токена. Той също така съхранява токена в локално хранилище, за да запази състоянието на удостоверяване.
  • С токена за достъп, съхранен в състояние, той се предава като подложка към компонента Searcher, за да прави заявки към уеб API на Spotify.
  • За да излезете, кодът просто премахва токена за достъп от локалното хранилище и задава състоянието на токена на празен низ.

Внедряване на функционалността за търсене и изобразяване на резултатите

В директорията /src създайте нова папка и я наименувайте компоненти. В тази папка създайте нов файл: Searcher.js и добавете кода по-долу.

импортиране Реагирайте, {useState, useEffect} от"реагира"
импортиране аксиос от"аксиос";
функцияТърсач(реквизит) {
конст [searchKey, setSearchKey] = useState("")
конст [следи, setTracks] = useState([])

конст access_token = props.token

конст searchArtist = асинхронен () => {
конст {данни} = изчакайте axios.get(" https://api.spotify.com/v1/search", {
 заглавки: {
'Тип съдържание': "приложение/json",
„упълномощаване“: `Носител ${access_token}`
 },
 параметри: {
 q: searchKey,
 Тип: "художник"
 }
 })

вар artistID = data.artists.items[0].документ за самоличност


вар artistTracks = изчакайте axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 заглавки: {
 Упълномощаване: `Носител ${access_token}`
 },
 параметри: {
 ограничение: 10,
 пазар: 'НАС'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


връщане (
 <>


"Формуляр за търсене">
 className ="Име"
 тип="текст"
 заместител =„Търсене по име на изпълнител...“
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


износпо подразбиране Търсач

Нека да го разбием:

  • Компонентът дефинира константата access_token, която задава на свойството на токена, предадено като проп. По-късно той предава този токен в заглавката на заявката за API към крайната точка на API за търсене на Spotify.
  • Дефинирайте две състояния: searchKey и песни. Състоянието searchKey съдържа текущата стойност на входа за търсене. Състоянието на песни съдържа масив от най-добрите 10 песни за изпълнителя, които търсенето в Spotify ще върне.
  • Функцията searchArtist прави заявка GET към API на Spotify, за да търси данни на изпълнители въз основа на стойността searchKey.
  • След това извлича идентификатора на изпълнителя от данните за отговора и прави друга GET заявка, за да извлече най-добрите песни за този изпълнител. От данните за отговора той извлича първите 10 песни и задава променливата за песните.
  • Компонентът връща поле за въвеждане и бутон за търсене. Когато потребител щракне върху бутона за търсене, той извиква функцията searchArtist, за да извлече и покаже най-добрите песни за определен изпълнител. И накрая, той използва функцията карта, за да рендира първите пет песни в масива с песни като списък.

Стартирайте вашия сървър за разработка, за да актуализирате промените, след което преминете към http://localhost: 3000 във вашия браузър, за да видите резултатите.

Персонализирайте вашето приложение с функциите на Spotify

Това ръководство подчертава стъпките, необходими за отправяне на заявки към уеб API на Spotify за търсене на музикални данни на изпълнители. Можете обаче да направите повече с функциите на Spotify, предоставени от неговите SDK и API, като например интегриране на неговия уеб плейър за възпроизвеждане със същия външен вид и усещане като на Spotify.

Предимството на SDK и API на Spotify е, че те са богати на функции и можете лесно да ги интегрирате във всяко уеб или мобилно приложение.