Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A Spotify teljesen megváltoztatta a zene streamelési módját egy katalógussal, amely több millió dalt, albumot és lejátszási listát tartalmaz.

A webes API segítségével még szórakoztatóbbá teheti Spotify-élményeit saját React zenekereső alkalmazás létrehozásával. Az API hozzáférést biztosít számos zenei adathoz, amelyek segítségével egyéni zenei alkalmazást készíthet, és ízlése szerint személyre szabhatja.

Spotify fejlesztőknek

A Spotify a zenei streamelési funkciók széles skáláját kínálja, például keresést, offline lejátszást és személyre szabott ajánlásokat. A Spotify for Developers platform hozzáférést biztosít az ezeket a funkciókat biztosító API-khoz és SDK-khoz. Ebben az útmutatóban felfedezheti a webes API-t, és megtanulhatja, hogyan integrálhatja azt a React alkalmazásba, hogy megkeresse az Ön által kedvelt dalokat.

Regisztráljon fiókot

A kezdéshez Spotify-fiókkal kell rendelkeznie. Ha még nincs, látogassa meg a Spotify regisztrációs oldalon. Ha azonban már rendelkezik ilyennel, jelentkezzen be a Spotify fejlesztőknek konzol.

Regisztrálja jelentkezését

Miután bejelentkezett a fejlesztői konzolba, regisztrálja alkalmazását, hogy hozzáférjen a webes API-hoz. Az irányítópult oldalon kattintson a Hozzon létre egy alkalmazást gombra, írja be a nevet és a leírást, és végül fogadja el a feltételeket az alkalmazás létrehozásához.

Végül kattintson a Beállítások szerkesztése gombot az átirányítási URL-beállítások módosításához. Mivel az alkalmazás még fejlesztési módban van, adja hozzá http://localhost: 3000 átirányítási URL-ként. Ez az az URL, amelyre át szeretné irányítani a felhasználót, miután hitelesítette a Spotify-val.

Jelentkezésének regisztrálása után a Spotify megadja egyedi ügyfélazonosítóját és ügyféltitkait, amelyeket a következőkre használhat fel:

  • Adja hozzá a Spotify hitelesítési folyamatot, hogy Spotify hitelesítő adataival jelentkezzen be a React alkalmazásban.
  • Szerezze be egyedi hozzáférési jogkivonatát, hogy kéréseket küldhessen különböző webes API-végpontokhoz, beleértve az adatok, például zeneszámok vagy albumok keresését.

Állítsa be a React klienst

Hozzon létre egy React alkalmazást és navigáljon a gyökérkönyvtárba, és hozzon létre egy új fájlt, .env, néhány környezeti változó beállításához. Az ügyfél-azonosítót a Spotify fejlesztői irányítópultjáról kaphatja meg.

REACT_APP_SPOTIFY_CLIENT_ID = "az Ön ügyfél-azonosítója"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "jelképes"

Az alkalmazás kódja megtalálható benne GitHub adattár.

Telepítse a szükséges csomagokat

Telepítse az Axiost. A módszereit fogja használni a HTTP-kérések küldésére a Spotify webes API-jához.

npm install axios

Adja hozzá a Spotify hitelesítési munkafolyamatát

A Spotify meghatározza, hogy bármely Web API-végponthoz érkezett kérésnek érvényes hozzáférési jogkivonattal kell rendelkeznie a kérelem fejlécében. A hozzáférési token megszerzéséhez az alkalmazásnak először hitelesítenie kell magát a Spotify segítségével.

A Spotify több szolgáltatást is támogat hitelesítés és engedélyezésmódszerek, például engedélyezési kód, ügyfél hitelesítő adatok vagy implicit engedélyezési módszerek.

A legegyszerűbb megvalósítani az implicit engedélyezési módszert, amely megköveteli, hogy az alkalmazás kéréseket tegyen a hitelesítési végponthoz (ezt az ENV-fájlban adta hozzá), átadva az ügyfél-azonosítót. Sikeres hitelesítés esetén a Spotify egy hozzáférési jogkivonat megadásával válaszol, amely egy meghatározott ideig lejár.

Nyissa meg az src/App.js fájlt, törölje a React-kódot, és adja hozzá az alábbi kódot:

