以前に作成した、アーティスト名を入力するだけでいい感じのSpotifyプレイリストを作成してくれるツールDJ-Kin29を改良しました！
是非、使ってみてください！！！
https://dj-kin29.herokuapp.com/
今回の改良にあたって、認可フローを見直しました。
前回の記事でまとめたので、よかったら参考にしてください。
SpotifyWebAPIの認可フローをまとめてみた
Githubも公開しまーす。
コントリビュート待ってます🍺
https://github.com/kin29/dj-kin29
Before
- プレーンなPHP
- Spotify認可のタイミングがフォームを入力後というおかしなタイミング
入力フォーム (index.php）
↓
↓ 作成 （旧：action先=create.php）
↓
（spotifyの認可画面）
redirect_uri: https://dj-kin29.herokuapp.com/create.php
→ 拒否されたら、 https://{redirect_uri}?error=access_denied
↓
↓ 許可されたら、
↓
プレイリスト作成成功
プレイリスト作成完了画面 （complete.php）
or
プレイリスト作成失敗
プレイリスト作成失敗画面 （failed.php）
↓
↓ more create / retry
↓
入力フォーム （index.php）に戻る
After
- Symfony4を使用
- Spotify認可のタイミングを、フォーム入力前にした。
1. / (クエリパラメータにcode=xxxを含まない)
- 「Authorization to Spotify」ボタンで、Spotifyとの連携(認可)をスタートする。（リンク先：/auth_spotify）
※ボタン押さずとも連携スタートさせたかったけど、spotify側の認可URLにリダイレクトさせてたらTwitterカードPreviewでエラーになったので、やめました😓
2. /auth_spotify
- Spotifyの認可がスタートする
- 認可を許可したことがある場合：リダイレクトURL (/code=xxx)に遷移する。
- 許可していない場合：Spotifyログイン画面 or 認可しますか画面に遷移する。
- 認可の許可をした場合：/code=xxxにリダイレクトする。
- 認可を拒否した場合：/error=xxx(エラーページ)にリダイレクトする。(→Re-Tryボタンで再チャレンジ可能)
3. /code=xxx
- フォーム画面。post先は、/create。
4. /create
- SpotifyWebAPIを使って、プレイリストを作成する。
- 作成成功した場合；完了画面
- 作成失敗した場合；失敗画面(→Re-Tryボタンで再チャレンジ可能)
- 「More create」ボタンでさらにプレイリスト作成可能（2に戻る）
さいごに
- Tweetボタン設置しました^^
- GAを充実させたくて、GTMと格闘しました。
- 引き続きherokuを使っているので、初動に時間がかかります、、、🙇♂️
- アーティスト名検索では、該当するアーティストの一番上だけを取得し、それに紐付く曲を取得するので、アーティスト名が被っていると期待したプレイリストができないことがあります、、、🙇♂️
(日本のガールズバンドHumpBackのつもりで入力したところ、まだサブサクは解禁してないようで、違うバンドの曲が入っていました。)