[Postman]Spotify APIで今聞いている曲を取得する

# はじめに
Spotify APIを使ったプロジェクトのことはじめに、Postmanで今聞いている曲を取得するところまでをやってみました。

具体的な手順を前に、説明を後に書く形の記事なので、興味があれば最後まで読んでみてください。

# 前提
作業手順内では以下の内容についての説明を省略しています。
一応理解していなくても再現できるように書いていますが、理解を深めたい場合はご活用ください。

- Spotify API

https://developer.spotify.com/documentation/web-api

- Postman

https://www.postman.com/

また、SpotifyとPostmanのアカウントが必要になる点に留意してください。

# やってみる
## APIアプリの作成
まずはSpotify for Developersのダッシュボードへログインします。

https://developer.spotify.com/dashboard

ログイン出来たら「CREATE AN APP」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/151942aa-eb5f-6e37-742f-434cd182a4de.png)

そしたら以下のようなフォームが出てくるので、内容を埋めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/d34a53b8-b67a-2a05-f662-b79856b5c6ee.png)

- `App name`: アプリ名です。なんでもよし。
- `App description`: アプリの説明。なんでもよい。
- `Website`: 空で大丈夫です。
- `Redirect URI`: 認証時にリダイレクトするURLです。とりあえず`https://localhost:8080/callback`にでもしておきます。
- `Which API/SDKs are you planning to use?`: 「APIを何に使うか」です。今回は「Web API」のみチェック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/b8d45b8e-957c-9531-f9f0-c9b809d382b6.png)


全体が入力出来たら「Save」をクリック。アプリの作成が完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/98b8dd2e-175a-9c49-62d5-3e986c11936f.png)

## IDとシークレットを取得
アプリには固有の`client_id`と`client_secret`があり、リクエストにこれを含めることでアプリを識別するようになっています。
これは後で使うので、メモしておきます。

アプリ画面を開き、「Settings」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/d53a9a97-352c-ce17-e612-876a389f33c8.png)

上部にある「Client ID」と「Client secret」をメモしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/c97efadc-03bc-7bb8-9f95-e02804847522.png)

「Client secret」は「View client secret」をクリックすると表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/5ce31b67-0a89-b161-0ffc-a639c5177b4b.png)

そしたらアプリ側での下準備は完了です。

## Postmanでリクエストを作る
次はPostmanを操作していきます。

Postmanにログインしたら、左上の「新規」ボタンからリクエストを新規作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/e0840e90-febe-e71e-5996-a0f6efe6a0e6.png)

今回は「今聞いている曲を取得」するので、
- HTTPリクエスト: `GET`
- URL: `https://api.spotify.com/v1/me/player/currently-playing`

を入力しておきます（[参考](https://developer.spotify.com/documentation/web-api/reference/get-the-users-currently-playing-track)）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/018bf4e6-2b47-f01b-f441-484f5d8f47ef.png)

そしたらリクエストの設定をしていきます。
「認証」タブをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/f4ac784d-85b4-71fd-e0c7-16dd2981c292.png)

Spotifyでは **OAuth 2.0**という認証フレームワークが使われています。なので、「タイプ」に`OAuth 2.0`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/6a0f1504-6d5c-8838-e4aa-2b75073831f3.png)

そしたら少し下にスクロールして、「新しいトークンの設定」というところから順に設定していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/feb8e30e-c921-aad6-4f8a-82bc902be4ec.png)

- `トークン名`: なんでもよい。
- `Grantタイプ`: `認可コード`にします。
- `コールバックURL`: 「ブラウザーで認可する」にチェック。あとは後述。
- `認可URL`: `https://accounts.spotify.com/authorize`を設定。
- `アクセストークンURL`: `https://accounts.spotify.com/api/token`を設定。
- `クライアントID`: さっきメモしたやつ。
- `クライアントシークレット`: これもさっきメモしたやつ。
- `Scope`: 「どのリソースにアクセスする権限が欲しいか」を書くところです。今回は`user-read-currently-playing`と記入。（[参考](https://developer.spotify.com/documentation/web-api/concepts/scopes)）

ここまで設定出来たらひとまずOK...といきたいところですが、コールバックURLの設定がまだですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/71c31df7-2058-8c46-cde9-7dc1add5d7c7.png)

これは「認証に成功した後にリダイレクトするためのURL」で、 **アプリ側で設定したコールバックURIと一致する**必要があります。
今回はPostmanのデフォルトで`https://oauth.pstmn.io/v1/callback`が設定されているので、これをSpotifyのアプリ側に設定します。

Spotifyのアプリ画面を開き、「Setting」から設定画面へ遷移。
ちょっと下に「Edit」ボタンがあるのでクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/8ed06a64-c496-f87f-0e91-1ad0caddcf03.png)

そしたら「Redirect URIs」の項目に`https://oauth.pstmn.io/v1/callback`を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/b346fc4b-030e-9a5b-b4bf-b2663852115d.png)

最後に、一番下の「Save」ボタンを押すのをお忘れなく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/dea82ac9-2e0d-b59c-f58c-a48572641d66.png)

ここまで設定出来たら、いよいよトークンを取得します。
一番下の「新しいアクセストークンの取得」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/8f19cb8d-c85d-bf53-7855-8ea34839d5f7.png)

初めての場合はSpotifyアカウントでの認証を求められる場合があるので、その場合はログインしてください。
問題なく認証出来たら、以下のような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/e7f0ba34-f1c2-de86-3bab-6c00bd2bc880.png)

「Proceed」もしくは5秒間待つと、取得したアクセストークンのを表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/017eb996-50c5-cfed-3c49-f024b79bd36a.png)

「Use Token」を押すことで、今回取得したトークンをリクエストのトークンとして設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/931a0f09-7cca-0997-f9d1-2b9d11b38a05.png)

## リクエストを送信してみる
最後に、リクエストを送信してみましょう。
上の「送信」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/5a590d76-2258-d56f-bd3c-3404920e53e2.png)

そしたら、json形式でなにやらいろいろと送られてきますね。
ひとまず`200 OK`という表示が出ていれば成功しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/0415a206-19ca-bb4e-ec74-1f75d670f68b.png)

送られてきたデータをよく見てみると、今聞いている曲のデータも含まれていますね。
（執筆時点で`Srav3R`氏の`Extra No.3`という曲を聴いていました）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/0f27c355-4d54-ac1b-bbdb-cecec2d2ab66.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/9e66c20a-a20b-b1aa-8b36-7c72a7db59e4.png)


## メモ：Spotify APIの認証について
Spotify APIでは、**OAuth 2.0**という認証フレームワークが採用されています。

https://developer.spotify.com/documentation/web-api/tutorials/code-flow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/27727345-52c5-b605-9304-4643f62c338d.png)

なんだか難しそうに感じますが、要するに

1. アプリがユーザーに認証を要求する
    このとき、アプリ側は「どのデータにアクセスするよ」ということを伝える（以後**スコープ**といいます）
2. ユーザーがOKを出す
3. Spotifyのサーバーから期限付きの **「リクエストトークン」** が渡される
3. 取得したリクエストトークンを使ってデータにアクセスできるようになる

という一連の流れで認証してるかんじです。

# おわりに
OAuth 2.0のようなちょっと凝った認証形式のAPIを触るのは初めてだったので、こういうのもあるんだな～と勉強になりました。
実装ではこの機能をバックエンドに組み込む必要があるので、その辺も追々まとめられたらと思います。