Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Spotify on muuttanut täysin tapaa, jolla suoratoistamme musiikkia luettelolla, joka sisältää miljoonia kappaleita, albumeja ja soittolistoja.

Sen web-sovellusliittymän avulla voit tehdä Spotify-kokemuksestasi entistä hauskempaa rakentamalla oman React-musiikkihakusovelluksesi. API tarjoaa pääsyn erilaisiin musiikkitietoihin, joiden avulla voit luoda mukautetun musiikkisovelluksen ja muokata sitä makusi mukaan.

Spotify kehittäjille

Spotify tarjoaa laajan valikoiman musiikin suoratoistoominaisuuksia, kuten hakua, offline-toistoa ja henkilökohtaisia ​​suosituksia. Spotify for Developers -alusta tarjoaa pääsyn sovellusliittymiin ja SDK: ihin, jotka tukevat näitä ominaisuuksia. Tässä oppaassa tutustut verkkosovellusliittymään ja opit integroimaan sen React-sovellukseesi löytääksesi kappaleita, joista pidät.

Luo tili

Aloitaksesi sinulla on oltava Spotify-tili. Jos sinulla ei vielä ole sellaista, vieraile

instagram viewer
Spotify-kirjautumissivulla. Kuitenkin, jos sinulla on jo sellainen, kirjaudu sisään Spotify kehittäjille konsoli.

Rekisteröi hakemuksesi

Kun olet kirjautunut sisään kehittäjäkonsoliin, rekisteröi sovelluksesi saadaksesi pääsyn verkkosovellusliittymään. Napsauta kojelautasivulla Luo sovellus -painiketta, täytä nimi ja kuvaus ja hyväksy lopuksi ehdot sovelluksen luomiseksi.

Napsauta lopuksi Muokkaa asetuksia -painiketta vaihtaaksesi uudelleenohjaus-URL-asetuksiin. Koska sovelluksesi on edelleen kehitystilassa, lisää http://localhost: 3000 uudelleenohjaus-URL-osoitteeksi. Tämä on URL-osoite, johon haluat ohjata käyttäjän Spotifyn todennuksen jälkeen.

Kun olet rekisteröinyt hakemuksesi, Spotify toimittaa yksilöllisen asiakastunnuksesi ja asiakassalaisuuksiasi, joita voit käyttää:

  • Lisää Spotify-todennuskulku, jotta voit kirjautua sisään Spotify-tunnistetiedoillasi React-sovelluksessasi.
  • Hanki yksilöllinen käyttöoikeus, jotta voit tehdä pyyntöjä erilaisille web-sovellusliittymän päätepisteille, mukaan lukien tietojen, kuten kappaleiden tai albumien, haun.

Määritä React Client

Luo React-sovellus ja siirry juurihakemistoon ja luo uusi tiedosto, .env, asettaaksesi joitain ympäristömuuttujia. Voit saada asiakastunnuksesi Spotifyn kehittäjien hallintapaneelista.

REACT_APP_SPOTIFY_CLIENT_ID = "asiakastunnuksesi"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "tunnus"

Löydät tämän sovelluksen koodin siitä GitHub-arkisto.

Asenna tarvittavat paketit

Asenna Axios. Käytät sen menetelmiä HTTP-pyyntöjen tekemiseen Spotifyn verkkosovellusliittymälle.

npm asennus axios

Lisää Spotifyn todennustyönkulku

Spotify määrittää, että kaikilla Web API -päätepisteisiin kohdistetuilla pyynnöillä on kelvollinen käyttöoikeustunnus pyynnön otsikossa. Saadaksesi käyttöoikeustunnuksen, sovelluksesi on ensin todennettu Spotifylla.

Spotify tukee useita todennus ja valtuutusmenetelmät, kuten valtuutuskoodi, asiakkaan tunnistetiedot tai implisiittiset myöntämismenetelmät.

Yksinkertaisin toteuttaa on implisiittinen myöntämismenetelmä, joka edellyttää, että sovellus tekee pyyntöjä todennuspäätepisteelle (lisäsit tämän ENV-tiedostoon) välittäen asiakastunnuksesi. Onnistuneen todennuksen jälkeen Spotify vastaa antamalla käyttöoikeustunnuksen, joka vanhenee tietyn ajan kuluessa.

