React JS 앱에서 Spotify API를 사용하는 방법

Open your terminal and create a new react application with following command:

npx create-react-app spotify-react

This creates a complete react application. With cd spotify-react && yarn start you jump into the projects directy and start the development server which then runs at http://localhost:3000 by default.

(If for whatever reason the port is not 3000 make sure to change the redirect url in your spotify app settings.)

To be able to use the API, the user needs to be authenticated with his Spotify Account. For that case we need to create a link which leads us to the Spotify Authentication/Login page.

This links consists of the following params:

• Endpoint
• Client ID
• Redirect URI
• Response Type

Let's start coding, open up App.js and remove all that stuff you don't need, so you app will look similiar to this:

import './App.css';

function App() {

    return (
        <div className="App">
            <header className="App-header">

            </header>
        </div>
    );
}

export default App;

Now let's add the variables which we then use for our authentication link.

(You get the CLIENT_ID from the Spotify App Overview, mentioned at the beginning.)

const CLIENT_ID = "+++++++++++++++++++++++++++++"
const REDIRECT_URI = "http://localhost:3000"
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
const RESPONSE_TYPE = "token"

Now we can create the link in the return of our App.js which looks like this:

 <a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>Login to Spotify</a>

Let's open http//:localhost:3000 in your browser. When you click on the Login to Spotify link, you will be redirected to the Spotify Authentication page.

Either you are already logged in, than you just need to accept the terms, or you need to login with your Spotify Account credentials.

After accepting the terms you will be redirected back to the app at localhost:3000 .
A hash is passed to the URL which contains the access token which we need to authorize the API calls.

As we want to check for the token as soon as we come back, we use the useEffect from react.
Then we check the URL for the hash and extract the token by performing some tasks. After that we store the token in a state variable with help of the useState hook as well as we save the token in our localeStorage.

Import the useEffect as well as the useState hook to your application.

import {useEffect, useState} from 'react';

Now create the state variable for the token and set it to an empty string by default.

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

The useEffect function will look like this:

useEffect(() => {
    const hash = window.location.hash
    let token = window.localStorage.getItem("token")

    if (!token && hash) {
        token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]

        window.location.hash = ""
        window.localStorage.setItem("token", token)
    }

    setToken(token)

}, [])

Let me explain what happens in here:
When we open the app, we check if we have a hash or we already have a token saved in our localStorage.
If we do have a token stored, we simply continue by setting our token state variable.
If we don't have a token, we check if we have a hash. If so we perform tasks on that string to extract the token.

We substring the hash at the beginning. We split the String by the ampersands. Then we search vor that element which contains access_token. This element than again will be split at the equal sign. The array we get contains the token at index 1.

Once we got the token we save it in our localStorage and reset the hash.

To logout we simply create a function which removes the token from our localStorage as well as we set the state token back to an empty string.

const logout = () => {
    setToken("")
    window.localStorage.removeItem("token")
}

Let's add the Logout Button to our app, rendering conditionally depending on token state.

The intermediate stand of App.js should now look like this

function App() {
    const CLIENT_ID = "+++++++++++++++++++++++++++++"
    const REDIRECT_URI = "http://localhost:3000"
    const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
    const RESPONSE_TYPE = "token"

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

    useEffect(() => {
        const hash = window.location.hash
        let token = window.localStorage.getItem("token")

        if (!token && hash) {
            token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]

            window.location.hash = ""
            window.localStorage.setItem("token", token)
        }

        setToken(token)

    }, [])

    const logout = () => {
        setToken("")
        window.localStorage.removeItem("token")
    }

    return (
        <div className="App">
            <header className="App-header">
                <h1>Spotify React</h1>
                {!token ?
                    <a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>Login
                        to Spotify</a>
                    : <button onClick={logout}>Logout</button>}
            </header>
        </div>
    );
}

export default App;

The last step is to display the data in our application. For that we let's create the renderArtists function and call it inside the return of our App.js .

const renderArtists = () => {
    return artists.map(artist => (
        <div key={artist.id}>
            {artist.images.length ? <img width={"100%"} src={artist.images[0].url} alt=""/> : <div>No Image</div>}
            {artist.name}
        </div>
    ))
}

{renderArtists()}