Как стать автором
Обновить

Работа с last.fm API на JavaScript

JavaScript *
Из песочницы

С ходом времени автор понял, что ниженаписанное — полная глупость


Для тех, кому не хочется читать


Страничка, на которой всё нижепроделанное в примере (включайте alert).
Онлайн плеер, который и заставил меня дойти до этого топика.

Введение


Доброго времени суток! Не так давно затронул тему «Онлайн-плееров» и им подобных. Их много, очень я бы сказал. Я захотел сделать аналог, в первую очередь для себя. Захотел по стандарту — база vk.com, скробблинг last.fm (позже ласт), альбомы с него же, плейлисты, сердечки и так далее. Сразу вытекла проблема — мой хостинг очень плох для постоянных запросов на него. Ничего не оставалось, как перейти почти полностью на javascript (позже js). Итак, коль русского описания «Как работать с last.fm api javascript» я так и не нашёл, а потратил много нервов и времени на решение этой проблемы, то начнём, пожалуй.

Разберём работу last.fm api на примере скробблинга. Коснемся сессий, авторизации и вызова функций с помощью javascript. Да, и будем разбирать это на понятном всем языке, чтобы и стар и млад поняли.

Ход работы


1. Если нет аккаунта для last.fm api, то бегом делать. Если аккаунт есть и ключи к нему при себе — читаем дальше.

2. С самого ласта есть ссылка на js-библиотеку [github.com] для работы с API на javascript. Довольно неплоха, аналогов не нагуглил, работать работает, так что будем пользоваться. Итак, назовём эту библиотеку «стандартной», а все скрипты в ней — естественно «стандартными».

3. Первое, что нам нужно сделать, это заменить стандартный md-хэш… тор?! Назовём его md5-шифратор. Дак вот, стандартный md5-шифратор с кириллицей почему-то не работает (вернее работает, но ласт бунтует и не принимает хэш). Проверенный вариант можно найти здесь [pajhome.org.uk]. Качаем zip в разделе Download (на момент написания Current version 2.2), находим в нём md5-min.js и заменяем им стандартный lastfm.api.md5.js.

4. В стандартном lastfm.api.js изменяем 841 строку с return md5(string); на return hex_md5(string);. Новый шифратор потому что.

5. Отлично, хеширование есть и будет работать. Начинаем подключать скрипт.
<script type="text/javascript" src="md5-min.js"></script>
<script type="text/javascript" src="lastfm.api.js"></script>

Я поменял стандартный lastfm.api.md5.js на md5-min.js, а не просто изменил содержание стандартного, обратите внимание. И порядок соблюсти не забудьте.

6. Авторизируем наш сайт на ласте простым javascript кодом
var lastfm = new LastFM({
	apiKey    : '96d047d302a8707f3a7410873466dbfd',
	apiSecret : '3afdcf3ccad058a82202544549cb141b'
});

Да, главный минус работы с javascript и ласт.фм — открыты ключи. apiKey — API Key на ласте, apiSecret — secret. Этот код после подключения скриптов, не забываем.

7. Далее в стандартном lastfm.api.js снова есть маленький недочет для скробблинга. Находим 659-674 строки (я лишние строки, табуляции и комментарии сократил)
scrobble : function(params, callbacks){
	if(params.constructor.toString().indexOf("Array") != -1){
		var p = {};
		for(i in params){
			for(j in params[i]){
				p[j + '[' + i + ']'] = params[i][j];
			}
		}
		params = p;
	}
	signedCall('track.scrobble', params, session, callbacks, 'POST');
}