import React, { useState, useEffect } tól től'reagál';
import Kereső tól től'./components/Searcher';
funkcióApp() {
const CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
const AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
const RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


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


 useEffect(() => { 
const hash = ablak.location.hash;
hagyja token = ablak.localStorage.getItem("jelképes");

ha (hash && hash) {
 token = hash.substring(1).hasított("&").megtalálja(elem => elem.startsWith("access_token")).hasított("=")[1];
ablak.location.hash = "";
ablak.localStorage.setItem("jelképes", token);
 }


 setToken (token)
 }, [])


const kijelentkezés = () => {
 setToken("");
ablak.localStorage.removeItem("jelképes");
 }


Visszatérés (


exportalapértelmezett App;

Bontsuk fel:

  • Ez az összetevő feltételesen megjeleníti a keresési összetevőt és a kijelentkezési gombot, ha a hozzáférési jogkivonat egyébként jelen van, akkor egy div-t jelenít meg egy hivatkozással, amely a felhasználót a Spotify jogosultságra irányítja oldalon. A hivatkozás olyan lekérdezési paramétereket tartalmaz, amelyek a CLIENT_ID, REDIRECT_URI és RESPONSE_TYPE értékeket adják meg.
  • Miután hitelesítette a felhasználót, hívja meg a useEffect hook-ot a kódblokk futtatásához, amikor az összetevő felcsatolódik. Ez a kódblokk lekéri a hozzáférési jogkivonatot az URL-kivonatból, és beállítja a jogkivonat állapotváltozójának új értékeként. A hitelesítési állapot megőrzése érdekében a tokent a helyi tárolóban is tárolja.
  • Az állapotában tárolt hozzáférési jogkivonat támogatásként kerül átadásra a Searcher komponensnek, hogy kéréseket küldhessen a Spotify webes API-jának.
  • A kijelentkezéshez a kód egyszerűen eltávolítja a hozzáférési jogkivonatot a helyi tárolóból, és a jogkivonat állapotát üres karakterláncra állítja be.

Valósítsa meg a keresési funkciót és az eredményeket

A /src könyvtárban hozzon létre egy új mappát, és nevezze el, összetevők. Ebben a mappában hozzon létre egy új fájlt: Searcher.js, és adja hozzá az alábbi kódot.

import React, {useState, useEffect} tól től'reagál'
import axiók tól től"axiók";
funkcióKereső(kellékek) {
const [searchKey, setSearchKey] = useState("")
const [tracks, setTracks] = useState([])

const access_token = kellékek.token

const searchArtist = async () => {
const {adat} = várja axios.get(" https://api.spotify.com/v1/search", {
 fejlécek: {
'Tartalom típus': "alkalmazás/json",
"Engedélyezés": ` Hordozó ${access_token}`
 },
 paraméterek: {
 q: searchKey,
 típus: "művész"
 }
 })

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


var artistTracks = várja axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 fejlécek: {
 Engedélyezés: ` Hordozó ${access_token}`
 },
 paraméterek: {
 határ: 10,
 piac: 'MINKET'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


Visszatérés (
 <>


"Keresési űrlap">
 osztálynév ="Név"
 típus="szöveg"
 helyőrző="Keresés előadó neve szerint..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


exportalapértelmezett Kereső

Bontsuk fel:

  • Az összetevő meghatározza az access_token állandót, amelyet a propként átadott token tulajdonságra állít be. Később ezt a tokent az API-kérés fejlécében továbbítja a Spotify keresési API-végpontjának.
  • Határozzon meg két állapotot: a keresési kulcsot és a trackeket. A searchKey állapot a keresési bemenet aktuális értékét tartalmazza. A számok állapota tartalmazza az előadó 10 legjobb számának tömbjét, amelyet a Spotify keresése visszaad.
  • A searchArtist függvény GET-kérést küld a Spotify API-nak, hogy a searchKey értéke alapján megkeresse az előadók adatait.
  • Ezután kivonja az előadó azonosítóját a válaszadatokból, és újabb GET-kérést küld az előadó legjobb számainak lekérésére. A válaszadatokból kivonja a legjobb 10 sávot, és beállítja a sávok változóját.
  • Az összetevő egy beviteli mezőt és egy keresőgombot ad vissza. Amikor a felhasználó a keresés gombra kattint, meghívja a searchArtist funkciót, hogy lekérje és megjelenítse egy adott előadó legjobb zeneszámait. Végül a térkép funkcióval jeleníti meg a track tömb első öt sávját listaként.

Futtassa a fejlesztői kiszolgálót a módosítások frissítéséhez, majd lépjen a következőre http://localhost: 3000 a böngészőjében az eredmények megtekintéséhez.

Szabja személyre alkalmazását a Spotify szolgáltatásaival

Ez az útmutató kiemelte azokat a lépéseket, amelyek szükségesek ahhoz, hogy a Spotify webes API-ját kérjék az előadók zenei adatainak kereséséhez. A Spotify SDK-k és API-k által biztosított funkcióival azonban többet is megtehet, például integrálhatja a webes lejátszási lejátszóját ugyanolyan megjelenéssel és érzéssel, mint a Spotify-on.

A Spotify SDK-inak és API-jainak előnye, hogy funkciókban gazdagok, és könnyen integrálhatók bármilyen webes vagy mobilalkalmazásba.