在JavaScript SDK里使用SoundCloud API

澳门新葡亰3522平台游戏 7

本文由码农网 –
唐李川原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

什么是OAuth?

OAuth(Open
Authorization,开放授权)是为用户资源的授权定义了一个安全、开放及简单的标准,第三方无需知道用户的账号及密码,就可获取到用户的授权信息,OAuth的授权不会使第三方触及到用户的账号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAuth是安全的。

澳门新葡亰3522平台游戏 1

对于用户来说,使用第三方登录非常的方便快捷,省去了注册账户的繁琐步骤,间接的为网站提高用户量;

SoundCloud开发出了一款可被开发者使用的API,这款API能使开发者获得他们想要的几乎任何数据。但是该API的用法有些混乱,特别是对初学者来说,因为此时的SoundCloud
API开发文档和文档示例使用的都是SDK(软件开发工具箱)的不同版本。

接入QQ开放平台的前置条件

  • 一个QQ号
  • 一台公网通过域名可以访问到的web服务器(阿里云ECS)

SoundCloud介绍链接地址: 

申请AppID和AppKey

QQ互联点击进入QQ互联官网使用QQ登录进去,然后填写相关的个人资料完善信息,这里选择个人接入,上传手持身份证正面照,注意格式为png;
然后点击下一步进行邮箱验证,验证通过之后进入后台界面,等待企鹅公司审核,一般7个工作日内;
审核通过后,进入个人中心主界面创建应用,等待审核通过;