На входе нет session, а на выходе есть. Странно, но про session более нигде ни слова. Переписываем первую строку.
scrobble: function(params, callbacks){ => scrobble: function(params, session, callbacks){

8. Помним, что наша главная цель — скробблинг. Тут пути расходятся. Предположим, что у вас нет ключа сессии — тогда читаем дальше, коротко расскажу как получить. Если ключ сессии есть — идём к пункту 11. Хотя почитать можете.

9. Получение ключа сессии состоит из двух этапов. Первый — получение временного токена. Как показывает практика, он может смело быть ключем сессии, но лишь на 60 минут. Второй этап — естественно сам процесс получения ключа сессии.

10. Получить токен можно по адресу
http://www.lastfm.ru/api/auth?api_key=96d047d302a8707f3a7410873466dbfd

Где после знака "=" следует API key с ласта. Можно, допустим, сделать простую ссылку, по нажатию на которую юзер будет уходить на эту страницу. В аккаунте API ласта есть поле Callback URL. На адрес, указанный в этом поле, юзер уходит после авторизации и к адресу приписывается ?token=XXXXX. Далее есть два варианта реализации:

Первый вариант

Серверный. Callback URL ведет на страницу, где присутствует серверный скрипт обработки. Т.е. подключена какая-то библиотека для работы с ластом, обрабатывающая полученный из адреса токен и приписывающая уже полученный ключ сессии к какому-нибудь пользователю в базе данных например. А затем мы загружаем этот ключ из базы и пользуемся. Мне так проще, я так и сделал, но моя цель — не рассказать подробно об этом способе.

Второй вариант

Клиентский. Вытаскиваем токен из адреса путем js, затаскиваем условно в переменную token. Есть у нас токен — обращаемся первый раз в жизни к api ласта:
lastfm.auth.getSession({token: token}, {success: function(data){
	alert("Привет, "+data.session.name+"!\n\rРад тебя видеть, твою ключ сессии "+data.session.key); // Для видимости
	sk = data.session.key; // В раннее созданную переменную записываем ключ сессии. 
}, error: function(code, message){
	if (code == 4)
		alert("Токен умер. Щелкни снова авторизацию");
}});

Вот так выглядит вызов получения ключа сессии. Ответ в формате json. Тут нужно учесть нюанс: если нам ключ сессии необходим на один раз, то ничего стороннего нам не понадобится. Если хотим общаться долго с ластом, то глупо каждый вход на сайт просить юзера переподключится. В таком случае нам нужно использовать либо cookies, либо базу данных, как душе станет угодно.
auth.getSession заменяется на любой другой метод из всех методов ласта, а под первые фигурные скобки заносим все переменные, которые необходимо передать. Ну что же, давайте смело изменим на track.scroble

11. Скробблим. Необходимые параметры (как того просит ласт) это название трека, исполнитель и UNIX-time
var ts = Math.floor(new Date().getTime()/1000); 
lastfm.track.scrobble({artist: "Linkin Park", track: "Numb", timestamp: ts}, {key: sk}, {success: function(data){
	alert("Всё получилось!");
}, error: function(code, message){
	alert("Ничего не получилось...");
}});

{key: sk} это и есть ключ сессии. Это и есть та мистическая session.

12. Очень важное замечание: если вдруг в одну секунду проскочет два запроса на ласт — будет беда. 93 строка стандартного last.fm api: var jsonp = 'jsonp' + new Date().getTime(); =>
var jsonp = 'jsonp' + new Date().getTime() + '' + Math.round(1000000 * Math.random());

Заключение


Вот вроде бы и всё. Что ещё нужно сказать: на выходе постоянно разные объекты, то data.result то data.artistmatches, так что обращайте внимание. Приятной работы!

Ссылки


Страничка, на которой всё вышепроделанное в примере (включайте alert).
Онлайн-плеер, который и заставил меня дойти до этого топика.

Оффтоп: плеер собираюсь поддерживать пока глаза смотрят в монитор, но: топик не про плеер, плеер в разработке, вдруг кому интересна тема топика и он бы хотел разобраться, так что не стоит ругаться, пожалуйста. Для этого будет отдельный топик. Позже.
Теги:
Хабы:
Всего голосов 33: ↑31 и ↓2 +29
Просмотры 7.2K
Комментарии Комментарии 23