一:JS_SDK使用说明
为了让应用更快接入,腾讯提供了JS SDK。 JS SDK是现有最简单的接入QQ互联的方式。JS SDK基于QQ互联OAuth2.0协议的client-side模式, 封装了登录流程与API列表中的所有OpenAPI调用方法。开发者不需了解协议,只需要前台交互,以及将相关的参数修改成自身对应的参数即可使用。 同时,QQ互联又提供了可供第三方高级需求进行自行配置的可选参数与相关函数,使开发者可以根据自身需求灵活使用。
JS SDK不需要配置任何跨域文件,支持在绝大多数主流浏览器下使用;对于少数老版本的浏览器,需要浏览器支持flash插件来完成跨域通信的问题。
二:引用JS SDK的JavaScript文件
1. 首先需要申请接入QQ登录,并成功获取到appid和appkey。
2. 在html页面适当的位置引入JS脚本包(将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid;"REDIRECTURI"替换为申请接入QQ登录时输入的回调地址):
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
注意:1.回调地址必须以http或https开头 2.此处的回调地址必须与申请的qq互联上登记的回调URL一致
三:放置QQ登录按钮
在html页面需要插入QQ登录按钮的位置,粘贴如下代码:
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
</script>
点击该按钮,即可发起登录请求。
若需要对登录按钮进行设置,请自定义登录按钮。将修改后的代码粘贴到页面中放置登录按钮处。
JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要再开发代码进行获取,直接调用QQ登录OpenAPI即可。
四:回调地址页面
准备一个空html页面作为JS SDK的回调地址页,在回调地址页面插入如下示例代码:
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
备注:此处的回调地址必须与申请的qq互联上登记的回调URL一致
五:调用QQ登录OpenAPI
(1)调用方式说明
QQ互联在JS SDK中封装了所有的OpenAPI接口,开发者只需要传递OpenAPI名称,以及OpenAPI需要的相关参数,就可以调用OpenAPI。
调用OpenAPI时,请统一遵循下述调用方式:
QC.api(api, paras, fmt, method)
函数说明:
用JS SDK协助调用OpenAPI。
(2)调用OpenAPI示例
OpenAPI的调用示例,请参见JS SDK的体验页面。