@kkbox/kkbox-js-sdk
Version:
KKBOX Open API developer SDK for JavaScript. Use it to easily access KKBOX open API to get various metadata about KKBOX's tracks, albums, artists, playlists and stations.
146 lines (130 loc) • 10.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl">
<title data-ice="title">Home | @kkbox/kkbox-js-sdk</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
<meta name="description" content="KKBOX Open API Developer SDK for JavaScript"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="@kkbox/kkbox-js-sdk"><meta property="twitter:description" content="KKBOX Open API Developer SDK for JavaScript"></head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
<a style="position:relative; top:3px;" href="https://github.com/KKBOX/OpenAPI-JavaScript"><img width="20px" src="./image/github.png"></a></header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#api">api</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/AlbumFetcher.js~AlbumFetcher.html">AlbumFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/Api.js~Api.html">Api</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/ArtistFetcher.js~ArtistFetcher.html">ArtistFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/ChartFetcher.js~ChartFetcher.html">ChartFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/FeaturedPlaylistCategoryFetcher.js~FeaturedPlaylistCategoryFetcher.html">FeaturedPlaylistCategoryFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/FeaturedPlaylistFetcher.js~FeaturedPlaylistFetcher.html">FeaturedPlaylistFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/Fetcher.js~Fetcher.html">Fetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/GenreStationFetcher.js~GenreStationFetcher.html">GenreStationFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/HttpClient.js~HttpClient.html">HttpClient</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/MoodStationFetcher.js~MoodStationFetcher.html">MoodStationFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/NewHitsPlaylistFetcher.js~NewHitsPlaylistFetcher.html">NewHitsPlaylistFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/NewReleaseCategoryFetcher.js~NewReleaseCategoryFetcher.html">NewReleaseCategoryFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/SearchFetcher.js~SearchFetcher.html">SearchFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/SharedPlaylistFetcher.js~SharedPlaylistFetcher.html">SharedPlaylistFetcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/api/TrackFetcher.js~TrackFetcher.html">TrackFetcher</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#auth">auth</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/auth/Auth.js~Auth.html">Auth</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/auth/ClientCredentialsFlow.js~ClientCredentialsFlow.html">ClientCredentialsFlow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/auth/TokenFetcher.js~TokenFetcher.html">TokenFetcher</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="kkbox-open-api-developer-sdk-for-javascript">KKBOX Open API Developer SDK for JavaScript</h1><p><a href="https://www.npmjs.com/package/@kkbox/kkbox-js-sdk"><img src="https://img.shields.io/npm/v/@kkbox/kkbox-js-sdk.svg" alt="npm (scoped)"></a>
<a href="https://travis-ci.org/KKBOX/OpenAPI-JavaScript"><img src="https://travis-ci.org/KKBOX/OpenAPI-JavaScript.svg?branch=master" alt="Build Status"></a>
<a href="https://raw.githubusercontent.com/KKBOX/OpenAPI-JavaScript/master/LICENSE.txt"><img src="https://img.shields.io/badge/license-Apache-green.svg?style=flat" alt="License Apache"></a></p>
<p>The SDK helps you to access various metadata from KKBOX, including tracks, albums, artists, playlists and stations.</p>
<h2 id="getting-started">Getting Started</h2><p>Install the SDK using npm</p>
<pre><code class="lang-bash"><code class="source-code prettyprint">$ npm install @kkbox/kkbox-js-sdk</code>
</code></pre>
<h2 id="usage-example">Usage example</h2><pre><code class="lang-js"><code class="source-code prettyprint">import { Auth, Api } from '@kkbox/kkbox-js-sdk';
// Create an auth object with client id and secret
const auth = new Auth(client_id, client_secret);
// Fetch your access token
auth.clientCredentialsFlow
.fetchAccessToken()
.then(response => {
const access_token = response.data.access_token;
// Create an API object with your access token
const api = new Api(access_token);
// Fetch content with various fetchers
api.searchFetcher
.setSearchCriteria('五月天 派對動物', 'track')
.fetchSearchResult()
.then(response => {
// Content from the KKBOX Open API
console.log(response.data);
// Continue to the next page
api.searchFetcher.fetchNextPage(response).then(response => {
console.log(response.data);
});
});
});</code>
</code></pre>
<h2 id="test">Test</h2><p>To test the SDK, a valid client ID and client secret are required.</p>
<p>Please visit <a href="https://developer.kkbox.com/">https://developer.kkbox.com/</a>, create a new developer account, and obtain the client ID and client secret of your app.</p>
<p>Then, create a file named <code>client_secrets.json</code>, put it into the <code>test</code> directory, and fill your client ID and client secret into it.</p>
<p>It may look like</p>
<pre><code class="lang-json"><code class="source-code prettyprint">{
"kkbox_sdk": {
"client_id": "YOUR CLIENT ID",
"client_secret": "YOUR CLIENT SECRET"
}
}</code>
</code></pre>
<p>Run the test:</p>
<pre><code class="lang-bash"><code class="source-code prettyprint">$ npm test</code>
</code></pre>
<h2 id="documentation">Documentation</h2><p>See <a href="https://kkbox.github.io/OpenAPI-JavaScript/">https://kkbox.github.io/OpenAPI-JavaScript/</a> for full documentation.</p>
<h2 id="use-the-sdk-in-web-browsers">Use the SDK in Web Browsers</h2><p>The SDK plays fine with Node.js, but works partially in web browsers.</p>
<p>You can use the SDK in your Web and <a href="https://electronjs.org">Electron</a> apps, but you need to prepare a middle man server to help you to obtain access tokens. That's because KKBOX's Open API server supports <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>, but the Auth server does not.</p>
<p>In other words, your JavaScript code hosted on your own website could access data from KKBOX, but direct access to the Auth server is forbidden by the security policy of modern web browsers.</p>
<p>When developing an Electron app, you can choose to turn web security off to make you app able to fetch access tokens. You can do this while creating browser windows.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">mainWindow = new BrowserWindow({
width: 500,
height: 500,
useContentSize: true,
webPreferences: {
webSecurity: false
}
});</code>
</code></pre>
<h2 id="license">License</h2><p>Copyright 2018 KKBOX Technologies Limited</p>
<p>Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at</p>
<pre><code><code class="source-code prettyprint">http://www.apache.org/licenses/LICENSE-2.0</code>
</code></pre><p>Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.</p>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>