1、引入jssdk
config, XMLY, XMplayer 喜马拉雅sdk封装好的
<script src="https://s1.xmcdn.com/yx/web-jssdk/last/dist_cdn/1.3.4/xmsdk.min.js"></script>
2、初始化（授权登录、免登陆）
config({
app_key: '2e*****1', // 必传，官方提供的 app_key：b617866c20482d133d5de66fceb37da3 仅供测试，有调用次数限制。
//get_access_token: getAccessToken, // 标准登录授权，必须传 get_access_token 参数，值为 js 函数，和 sig_url 互斥
device_id: XMLY.getDeviceId(),
sig_url: 'http******/xmly/jssdk.php', // 免登录授权，必须传 sig_url，和 get_access_token 互斥
timeout: 10 * 1000,
debug: true,
})
that.xmly = new XMLY()
// 获取访问令牌 access_token，函数的返回值为字符串（即：access_token 的值）
function getAccessToken() {
// 书写授权逻辑
// 确保返回有效的 access_token 值
return 'b7a259c1864cc659ddfdd07910dc75a8' // return 返回有效的 access_token 值
}
免登陆 jssdk.php 获取前端数据进行数据加密回传，喜马拉雅sdk自行获取。
<?php
/**
* author : zhw
* 2020-03-03
* 喜马拉雅jssdk认证接口
*/
header('Content-Type:application/json; charset=utf-8');
header('Access-Control-Allow-Origin:*');
define("CLIENT_ID", "2e********751");
define("CLIENT_SECRET", "a5b******51");
define("CLIENT_STATIC_KEY", "g***7P");
$params = $_POST['params'];
$nonce = isset($_POST['nonce']) ? $_POST['nonce'] : "";
$device_id = isset($_POST['device_id']) ? $_POST['device_id'] : "";
$params_arr = json_decode($params, true);
$sig = createSig($params_arr);
$d = array(
'code' => 1,
'message' => "success",
'signature' => $sig
);
echo json_encode($d);
/**
* sig 生成
*/
function createSig($data)
{
ksort($data);
$parme = "";
foreach ($data as $k => $v) {
$parme .= "$k=$v&";
}
$parme = trim($parme, '&');
$str = base64_encode($parme);
$hashKey = CLIENT_SECRET;
$sigStr = md5(hash_hmac('sha1', $str, $hashKey, true));
return $sigStr;
}
标准登录 用户需要调用喜马拉雅登录页面二次跳转 回传地址oauth.php 获取token
<?php
/**
* author : zhouhongwei
* 2020-03-03
* 喜马拉雅认证接口
*/
header('Content-Type:application/json; charset=utf-8');
define("CLIENT_ID", "2e***51");
define("CLIENT_SECRET", "a5***1");
define("CLIENT_STATIC_KEY", "gu**P");
$backurl = $_GET['state'];
$code = isset($_GET['code']) ? $_GET['code'] : "";
$device_id = isset($_GET['device_id']) ? $_GET['device_id'] : "";
if (!$code || !$device_id) {
die("参数错误，请联系管理员");
}
$data = array(
'client_id' => CLIENT_ID,
'client_secret' => CLIENT_SECRET,
'device_id' => $device_id,
'grant_type' => 'authorization_code',
'code' => $code,
'redirect_uri' => 'http://w***y/oauth.php'
);
$xmly_url = 'https://api.ximalaya.com/oauth2/v2/access_token';
$res = curl($xmly_url, $data);
var_dump($res);
/**
* curl 方法
* @param String $url
* @param Array $data
* @return $tmpInfo
*/
function curl($url, $data = null)
{
$ch = curl_init();
$header = array("Content-Type:application/x-www-form-urlencoded");
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_AUTOREFERER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$tmpInfo = curl_exec($ch);
if (curl_errno($ch)) {
return curl_error($ch);
}
curl_close($ch);
return $tmpInfo;
}
/**
* createUrl 生成请求连接
* @param String $url
* @param Array $data
* @return $tmpInfo
*/
function createUrl($o_url, $data)
{
$url = "https://api.ximalaya.com{$o_url}?";
$rand_only = time() . rand(1, 9999);
$data['app_key'] = CLIENT_ID;
$data['client_os_type'] = 4; //客户端系统类型，固定值
$data['nonce'] = (string) $rand_only; //设备唯一码
$data['timestamp'] = getMillisecond(); //毫秒级别时间戳
$data['server_api_version'] = '1.0.0'; //服务器端API版本号
//生成sign
ksort($data);
$parme = "";
foreach ($data as $k => $v) {
$parme .= "$k=$v&";
}
$parme = trim($parme, '&');
$str = base64_encode($parme);
$hashKey = CLIENT_SECRET . CLIENT_STATIC_KEY;
$sigStr = "&sig=" . md5(hash_hmac('sha1', $str, $hashKey, true));
$url .= $parme . $sigStr;
return $url; //生成的url的timestamp 标签被html页面转译了 如果是用浏览器测试 记得修改一下这个标签
}
/**
* 时间戳 - 精确到毫秒
* @return float
*/
function getMillisecond()
{
list($t1, $t2) = explode(' ', microtime());
return (float) sprintf('%.0f', (floatval($t1) + floatval($t2)) * 1000);
}
3、调接口
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="jquery_172.js" language="javascript"></script>
<script src="https://s1.xmcdn.com/yx/web-jssdk/last/dist_cdn/1.3.4/xmsdk.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<title>喜马拉雅JSSDK接入</title>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<div>
<h4>分类列表</h4>
<div style="width: 160px; float: left;" v-for="item in categoriesArr">
{{item.id}}:{{item.category_name}}
<img style="width: 20px;" :src="item.cover_url_small" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
const xmly_did = "XIMALAYA_DEVICEID"
const { config, XMLY, XMplayer } = window.xmsdk
var main = new Vue({
el: '#main',
data: {
user_id: Number,
categoriesArr: Object
},
created() {
var that = this;
// // 在尽可能早的时机执行 config
config({
app_key: '2e8******b751', // 必传，官方提供的 app_key：b617866c20482d133d5de66fceb37da3 仅供测试，有调用次数限制。
//get_access_token: getAccessToken, // 标准登录授权，必须传 get_access_token 参数，值为 js 函数，和 sig_url 互斥
device_id: XMLY.getDeviceId(),
sig_url: 'http://****/jssdk.php', // 免登录授权，必须传 sig_url，和 get_access_token 互斥
timeout: 10 * 1000,
debug: true,
})
that.xmly = new XMLY()
},
beforeMount() {
var that = this
that.getCategoriesList()
},
methods: {
getCategoriesList() {
var that = this
// 创建实例
const url = 'https://api.ximalaya.com/categories/list'
// 获取分类列表
that.xmly.get(url).then(res => {
if (res.code === 0) {
// 成功逻辑（仅成功时 code 为 0）
console.log(res)
that.categoriesArr = res.data
}
// code 可能的值有：0、-1、-2、-3、-4
}).catch(error => {
// 为了更易用，SDK内部对请求的错误进行了捕获、分类，然后走的是 resolve
// 所以，开发者调用 API 时基本不需要 catch
console.log(error)
}).finally(() => {
// 其它
})
}
}
})
//保存deviceId
var deviceId = getCookie(xmly_did)
if (!deviceId) {
const deviceId = XMLY.getDeviceId()
setCookie(xmly_did, deviceId, 365)
console.log(deviceId)
}
// // 创建播放器实例
const player = new XMplayer({
playlist: [182847535, 197491263, 183339305, 195901119] // 必传参数
})
player.play()
//获取url参数
function get_query_string(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
if (r != null) return decodeURI(r[2]);
return null;
}
//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
}
//清除cookie
function clearCookie(cname) {
this.setCookie(cname, "", -1);
}
</script>
</html>
网友评论