LoginSignup
15
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@pasha(聡一郎 伊藤)

Spotify API を使って開発をしてみた！Reactでaccess tokenの取得編

Last updated at Posted at 2020-09-30

はじめに

SpotifyAPIを使用したポートフォリオ 作成しました。
APIを叩きtokenを取得するのに苦戦したので、アウトプットとして記事を投稿します。

参考になれば幸いです:bow:

ステップ①

デベロッパーに登録

https://developer.spotify.com/documentation/web-api/
こちらのURLから登録できます。

まず、登録するためにログインします。

image.png

ログインをしましたら、開発するアプリ用のダッシュボードを作成します。
__CREATE AN APP__をクリックして先へ進みます。

image.png

続いて、以下の様開発アプリの名前と説明を書きます。
今回は、Qiita用に作成しますので、名前はQiita、説明はtestにしました。

image.png

ここまできたら、リダイレクトする際のURLアドレスを定義します。
SpotifyAPIではユーザーの認証に成功、あるいは認証に失敗した際に、リダイレクトするURLを定義する必要があります。
今回は、開発段階として考え、リダイレクトURLをhttp://localhost:3000/ とします。
補足：デプロイしたアプリであれば、IPアドレスなどを定義する必要があります。

EDIT SETTINGSをクリックし、画像の様にリダイレクトURLを定義しADDで追加します。
できましたら、Saveをクリックし保存します。

image.png

ステップ②

では、でアプリを立ち上げてコードを書いていきます。

% npx create-react-app myapp

SpotifyAPIを使用するには、使用するユーザーがSpotifyのアカウント持っている必要があります。
また本番環境でも、もし他者がSpotifyAPIを使用したサービスを使用する場合も本人がSpotifyアカウントを持っている必要があります。
したがって、開発側はSpotifyAPIからユーザーが任意のデータを取得できる様にプログラムを組む前にアカウントを持っているか検証するプログラムを組む必要があります。

簡単にまとめると、__SpotifyAPIはOAuthを利用するため、ユーザにログインを促す必要がある__ということです。

流れのイメージは以下の感じです。

  • ログインボタンをクリック
  • Spotifyのログインページへリダイレクト
  • ログイン後のページへリダイレクト(Spotifyのデータを取得できる様になる)
ログインコンポーネントを作成
まずは、Spotifyアカウントへログインしていない状態の時のコンポーネントを作成します。 あまり深く考えず記述はこんな感じです。 
import React from 'react'
import { accessUrl } from "./Spotify";

function Login() {
  return (
    <div className="Login">
      <h2>ログイン前です</h2>
      <a href={accessUrl}>spotifyへログイン</a>
    </div>
  )
}

export default Login

accessURLの中身は、次に解説しますがspotifyがアクセスを承認する先のURLです。

ユーザーのアクセスを承認する

まずは、Spotifyコンポーネントを作成しアクセスを承認する先のURLを組み立てます。

以下を定義する必要があります。
・https://accounts.spotify.com/authorize
(上記URLは、承認ページへアクセスするためのURLです。詳しくはこちら)
・clientId
(ダッシュボードへログインした際に確認できます！)
・scopes
(対応する範囲を決めます)
・SpotifyのログインページのURL

先に記述以下です。

Spotify.js
export const  authEndpoint = "https://accounts.spotify.com/authorize";


const redirectUri = "http://localhost:3000/";

const clientId = "22b595ba74a041a493fe4eb9472cdb51";

// 対応する範囲を決める
const scopes = [
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-top-read",
  "user-modify-playback-state",
];

export const getTokenFromUrl = () => {
  return window.location.hash
    .substring(1)
    .split('&')
    .reduce((initial, item) => {
      let parts = item.split('=');
      initial[parts[0]] = decodeURIComponent(parts[1]);
      return initial
    }, {});
}


