Нежное введение в Spotify Developer API

Вы когда-нибудь хотели добавить интеграцию Spotify в свое приложение или веб-сайт? Добавить персонализированную музыку в любое приложение очень просто с помощью Spotify Developer API. Лично я экспериментировал с Spotify API с проектом IoT, над которым работал в свободное время.

Spotify API прост в использовании и может быть добавлен в любое приложение.

В этом посте я расскажу, как получить доступ к Spotify Developer API в браузере с помощью React. Цель состоит в том, чтобы стать отправной точкой для разработчиков внешнего интерфейса, которые хотят как можно быстрее настроить Spotify API. Вместе мы создадим веб-плеер Spotify, который будет отображать информацию о вашей воспроизводимой в данный момент музыке из Spotify. Мы также продемонстрируем, как:

  • Зарегистрируйте приложение в Spotify
  • Аутентифицировать пользователя и получить авторизацию для доступа к пользовательским данным
  • Получить данные из конечной точки веб-API

Вы можете найти весь исходный код здесь:



JoeKarlsson / react-spotify-player
Realtime Spotify Player, созданный с помощью React. Внесите свой вклад в разработку JoeKarlsson / react-spotify-player, создав… github.com



Примечание. Эта статья не является глубоким погружением в React и потребует знания основ JavaScript и React.

Настройте свой аккаунт

Чтобы использовать веб-API, начните с создания учетной записи пользователя Spotify (Premium или Free). Для этого просто зарегистрируйтесь на www.spotify.com.

Если у вас есть учетная запись пользователя, перейдите на страницу Панель управления на веб-сайте разработчика Spotify и, при необходимости, войдите в систему. Примите последние Условия использования для разработчиков, чтобы завершить настройку учетной записи.

Зарегистрируйте ваше приложение

Любое приложение может запрашивать данные с конечных точек Spotify Web API, и многие конечные точки открыты и будут возвращать данные без регистрации. Однако, если ваше приложение запрашивает доступ к личным данным пользователя (профилю, плейлистам и т. Д.), Оно должно быть зарегистрировано.

Вы можете зарегистрировать свое приложение еще до того, как его создали.

Перейдите на страницу Dashboard на веб-сайте Spotify Developer и нажмите My New App.

Заполните информацию для вашего нового приложения, используя форму в качестве руководства. Затем нажмите «Далее».

Нажмите «Изменить настройки», чтобы продолжить регистрацию приложения.

Самым важным является то, что вы должны указать URL-адрес перенаправления. Мы собираемся использовать URL-адрес по умолчанию из приложения Create React. Введите в это поле http: // localhost: 3000. Это URL-адрес, на который вы хотите быть перенаправлены после аутентификации пользователя через Spotify.

Нажмите «Сохранить» и обязательно запишите идентификатор клиента из вашего приложения. Поздравляю, вы только что зарегистрировали свое приложение, и теперь мы готовы перейти к коду.

Настройка кода

Мы собираемся быстро начать работу, запустив Create React App. Вы можете сделать это, выполнив следующие команды в своем терминале.

npx create-react-app react-spotify-player
cd react-spotify-player
npm start

Откройте проект в своем любимом текстовом редакторе, а затем давайте аутентифицируем наше приложение в Spotify, чтобы мы могли получить нужные данные. Существует множество способов аутентификации в Spotify, но мы собираемся использовать Неявную авторизацию.

Неявный поток предоставления предназначен для клиентов (таких как наш), которые полностью реализованы с использованием JavaScript и работают в браузере владельца ресурса. Неявный поток грантов осуществляется на стороне клиента и не включает секретные ключи. Выданные токены доступа недолговечны, и нет токенов обновления, которые можно было бы продлить по истечении срока их действия.

Нам нужно написать код, который выполняет пару действий:

  1. Мы перенаправим пользователя на /authorize конечную точку службы Accounts:

GET https://accounts.spotify.com/authorize

2. Пользователя просят разрешить доступ в пределах области действия. Служба учетных записей Spotify предоставляет подробную информацию об объемах, для которых запрашивается доступ.

  • Если пользователь не вошел в систему, ему будет предложено сделать это, используя свое имя пользователя и пароль Spotify.
  • Когда пользователь входит в систему, его просят разрешить доступ к наборам данных, определенным в областях.

3. Пользователь перенаправляется обратно на указанный вами URI. После того, как пользователь предоставляет (или запрещает) доступ, служба учетных записей Spotify перенаправляет пользователя на redirect_uri. В этом примере адрес перенаправления: https://example.com/callback

В App.js добавьте следующий код:

import React, { Component } from "react";
import hash from "./hash";
import logo from "./logo.svg";
import "./App.css";
export const authEndpoint = 'https://accounts.spotify.com/authorize';
// Replace with your app's client ID, redirect URI and desired scopes
const clientId = "YOUR_CLIENT_ID_GOES_HERE";
const redirectUri = "http://localhost:3000";
const scopes = [
  "user-read-currently-playing",
  "user-read-playback-state",
];
// Get the hash of the url
const hash = window.location.hash
  .substring(1)
  .split("&")
  .reduce(function(initial, item) {
    if (item) {
      var parts = item.split("=");
      initial[parts[0]] = decodeURIComponent(parts[1]);
    }
    return initial;
  }, {});
