--- title: Spotify API の簡単な使い方-ログイン機能- tags: Ruby Rails JavaScript author: natan2019 slide: false --- #RailsとJsでSpotifyAPIをたたいてみる ###環境・前提条件 ruby 2.6.2 rails 5.2.4 ###この記事に書いてあること - ユーザーを認証し、ユーザーデータにアクセスするための承認を取得する - Web APIエンドポイントからデータを取得する。 下記のURLはSpotifyAPIの公式ドキュメントです。公式ドキュメントとやっていることは同じですが、この記事ではわかりやすく進行していきます。 ###参考URL 公式ドキュメント https://developer.spotify.com/documentation/web-api/quick-start/ 公式github https://github.com/spotify/web-api-auth-examples ###この記事でできること アプリのログイン→Spotifyログイン ![giitaよう.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/c0b8dac5-5300-7ac8-d1f9-5b74b11aeb89.gif) ###対象者 - Spotify APIをたたきたいけど、どうやってたたけばいいか分からないAPI初心者 - ドキュメント読むの難しいと感じている方 - Spotify会員 - deviseを使ってログイン機能が作成できる方 ###今回取得するトークンについて❶ 例えばWEB PLAYBACK SDKを使いたいと思ったとき、 下記のソースコードをコピペすればプレイヤーを使用できます。音も鳴るよ♬ ただ参考URLで取得したトークンだと1時間で切れてしまうので`参考URLで取得したAccessToken`のところを1時間に一回手動で書き換えなくてはいけません。そんなの無理ー(⌒-⌒; )って感じですよね! そこで登場するのが今回取得するトークンなんです。 ```html:index.html.erb Spotify Web Playback SDK Quick Start Tutorial

Spotify Web Playback SDK Quick Start Tutorial

Open your console log: View > Developer > JavaScript Console

``` ###今回取得するトークンについて❷ Spotifyが用意しているトークンの種類は3種類あります。 下記公式ドキュメントですので、目を通してみて下さい。 https://developer.spotify.com/documentation/general/guides/authorization-guide/ 今回取得するものは上記のURLの一番下のものです。 Client Credentials Flowは時間が経つと切れてしましますが、手動でコードを直さなくてもいいような仕様となります。3種類の中でも一番簡単でお手軽ですね♬ ###手順❶ Spotify API公式ドキュメントのDASHBOADからアプリを作成し、 ClientID,SecretIDを取得しましょう。 ![スクリーンショット 2019-12-06 13.22.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/31916155-78fd-da40-3f58-5e6e78c469f0.png) ![スクリーンショット 2019-12-06 13.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/ed270844-5bb5-cf0d-fbcf-533730f161b3.png) アプリを作成したらClientID,SecretIDを確認しましょう。 次に、ページ右にあるEDIT SETTINGからRedirect URIsを登録しよう。 ![スクリーンショット 2019-12-06 13.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/3924a802-b631-e3c1-40a7-c37e80a0cc3a.png) ![スクリーンショット 2019-12-06 13.34.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/008ab0e2-5727-e5f3-6828-ecce55c10782.png) ###手順❷ deviseを使ってログイン画面を作る。 おなじみdevise先生です♬ ```ruby:Gemfile gem 'devise' ``` `$ bundle install` `$ rails g devise:install` `$ rails g devise User` `$ rails db:migrate` ![スクリーンショット 2019-12-05 12.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/9607bdb5-f77c-4f09-a168-cf4aedd32ccf.png) ```erb:application.html.erb Authorization <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= include_gon %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <% if user_signed_in? %> <% else %> <% end %> <%= yield %> ``` ```ruby:application_controller.rb class ApplicationController < ActionController::Base def after_sign_in_path_for(resource) if user_signed_in? spotify_login_path end end def after_sign_out_path_for(resource) new_user_session_path end end ``` ###手順❸ APIキーを管理しましょう。 ```ruby:Gemfile gem 'gon' gem 'dotenv-rails' ``` *補足:gonはrailsのコントローラーで指定した変数をJsに持っていける便利gemです♬     dotenv-railsは.envファイルを管理するgemです♬ `$ bundle install` `$ rails g controller users` ```ruby:users_controller.rb class UsersController < ApplicationController def spotify_login gon.client_id = ENV['SPOTIFY_CLIENT_ID']; gon.redirect_uri = ENV["SPOTIFY_REDIRECT_URI"]; end end ``` APIキーは環境変数にして、 .envファイルを作成し、その中に入れましょう。 ```ruby:.env SPOTIFY_CLIENT_ID=your client ID SPOTIFY_SECRET_ID=your secret ID SPOTIFY_REDIRECT_URI=http://localhost:3000/tests/ ``` ```erb:spotify_login.html.erb Example of the Implicit Grant flow with Spotify


This is Spotify Authentication

``` ###手順❹ ログイン後のviewを作成しましょう。 `$ rails g conrtoller tests` ```ruby:tests_controller.rb class TestsController < ApplicationController def index end end ``` ```erb:index.html.erb ログインできました。 お疲れ様でした! ``` ```ruby:routes.rb Rails.application.routes.draw do devise_for :users # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html get 'users/spotify_login', to: 'users#spotify_login', as: 'spotify_login' resources :tests, only: [:index] end ``` ###手順❺ ####完成! ログインしてみましょう。 access_tokenは遷移先(今回でいうとtests_path)のURLに表示されています。 URLのxxxのところがaccess_tokenです。 expires_in=3600は、トークンの期限を表示しています。3600秒=1時間です。1時間でaccess_tokenが切れるのでユーザーは1時間ごとにログインをし直しましょう♬ http://localhost:3000/tests/#access_token=xxx&token_type=Bearer&expires_in=3600&state=caGLGQ8xzz1yYbH7 ###Github 全コードは下記のgithubを参照ください♬ `https://github.com/natan777natan/authorization`