// SpotifyのログインページのURL
export const accessUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join(
  "%20"
)}&response_type=token&show_dialog=true`;

ここでやっている事を簡単に説明すると、
https://accounts.spotify.com/authorize にアクセスする事でSpotifyのアクセスページへ移動ができます。
しかし、このままだとユーザーの情報がないためclientId等を定義し、新たにアクセスURLを組み立てます。

下の画像の様に、先ほどLoginコンポーネントのaタグ内に書いたURLは、ここで組み立てたアクセスURLです。

image.png

__Spotifyへログイン__を押すと以下のアクセスページへ移動し、先ほど組み立てたURLになっている事を確認できます。

image.png

access tokenの確認
ここまま、同意するボタンを押すと元の画面に戻ります。 しかし、先ほどURLが変わっています。 URLを見てみるとaccess tokenが組み込まれていることがわかります。

とりあえずは、access tokenの取得ができました。

image.png

ステップ③

spotifyへログインした状態とそうでない状態を分ける

現時点では、access tokenの確認はできましたが画面が変わっていません。
なので、別のコンポーネントを作成し、ログインできた時のページへ行く様にする必要があります。

ここでは、__JSX内でtokenを取得できたならばぺージへ移動する__という条件分岐をする必要があります。

loggedIn.js
import React from 'react'

function LoggedIn() {
  return (
    <div>
      <h1>spotifyへログインしました</h1>
    </div>
  )
}

export default LoggedIn
App.js
import React,{ useState, useEffect } from 'react';
import './App.css';
import Login from './Login';
import LoggedIn from './LoggedIn';
import { getTokenFromUrl } from './Spotify';



function App() {

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

  useEffect(() => {
    const hash = getTokenFromUrl();
    console.log(hash )
    window.location.hash = "";
    const token = hash.access_token;

    if (token) {
      setToken(token)
    }

  }, [])

  return (
    <div className="App">
      { token ? <LoggedIn/> : <Login/> } 
    </div>
  );
}

export default App;

条件分岐を定義するために、Spotify.jsからaccess tokenを持ってくる必要があります。
console.log(hash)の中身を確認すると、access tokenが取得できています。
無事に取れていたら、 __const token = hash.access_token;と、tokenを定義し
JSX内の{ tokeno ? : }__とする事で、ユーザーがログインしている時とそうでない時を定義することができます。

実際に、試す以下のページに移動できるかと思います。
image.png

最後に

SpotifyAPIのを使用した開発は、他のAPIと比べても難しく感じ、特にaccess tokenの取得がなかなか上手くいかなかったので記事にしました。
SpotifyAPIのデベロッパーサイトでクイックスタートを参考にしてみたものの、?????続きでした。
今回のポイントは、OAuthを利用するためのアクセス先のURLをどう組み立てるかです。
APIによっては、OAuthを利用する必要がないものもあるのでケースバイケースですが、OAuthを利用する際のロジックは同じですので、別のAPIで開発をするにも応用できるかなと思います。

最後に今回書いた記述をした書いておきますので、参考なれば幸いです。

App.js
import React,{ useState, useEffect } from 'react';
import './App.css';
import Login from './Login';
import LoggedIn from './LoggedIn';
import { getTokenFromUrl } from './Spotify';



function App() {

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

  useEffect(() => {
    const hash = getTokenFromUrl();
    console.log(hash )
    window.location.hash = "";
    const token = hash.access_token;

    if (token) {
      setToken(token)
    }

  }, [])

  return (
    <div className="App">
      { token ?
      <LoggedIn/>
      :
      <Login/>
      } 
    </div>
  );
}

export default App;
loggedIn.js
import React from 'react'

function LoggedIn() {
  return (
    <div>
      <h1>spotifyへログインしました</h1>
    </div>
  )
}

export default LoggedIn
login.js
import React from 'react'
import { accessUrl } from "./Spotify";

function Login() {
  return (
    <div className="Login">
      <h2>ログイン前です</h2>
      <a href={accessUrl}>spotifyへログイン</a>
    </div>
  )
}

export default Login
Spotify.js
export const  authEndpoint = "https://accounts.spotify.com/authorize";


const redirectUri = "http://localhost:3000/";

const clientId = "22b595ba74a041a493fe4eb9472cdb51";

// 対応する範囲を決める
const scopes = [
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-top-read",
  "user-modify-playback-state",
];

export const getTokenFromUrl = () => {
  return window.location.hash
    .substring(1)
    .split('&')
    .reduce((initial, item) => {
      let parts = item.split('=');
      initial[parts[0]] = decodeURIComponent(parts[1]);
      return initial
    }, {});
}


// SpotifyのログインページのURL
export const accessUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join(
  "%20"
)}&response_type=token&show_dialog=true`;
15
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?