window.location.hash = "";
class App extends Component {
  componentDidMount() {
    // Set token
    let _token = hash.access_token;
    if (_token) {
      // Set token
      this.setState({
        token: _token
      });
    }
  }
render() {
  return (
    <div className="App">
      <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      {!this.state.token && (
        <a
          className="btn btn--loginApp-link"
          href={`${authEndpoint}client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`}
        >
          Login to Spotify
        </a>
      )}
      {this.state.token && (
        // Spotify Player Will Go Here In the Next Step
      )}
      </header>
    </div>
  );
  }
}
export default App;

Этот фрагмент кода создает кнопку «Войти с помощью Spotify», которая перенаправляет пользователя для аутентификации с помощью Spotify, мы можем получить токен Auth, который затем будем использовать для запроса к Spotify API.

Теперь давайте добавим функцию, которая будет вызывать Spotify API и возвращать данные. Вам нужно будет добавить дополнительную информацию.

import * as $ from "jquery";
import Player from "./Player";
class App extends Component {
  constructor() {
    super();
    this.state = {
      token: null,
    item: {
      album: {
        images: [{ url: "" }]
      },
      name: "",
      artists: [{ name: "" }],
      duration_ms:0,
    },
    is_playing: "Paused",
    progress_ms: 0
  };
  this.getCurrentlyPlaying = this.getCurrentlyPlaying.bind(this);
  }
  getCurrentlyPlaying(token) {
    // Make a call using the token
    $.ajax({
      url: "https://api.spotify.com/v1/me/player",
      type: "GET",
      beforeSend: (xhr) => {
        xhr.setRequestHeader("Authorization", "Bearer " + token);
      },
      success: (data) => {
        this.setState({
          item: data.item,
          is_playing: data.is_playing,
          progress_ms: data.progress_ms,
        });
      }
    });
  }
  ...
}

Затем, конечно, нам нужно сделать самого плеера. Сначала нам нужно создать новый компонент Player с именем Player.js.

import React from "react";
import "./Player.css";
const Player = props => {
  const backgroundStyles = {
    backgroundImage:`url(${props.item.album.images[0].url})`,
  };
  
  const progressBarStyles = {
    width: (props.progress_ms * 100 / props.item.duration_ms) + '%'
  };
  
  return (
    <div className="App">
      <div className="main-wrapper">
        <div className="now-playing__img">
          <img src={props.item.album.images[0].url} />
        </div>
        <div className="now-playing__side">
          <div className="now-playing__name">{props.item.name}</div>
          <div className="now-playing__artist">
            {props.item.artists[0].name}
          </div>
          <div className="now-playing__status">
            {props.is_playing ? "Playing" : "Paused"}
          </div>
          <div className="progress">
            <div
              className="progress__bar"
              style={progressBarStyles}
            />
          </div>
        </div>
        <div className="background" style={backgroundStyles} />{" "}
      </div>
    </div>
  );
}
export default Player;

Вот CSS для Player.css.

/** Now Playing **/
.now-playing__name {
  font-size: 1.5em;
  margin-bottom: 0.2em;
}
.now-playing__artist {
  margin-bottom: 1em;
}
.now-playing__status {
  margin-bottom: 1em;
}
.now-playing__img {
  float: left;
  margin-right: 10px;
  text-align: right;
  width: 45%;
}
.now-playing__img img {
  max-width: 80vmin;
  width: 100%;
}
.now-playing__side {
  margin-left: 5%;
  width: 45%;
}
/** Progress **/
.progress {
  border: 1px solid #eee;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.progress__bar {
  background-color: #eee;
  height: 4px;
}

Затем в вашем App.js вам нужно будет передать данные из Spotify в компонент Player.

class App extends Component {
...
  render() {
    return (
      ...
      {this.state.token && (
        <Player
          item={this.state.item}
          is_playing={this.state.is_playing}
          progress_ms={this.progress_ms}
        />
      )}
     </header>
   </div>
  );
 }
}

И это весь код, который вам понадобится. На этом шаге ваше приложение должно выглядеть и работать следующим образом.

Вот и все!

Если у вас есть вопросы или комментарии, не стесняйтесь обращаться к нам или открывать вопрос в репо.

Вы можете найти исходный код этого руководства здесь: https://github.com/JoeKarlsson/react-spotify-player

Меня зовут Джо Карлссон, я инженер-программист из замороженной тундры, известной как Миннеаполис, штат Миннесота. Я пишу код, создаю команды и выступаю с докладами. Вы можете подписаться на меня:



Learn React - Лучшие учебники по React (2019) | gitconnected
49 лучших руководств по React - изучите React бесплатно. Курсы отправляются разработчиками и голосуются за них, что позволяет вам… gitconnected.com