Spotify Web API を Node.js で弄ってみる

# Spotify Web API を Node.js で弄ってみる
Spotify に Web API があるのを知ったので node.js で試してみた手順まとめ。

## Web API Tutorial
[Web API Tutorial](https://developer.spotify.com/documentation/web-api/quick-start/) を参考にすすめていく事にします。

### Dashboard を有効にする。
[Dashboard](https://developer.spotify.com/dashboard) にアクセスして Spotify アカウントでログインして Dashboard を有効にする。下のような画面が表示されるはず。
<img width="1067" alt="スクリーンショット 2019-10-30 9.08.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/d9ea7051-d1c3-7c2f-2dda-5f0743fc8fd1.png">

### アプリ作成
"CREATE AN APP" を押して各 必須 項目をうめる。
`Redirect URIs` に `http://localhost:8888/` を登録する。
<img width="516" alt="スクリーンショット 2019-10-30 9.11.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/728a4b9a-f0da-91c0-b18c-3813f96cd271.png">


### Client ID / Client Secret を確認する
<img width="239" alt="スクリーンショット 2019-10-30 9.28.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/9ac9812e-2a36-77b3-2721-470ff7e5f2b5.png">

### 認証トークンを取得する
[web-api-auth-examples](https://github.com/spotify/web-api-auth-examples)
Spotifyから提供されている認証サンプルのコードで認証トークンを取得する。

 1.  authorization_code  

```
git clone https://github.com/spotify/web-api-auth-examples
cd web-api-auth-examples
npm install
```
2. clone 後に authorization_code/app.js の クライアントIDなどを書き換える。  
`redirect_uri` は `http://localhost:8888`
 
```
cd authorization_code
open app.js

〜
var client_id = 'CLIENT_ID'; // Your client id
var client_secret = 'CLIENT_SECRET'; // Your secret
var redirect_uri = 'REDIRECT_URI'; // Your redirect uri
〜
```

 2. 実行して ブラウザで localhost:8888 にアクセスする。
```
node app.js
```

<img width="362" alt="スクリーンショット 2019-10-30 10.03.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/7e449ac0-9336-b6dd-ec20-2892fed6f5d1.png">

3. `Log in with Spotify` にアクセスして認証トークンを取得する。
<img width="477" alt="スクリーンショット 2019-10-30 10.12.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/2eaa3a14-c6d9-97aa-478e-add69858cc30.png">

認証が成功すると `localhost:8888` に `code` パラーメタ付きでリダイレクトされる。
この `code` パラメータの値が 認証トークン です。

## Spotify Web API Node
[Spotify Web API Node](https://github.com/thelinmichael/spotify-web-api-node) 
node.js から Spotify Web API に アクセスするためのライブラリがあったので試してみます。

```
var SpotifyWebApi = require('spotify-web-api-node');

const authorizationCode = 'AQCYDgG5bNJ_...';

// credentials are optional
var spotifyApi = new SpotifyWebApi({
  clientId: '10ca96700c...',
  clientSecret: 'e8e5940c...',
  redirectUri: 'http://localhost:8888'
});

spotifyApi
  .authorizationCodeGrant(authorizationCode)
  .then(function(data) {
    console.log('Retrieved access token', data.body['access_token']);
    spotifyApi.setAccessToken(data.body['access_token']);
    return spotifyApi.searchTracks('Love');
  })
  .then(function(data) {
    console.log('I got ' + data.body.tracks.total + ' results!');

    var firstPage = data.body.tracks.items;
    console.log(
      'The tracks in the first page are.. (popularity in parentheses)'
    );

    firstPage.forEach(function(track, index) {
      console.log(index + ': ' + track.name + ' (' + track.popularity + ')');
    });
  })
  .catch(function(err) {
    console.log('Something went wrong:', err.message);
  });

```

実行成功すると `LOVE` で検索した トラック一覧が表示されます。
<img width="476" alt="スクリーンショット 2019-10-30 10.22.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100147/47aa0dba-c850-3ed8-9534-72dba11070e8.png">


# 参考
[音楽系API（主に音楽配信サービス）まとめ](https://qiita.com/yumayamada1029/items/d556e8d227418bcfb8c0#soundcloud-api) 
# 水曜日 #nijuni朝活
毎週 水曜日に [nijuni](https://nijuni.jp/) 朝活 やってます。 この Qiita も 朝活中に 作ったものです。