注意:
网站域名一定要填写万网可以正常访问的,并且你对网站的文件夹具有更改使用权限;
网站回调域填写跟域名一样的地址就可以例如:(http://game.gongshiyu.xin;http://game.gongshiyu.xin/callback.php)用;隔开添加一个回调域名在相应的域名下新建一个callback.php文件用于接收回调参数,提供方填写自己名字或其他别名都可以,网站备案号登录阿里云查看自己的网站备案号;

SoundCloud API和SoundCloud
SDK之间有什么区别呢?从根本上说,SoundCloud API是一个URL的集合,它给开发者提供了从SoundCloud服务器获取数据的权限,而SoundCloud
SDK是为查询SoundCloud
API提前写好的库(或者客户端)。如果想了解更多关于这方面的内容,点击以下链接:http://stackoverflow.com/questions/834763/difference-between-an-api-and-sdk

引入官方SDK

从开放平台文档中心下载SDK;官方的SDK只是一个示例,首先要弄懂官方的例子,然后根据个人的项目以及目录结构移入;

澳门新葡亰3522平台游戏 2

文件夹说明:

API:接入QQ登录的核心类以及配置文件,最终项目中使用到的也就这个文件;
doc:开发帮助文档;
example:接入QQ互联以后用API开发功能的一些示例;
install:帮助我们配置SDK参数的小工具,配置完之后这个文件夹就可以删除;

在这个教程里,我们将学到如何访问SoundCloud API和如何简化使用SoundCloud
SDK的过程。我们将从SoundCloud上学习如何设置SoundCloud
SDK,然后接着编写JavaScript代码来获取SoundCloud数据,播放音频和更多SoundCloud提供的功能。

SDK参数配置

将下载好的SDK放在服务器网站域名根目录然后通过官网域名去打开,记住域名没有指到Connect2.1文件夹里所以域名后面要跟上Connect2.1文件夹名,然后设置配置项;

澳门新葡亰3522平台游戏 3

其中appid和appkey填写应用里面分配的值,callback回调地址填写刚才分配的一个回调地址http://game.gongshiyu.xin/callback.php;

注意:
请求授权列表,按实际需求勾选,其中最常用的就是get_user_info获取用户的基本信息,用户名头像等等;如果勾选多了那么用户在授权登录的时候右侧会提示当前网站要获取你的那些资料,那么造成用户的担忧,我就登录一下你就要这么多我的个人信息,这是非常不安全的,那么用户可能就会放弃登录;

澳门新葡亰3522平台游戏 4

根据提示保留API目录下文件,删除intall目录下和其他文件,将API里的所有文件移出到Connect2.1目录下,然后删除空的API目录;

入门指南

Promises介绍链接地址: 

了解HTTP和API的概念和工作方式对你学习本教程将会有帮助。如果你想了解更多关于API的信息,我推荐你看看:An
Introduction to
APIs(对API的一个介绍。链接地址:)。同时知道一点关于异步JavaScript,promises和回调函数对你学习本教程也是有帮助的。在本文我们的代码示例中使用了jQuery,所以如果你了解jQuery的基本知识,那么你阅读本文的代码示例就不会那么痛苦。

为了使用JavaScript来开始查询SoundClound
API,我们需要下载由SoundClound提供的JavaScript
SDK。就像在文章开头提到的,这里共有两个不同的SDK版本可以使用。

SDK解读

官方文档资料,计算机编程语言有很多种,按照各个语言开发的程序运行机器的角色可以分为服务端语言和客户端语言,比如说PHP它就是运行在服务端的,那么PHP就是一个服务端语言,js如果运行在客户机的浏览器中,那么它就是客户端语言,目前Node.js越来越火爆,这个时候如果它在服务端运行,那么js就是一个服务端语言;
OAuth2.0协议支持各种语言,不管是客户端语言还是服务端语言都是可以支持的,这里的Server-side和Client-side就是告诉大家服务端语言和客户端语言分别是怎么接入开放平台的,那么我们主要了解Server-side开发文档;

使用哪个版本的SDK呢?

这两个版本的SDK的主要不同之处在于当一个异步请求产生并将请求发送给SoundClound
API时它们返回数据的方式不同。最新版本的SDK返回的是一个Promise,而另一个版本的SDK需要把一个回调函数作为一个参数返回。

我注意到一个问题,随着文档使用的SDK版本,在该版本的SDK用户登录功能界面上似乎有一个问题,这个问题就是弹出的登录窗口不会自动关闭。

因此,为了简单起见,并且因为老版本SDK更稳定,我们将在文章示例中使用老版本的SDK来贯穿本教程。此版本的SDK将需要为客户端的异步请求返回一个回调函数。

SDK核心类和重要方法

  • 登录授权相关的三个主要类
    Recorder.class.php:配置读写与session存取;
    URL.class.php:基于curl库的get与post请求;
    Oauth.class.php:核心授权类包括Oauth相关URL动态拼接与token操作;

使用SoundCloud API

设置一个基本的HTML文档

我们创建一个基本的HTML页面,该页面用作我们的主页。我们在这个页面上<script>标签的属性src里包含进了SDK的地址,这样我们就可以使用SDK的功能了。

<!DOCTYPE html>
<html>
  <head>
    <title>Include SDK - Using SoundCloud API</title>
    <script src="//connect.soundcloud.com/sdk.js"></script>
  </head>
  <body></body>
</html>

注意:我们在HTML页面里的<script>标签的src里包含进去的SDK地址是SoundCloud的服务器地址。你也可以把SDK下载下来,然后像下面这样引用:

<script src="sdk.js"></script>

可以通过下面的方法步骤测试一下SoundCloud的SDK是否在你的网页中被正确加载:

  • 用浏览器打开这个页面(建议使用谷歌的Chrome浏览器)。
  • 在浏览器里打开开发者控制台(在谷歌Chrome浏览器里打开开发者控制台的快捷键是Ctrl+Shift+J)。
  • 在开发者控制台里输入SC,然后按Enter键。SC就是刚刚我们在HTML页面里包含的SDK创建的一个JavaScript对象。

如果出现了未知的错误,那就说明SoundCloud的SDK没有被正确加载。试着刷新一下,同时确定你的SDK文件(也就是sdk.js文件)的路径是正确的。

请求访问QQ登录页面

在网站更目录创建一个qqlogin.php文件

<?php
require_once 'Connect2.1/qqConnectAPI.php';
//访问QQ的登录页面
$oauth = new Oauth();
$oauth->qq_login();

然后浏览器访问qqlogin.php文件,QQ第三方登录页面就会展现出来;
在核心类文件Oauth.class.php的qq_login方法里面打印一下这个数组

echo '<pre>';print_r($keysArr);exit;

可以看到这个数组当中拼装了我们这个应用的各项配置参数;
URL.class.php文件combineURL方法打印一下字符串

echo $keyStr;exit;

这个字符串就是把刚才的数组配置参数拼接成URL中携带的参数形式,最后再拼接成一个完整的QQ登录页面的地址,然后指挥PHP跳转到这个页面去;

注册一个SoundCloud App

去注册一个SoundCloud
app,你需要做的就是拥有一个SoundCloud账户。如果你还没有一个SoundClound账户,就去创建一个。通过注册一个app,SoundCloud服务器就能够验证我们的请求,这样其他人就不可能以我们的名义来发送一个请求了。

注意:如果我们不准备在我们自己的网站中使用SoundClound用户登录功能,我们可以跳过这一步。这将在下面的部分解释。

  • 打开SoundClound
    app页面。在这个页面上所有我们已经创建好的app都会被列出来。确保你登录了你的SoundCloud账户。注意:你不用为了这个目的创建一个独立的账户。你可以用同一个账户来为你的个人目的使用。
  • 点击注册一个新应用按钮。
    澳门新葡亰3522平台游戏 5
  • 给你的app起一个名字,然后点击复选框接受SoundCloud的开发者政策条款。
    澳门新葡亰3522平台游戏 6
  • 点击那个大大的”注册”按钮,来完成app的注册。

在我们成功注册之后,注册页面将直接跳转到我们刚刚创建好的app设置页面。在app设置页面上,我们将看到我们的app客户端ID,这个ID将会被用来验证授权我们的请求。我们可以关掉该页面,然后现在开始回调字段了。我们之后会用到这个客户端ID的。

获取code和accesstoken

当QQ登录完成后会返回一个code到指定的回调地址上,之前我们配置回调地址指定返回在项目根目录下的callback.php文件;
打开callback.php文件

<?php
require_once 'Connect2.1/qqConnectAPI.php';
//获取code
echo $_GET['code'];

澳门新葡亰3522平台游戏,登录授权完成,浏览器自动跳转到指定的回调地址,并且拿到了code,下面要使用code来拼装一个URL请求accesstoken;

<?php
require_once 'Connect2.1/qqConnectAPI.php';
//请求accesstoken
$oauth = new Oauth();
$accesstoken = $oauth->qq_callback();
echo $accesstoken;

如果页面提示:

澳门新葡亰3522平台游戏 7

说明code已经过期,重新登录获取一次就好;
最后打印在浏览器里的值就是accesstoken,同样的来看一下qq_callback()方法里都做了些神马,首先调试输出一下;

echo '<pre>';print_r($keysArr);exit;

这个数组中包含了APP_ID和APP_KEY,还有刚刚返回来的code,通过combineURL()方法拼装一个请求access_token的URL,最后返回一个accesstoken的值;