Spotify Web APIのApp作成とアクセストークンの取得 ― ReactでWebアプリ開発〈3〉

{
    "error": {
        "status": 401,
        "message": "No token provided"
    }
}

const client_id = process.env.CLIENT_ID;
const client_secret = process.env.CLIENT_SECRET;

// アクセストークンの取得（1）
async function getAccessToken() {
    const response = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Authorization': 'Basic ' + Buffer.from(client_id + ':' + client_secret).toString('base64'),
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            'grant_type': 'client_credentials'
        })
    });

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data.access_token;
}

// Spotify Web APIからデータ取得（2）
async function getSpotifyData() {
    try {
        const token = await getAccessToken();

        // Spotify Web APIへのリクエストを送る
        // (例：Syd Barrett [artist ID: 6Lt3HS8R2v8Q4G7ZkUWa8R] のアーティスト情報を取得)
        const response = await fetch('https://api.spotify.com/v1/artists/6Lt3HS8R2v8Q4G7ZkUWa8R', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

getSpotifyData();

node --env-file=.env client_credentials_flow.js

{
  external_urls: { spotify: 'https://open.spotify.com/artist/6Lt3HS8R2v8Q4G7ZkUWa8R' },
  followers: { href: null, total: 345500 },
  genres: [
    'art rock',
    'experimental',
    'outsider',
    'psychedelic folk',
    'psychedelic rock'
  ],
  href: 'https://api.spotify.com/v1/artists/6Lt3HS8R2v8Q4G7ZkUWa8R?locale=*',
  id: '6Lt3HS8R2v8Q4G7ZkUWa8R',
  images: [
    {
      url: 'https://i.scdn.co/image/f0cded2845369a436adb00b24c85d02b867d0f45',
      height: 300,
      width: 300
    },
    {
      url: 'https://i.scdn.co/image/9be66078df9f6c16d5f7bd09c08d0eb9b2b20cd6',
      height: 200,
      width: 200
    },
    {
      url: 'https://i.scdn.co/image/877b78cc2a8ff5c592d253deca15f9d912071e04',
      height: 64,
      width: 64
    }
  ],
  name: 'Syd Barrett',
  popularity: 38,
  type: 'artist',
  uri: 'spotify:artist:6Lt3HS8R2v8Q4G7ZkUWa8R'
}

const express = require('express');
const app = express();
const port = 3000;

// Spotify APIの設定
const client_id = process.env.CLIENT_ID; // SpotifyのクライアントID
const client_secret = process.env.CLIENT_SECRET; // Spotifyのクライアントシークレット
const redirect_uri = 'http://localhost:3000/callback'; // リダイレクトURI
const scope = 'user-library-modify'; // 必要なスコープ

// ログイン用URLを準備
app.get('/login', (req, res) => {
    const params = new URLSearchParams({
        response_type: 'code',
        client_id: client_id,
        scope: scope,
        redirect_uri: redirect_uri
    });
    // Spotifyの認可用エンドポイント（/authorize）へリクエストを送る (1)
    const authUrl = 'https://accounts.spotify.com/authorize?' + params.toString();
    res.redirect(authUrl);
});


// コールバックURLで認可コードを受け取り、アクセストークンを取得
app.get('/callback', async (req, res) => {
    // クエリ文字列内のcodeを取得
    const code = req.query.code;

    if (!code) {
        return res.status(400).send('No code provided');
    }

    try {
        // アクセストークンを取得 (2)
        const response = await fetch('https://accounts.spotify.com/api/token', {
            method: 'POST',
            headers: {
                'Authorization': 'Basic ' + Buffer.from(client_id + ':' + client_secret).toString('base64'),
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                grant_type: 'authorization_code',
                code: code,
                redirect_uri: redirect_uri
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const { access_token, refresh_token, expires_in } = data;

        // アクセストークンを使ってSpotify APIにリクエストを送る (3)
        // ここではアクセストークンを表示するだけ
        res.send(`Access Token: ${access_token}<br>Refresh Token: ${refresh_token}<br>Expires In: ${expires_in}`);

    } catch (error) {
        console.error('Error fetching access token:', error);
        res.status(500).send('Error fetching access token');
    }
});

// サーバーを起動
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

npm install express

node --env-file=.env authorization_code_flow.js

...

// Spotify APIの設定
const client_id = process.env.CLIENT_ID; // SpotifyのクライアントID
const client_secret = process.env.CLIENT_SECRET; // Spotifyのクライアントシークレット
const redirect_uri = 'http://localhost:3000/callback'; // リダイレクトURI
const scope = 'user-library-modify'; // 必要なスコープ
let access_token; // アクセストークン

// (中略)

app.get('/callback', async (req, res) => {
    ...

    try {

        // (中略)

        const data = await response.json();
        access_token = data.access_token;  // アクセストークンを保存

        res.send(`Access token successfully retrieved. access_token: ${access_token}`);
    } catch (error) {
        console.error('Error fetching access token:', error);
        res.status(500).send('Error fetching access token');
    }
});

app.get('/save-track', async (req, res) => {
    if (!access_token) {
        return res.status(400).send('No token provided')
    }

    try {
        // アクセストークンを使ってSpotify APIにリクエストを送る (3)
        // (例：「お気に入りの曲」に曲 [track ID: 6hnoeJAhNt0TLaX5yzPr2l] を1曲追加)
        const response = await fetch('https://api.spotify.com/v1/me/tracks?ids=6hnoeJAhNt0TLaX5yzPr2l', {
            method: 'PUT',
            headers: {
                'Authorization': 'Bearer ' + access_token
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        res.send('Track successfully saved');
    } catch (error) {
        console.error('Error:', error);
    }
});

// サーバーを起動
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});