特别说明: JS SDK已从V1.0.0版本升级到V1.0.1版本。 请通过地址http://qzonestyle./qzone/openapi/qc_loader.js获取最新版本的JS SDK。 V1.0.1版本的JS SDK解决了旧版JS SDK与浏览器已知的兼容性问题。 为了让应用更快接入,腾讯提供了JS SDK。 JS SDK是现有最简单的接入QQ互联的方式。 JS SDK基于QQ互联OAuth2.0协议的client-side模式, 封装了登录流程与API列表中的所有OpenAPI调用方法。开发者不需了解协议,只需要前台交互,以及将相关的参数修改成自身对应的参数即可使用。 同时,QQ互联又提供了可供第三方高级需求进行自行配置的可选参数与相关函数,使开发者可以根据自身需求灵活使用。 本JS SDK不需要配置任何跨域文件,支持在绝大多数主流浏览器下使用;对于少数老版本的浏览器,需要浏览器支持flash插件来完成跨域通信的问题。
1. 实现QQ登录功能开发者只需要按以下四个步骤粘贴代码到网页,即可实现QQ登录功能,过程非常简单快速。现在就去体验。
1.1 引用JS SDK的JavaScript文件1. 首先需要申请接入QQ登录,并成功获取到appid和appkey。 2. 在html页面适当的位置引入JS脚本包(将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid;”REDIRECTURI”替换为申请接入QQ登录时输入的回调地址):
注意:回调地址必须以http或https开头。 1.2. 放置QQ登录按钮在html页面需要插入QQ登录按钮的位置,粘贴如下代码:
上述代码中放置了一个html元素节点,并给该节点指定全页面唯一的id,例如上面例子中的<span id=”qqLoginBtn”></span>。开发者也可将其改成自定义的元素id。 上述步骤正确执行后,页面粘贴上述代码处会出现如下按钮: 点击该按钮,即可发起登录请求。 若需要对登录按钮进行设置,请自定义登录按钮。将修改后的代码粘贴到页面中放置登录按钮处。 JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要再开发代码进行获取,直接调用QQ登录OpenAPI即可。 1.3. 回调地址页面该步骤的作用是回调地址将获取到的Access Token和OpenID返回给调用页面。 在回调地址页面,即1.1节中回调地址“REDIRECTURI”指定的页面,粘贴如下代码:
注意:如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。
1.4. 调用QQ登录OpenAPI(1)调用方式说明 QQ互联在JS SDK中封装了所有的OpenAPI接口,开发者只需要传递OpenAPI名称,以及OpenAPI需要的相关参数,就可以调用OpenAPI。 调用OpenAPI时,请统一遵循下述调用方式:
函数说明: 用JS SDK协助调用OpenAPI。 参数说明:
返回值说明: 每个OpenAPI调用时均指定了一个Request对象,开发者可根据OpenAPI请求完成情况指定不同的处理函数。 每次QC.api调用的异步响应都会返回一个Response对象,用于接收OpenAPI的返回值,包括返回格式、返回数据、OpenAPI请求错误码等。 (2)调用OpenAPI示例 OpenAPI的调用示例,请参见JS SDK的体验页面。
2. JS SDK的其他公开方法2.1. 直接打开QQ登录弹窗
参数说明: oOpts:需要指定appId,回调地址redirect_URI。 参数示例如下:
返回值说明: 返回浏览器弹窗对象。
注意:
2.2. 注销当前登录用户
2.3. 检测当前登录状态
返回值说明: true:说明登录成功。 false:说明登录失败。
2.4. 获取当前登录用户的Access Token以及OpenID
参数说明: 这里的参数为回调函数,通过回调函数获取openId和accessToken。 openId:用户身份的唯一标识。建议保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。 accessToken:表示当前用户在此网站/应用的登录状态与授权信息,建议保存在本地。 注意: getMe方法只能在用户登录授权后调用,建议总是在使用check方法并返回true的条件下,调用getMe方法。
3. 自定义登录按钮开发者可以根据自己的需要,自定义登录按钮,示例如下:
开发者也可以使用下列函数作为登录成功的回调接收函数: ① 登录成功的回调函数,登录成功后被调用:
参数说明: oInfo:当前登录用户的基本信息,即OpenAPI中get_user_info返回的数据。 参数示例如下:
oOpts:回传初始化参数,多个按钮时可用来区分来源,用来区分一个页面多个登录按钮的情况。 参数示例如下:
回调函数使用示例如下:
② 注销成功的回调函数,注销后被调用:
4. Request与Response内置对象说明4.1 RequestJS SDK在初始化时会根据浏览器环境创建不同的请求代理,QC.api的每次调用都是一个Request对象。
Request对象的公开方法如下: success(resp): 请求完成并且返回码为0的回调。 error(resp): 请求完成并且返回码不为0的回调。 complete(resp): 请求完成后的回调。
调用时序为success/error -> complete,每个方法都可以调用多次,每次调用返回Request本身,支持链式调用。 resp参数为回调函数,回调函数参数为Response对象。 4.2. ResponseResponse为Request对象绑定的回调函数的返回参数,每次QC.api调用的异步响应都会返回一个Response对象,该对象在Request对象的success/error -> complete调用流程中传递。
Response的公开方法如下: stringifyData:返回该Response对象包含的数据体的文本串。
Response的公开属性如下: status:响应状态,-1:代表未知;404:响应错误;200:响应成功。 fmt:响应数据格式,json/xml。 code/ret:响应返回码,0为成功,其他为失败。 data:响应数据实体,json对象/xml对象。 seq:响应序号,从1000开始编号。 |
|