Avaa src/App.js-tiedosto, poista React-koodi ja lisää alla oleva koodi:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti Etsijä alkaen'./components/Searcher';
toimintoSovellus() {
konst CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI =prosessi.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


konst [token, setToken] = useState("");


 useEffect(() => { 
konst hash = ikkuna.location.hash;
antaa merkki = ikkuna.localStorage.getItem("tunnus");

jos (hash && hash) {
 token = hash.substring(1).jakaa("&").löytö(elem => elem.startsWith("pääsytunnus")).jakaa("=")[1];
ikkuna.location.hash = "";
ikkuna.localStorage.setItem("tunnus", merkki);
 }


 setToken (tunnus)
 }, [])


konst uloskirjautuminen = () => {
 setToken("");
ikkuna.localStorage.removeItem("tunnus");
 }


palata (


viedäoletuksena Sovellus;

Puretaan se:

  • Tämä komponentti hahmontaa ehdollisesti hakukomponentin ja uloskirjautumispainikkeen, jos käyttöoikeustunnus on muuten läsnä, se tekee div: n linkillä, joka ohjaa käyttäjän Spotify-valtuutukseen sivu. Linkki sisältää kyselyparametreja, jotka määrittävät CLIENT_ID-, REDIRECT_URI- ja RESPONSE_TYPE-arvot.
  • Kun olet todentanut käyttäjän, kutsu useEffect-koukku suorittaaksesi koodilohkon, kun komponentti asennetaan. Tämä koodilohko hakee pääsytunnuksen URL-hajautuskohdasta ja asettaa sen tunnuksen tilamuuttujan uudeksi arvoksi. Se myös tallentaa tunnuksen paikalliseen tallennustilaan todennustilan säilyttämiseksi.
  • Kun käyttöoikeustunnus on tallennettu tilaan, se välitetään ehdotuksena Searcher-komponentille, jotta se voi tehdä pyyntöjä Spotifyn verkkosovellusliittymälle.
  • Uloskirjautumista varten koodi yksinkertaisesti poistaa pääsytunnuksen paikallisesta tallennustilasta ja asettaa tunnuksen tilan tyhjäksi merkkijonoksi.

Ota käyttöön hakutoiminto ja renderöi tulokset

Luo /src-hakemistoon uusi kansio ja nimeä se komponenteiksi. Luo tähän kansioon uusi tiedosto: Searcher.js ja lisää alla oleva koodi.

tuonti React, {useState, useEffect} alkaen'reagoi'
tuonti aksiot alkaen"aksiot";
toimintoEtsijä(rekvisiitta) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst pääsy_tunnus = props.token

konst searchArtist = asynk () => {
konst {data} = odottaa axios.get(" https://api.spotify.com/v1/search", {
 otsikot: {
'Sisältötyyppi': "sovellus/json",
"Valtuutus": `Kantaja ${access_token}`
 },
 parametrit: {
 q: hakuavain,
 tyyppi: "taiteilija"
 }
 })

var artistID = data.artists.items[0].id


var artistTracks = odottaa axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 otsikot: {
 Valtuutus: `Kantaja ${access_token}`
 },
 parametrit: {
 raja: 10,
 markkinoida: 'MEILLE'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


palata (
 <>


"Hakulomake">
 luokannimi ="Nimi"
 tyyppi="teksti"
 paikkamerkki="Hae artistin nimellä..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


viedäoletuksena Etsijä

Puretaan se:

  • Komponentti määrittää access_token-vakion, jonka se asettaa ehdotuksena välitetylle token-ominaisuudelle. Myöhemmin se välittää tämän tunnuksen API-pyynnön otsikossa Spotifyn hakusovellusliittymän päätepisteeseen.
  • Määrittele kaksi tilaa: hakuavain ja jäljet. SearchKey-tila sisältää hakusyötteen nykyisen arvon. Kappaleiden tila sisältää joukon artistin 10 parasta kappaletta, jotka Spotify-haku palauttaa.
  • SearchArtist-toiminto tekee GET-pyynnön Spotify API: lle etsiäkseen artistien tietoja searchKey-arvon perusteella.
  • Sitten se poimii esittäjän tunnuksen vastaustiedoista ja tekee uuden GET-pyynnön hakeakseen artistin suosituimmat kappaleet. Vastaustiedoista se poimii 10 parasta raitaa ja asettaa raitojen muuttujan.
  • Komponentti palauttaa syöttökentän ja hakupainikkeen. Kun käyttäjä napsauttaa hakupainiketta, se kutsuu searchArtist-toiminnon hakemaan ja näyttämään tietyn esittäjän suosituimmat kappaleet. Lopuksi se käyttää karttatoimintoa hahmontaakseen viisi parasta raitaa jälkitaulukossa luettelona.

Suorita kehityspalvelin päivittääksesi muutokset ja siirry sitten osoitteeseen http://localhost: 3000 selaimessasi nähdäksesi tulokset.

Mukauta sovelluksesi Spotifyn ominaisuuksilla

Tässä oppaassa korostettiin vaiheita, jotka vaaditaan esittämään pyyntöjä Spotifyn verkkosovellusliittymälle artistien musiikkitietojen etsimiseksi. Voit kuitenkin tehdä enemmän Spotifyn SDK: iden ja API: iden tarjoamilla ominaisuuksilla, kuten integroida sen verkkotoistosoittimeen samalla ulkoasulla ja tuntumalla kuin Spotifyssa.

Spotifyn SDK: iden ja API: iden etuna on, että ne ovat monipuolisia ja voit helposti integroida ne mihin tahansa verkko- tai mobiilisovellukseen.