JS_SDK实现网站应用QQ登录功能-QQ互联（小白易懂）

为了让应用更快接入，腾讯提供了JS SDK，PHP SDK v2.2。
JS SDK是现有最简单的接入QQ互联的方式。
JS SDK基于QQ互联OAuth2.0协议的client-side模式，封装了登录流程与API列表中的所有OpenAPI调用方法。开发者不需了解协议，只需要前台交互，以及将相关的参数修改成自身对应的参数即可使用。同时，QQ互联又提供了可供第三方高级需求进行自行配置的可选参数与相关函数，使开发者可以根据自身需求灵活使用。
本JS SDK不需要配置任何跨域文件，支持在绝大多数主流浏览器下使用；对于少数老版本的浏览器，需要浏览器支持flash插件来完成跨域通信的问题。

实现QQ登录功能
在这里给开发者只需要将以下代码新建一个网页，即可实现QQ登录功能，过程非常简单快速。
官方项目地址：JS_SDK

1.1 引用JS SDK的JavaScript文件

首先需要申请接入QQ登录，并成功获取到appid和appkey。
在html页面适当的位置引入JS脚本包（将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid；"REDIRECTURI"替换为申请接入QQ登录时输入的回调地址）：

<script type="text/javascript"  charset="utf-8"src="http://connect.qq.com/qc_jssdk.js"data-appid="APPID"data-redirecturi="REDIRECTURI"
></script>

注意：回调地址必须以http或https开头。

1.2. 放置QQ登录按钮
在html页面需要插入QQ登录按钮的位置，粘贴如下代码：

<span id="qqLoginBtn"></span>
<script type="text/javascript">QC.Login({btnId:"qqLoginBtn"  //插入按钮的节点id
});
</script>

上述代码中放置了一个html元素节点，并给该节点指定全页面唯一的id，例如上面例子中的。开发者也可将其改成自定义的元素id。
上述步骤正确执行后，页面粘贴上述代码处会出现如下按钮：
Connect_logo_7.png
点击该按钮，即可发起登录请求。
若需要对登录按钮进行设置，请自定义登录按钮。将修改后的代码粘贴到页面中放置登录按钮处。
JS SDK封装了获取Access Token以及OpenID的方法，因此开发者不需要再开发代码进行获取，直接调用QQ登录OpenAPI即可。

使用QC.Login(options, loginFun, logoutFun, outCallBackFun)进行初始化
options参数说明：
参数名参数值描述
btnId String 可选插入按钮元素的Id
scope String 可选，默认all 用户需要确认的scope授权项
size String 可选，默认B_S 按钮尺寸 [A_XL, A_L, A_M, A_S, B_M, B_S, C_S]
1.3. 回调地址页面
该步骤的作用是回调地址将获取到的Access Token和OpenID返回给调用页面。
在回调地址页面，即1.1节中回调地址“REDIRECTURI”指定的页面，粘贴如下代码：

<script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>

注意：如果回调地址页与加入QQ登录按钮是同一个页面，则只需要引用一次脚本文件。

1.4. 调用QQ登录OpenAPI
（1）调用方式说明
QQ互联在JS SDK中封装了所有的OpenAPI接口，开发者只需要传递OpenAPI名称，以及OpenAPI需要的相关参数，就可以调用OpenAPI。
调用OpenAPI时，请统一遵循下述调用方式：

QC.api(api, paras, fmt, method)
函数说明：
用JS SDK协助调用OpenAPI。
参数说明：

参数名称是否必须描述
api 必须指定要调用的OpenAPI名称。例如：调用add_t时，OpenAPI名称为“add_t”。

各OpenAPI的名称具体请参见API列表。
paras 必须指定要调用的OpenAPI对应的参数。各参数使用JSON的键值对格式列出。

OpenAPI对应的参数具体请参见API列表中各OpenAPI的参数说明。

注意：此处参数不需要自行传递access_token与openid
fmt 可选指定OpenAPI的返回格式，可用值为“json”或“xml”。默认为“json”。

注意：json、xml为小写，否则将不识别。
method 可选指定OpenAPI调用请求的发起方式，可用值为“GET”或“POST”。根据配置，默认发送数据为“POST”，获取数据为“GET”。
返回值说明：
每个OpenAPI调用时均指定了一个Request对象，开发者可根据OpenAPI请求完成情况指定不同的处理函数。
每次QC.api调用的异步响应都会返回一个Response对象，用于接收OpenAPI的返回值，包括返回格式、返回数据、OpenAPI请求错误码等。

JS SDK的其他公开方法
方法名参数返回描述
QC.Login.signOut 无无登出
QC.Login.check 无 Boolean 检查是否已经登录
QC.Login.getMe Function 无回调函数 function(openId, accessToken) openId：用户身份的唯一标识。建议保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权。 accessToken：表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。注意： getMe方法只能在用户登录授权后调用，建议总是在使用check方法并返回true的条件下，调用getMe方法
QC.Login.showPopup Object 无直接打开窗口，参数 { appId:"", redirectURI:"" }
2.1. 直接打开QQ登录弹窗
QC.Login.showPopup(oOpts)
参数说明：
oOpts：需要指定appId，回调地址redirect_URI。
参数示例如下：

oOpts：{appId:"222222",redirectURI:"http://yousite.com/qc_back.html"
}

返回值说明：
返回浏览器弹窗对象。
函数使用示例：

QC.Login.showPopup({appId:"222222",redirectURI:"http://yousite.com/qc_back.html"
});

注意：

oOpts参数不需必传，不传此参数时，登录成功后会跳回登录按钮所在页面。
如果已使用QC.Login方法，则不需再使用此方法。
2.2. 注销当前登录用户
QC.Login.signOut()
2.3. 检测当前登录状态
QC.Login.check()
返回值说明：
true：说明登录成功。
false：说明登录失败。

2.4. 获取当前登录用户的Access Token以及OpenID
QC.Login.getMe(function(openId, accessToken){})
参数说明：
这里的参数为回调函数，通过回调函数获取openId和accessToken。
openId：用户身份的唯一标识。建议保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权。
accessToken：表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。
注意：
getMe方法只能在用户登录授权后调用，建议总是在使用check方法并返回true的条件下，调用getMe方法。

自定义登录按钮
开发者可以根据自己的需要，自定义登录按钮，示例如下：

<span id="qqLoginBtn"></span>
<script type="text/javascript">//调用QC.Login方法，指定btnId参数将按钮绑定在容器节点中QC.Login({//btnId：插入按钮的节点id，必选btnId:"qqLoginBtn",//用户需要确认的scope授权项，可选，默认allscope:"all",//按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_Ssize: "A_XL"}, function(reqData, opts){//登录成功//根据返回数据，更换按钮显示状态方法var dom = document.getElementById(opts['btnId']),_logoutTemplate=[//头像'<span><img src="{figureurl}" class="{size_key}"/></span>',//昵称'<span>{nickname}</span>',//退出'<span><a href="javascript:QC.Login.signOut();">退出</a></span>'].join("");dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {nickname : QC.String.escHTML(reqData.nickname), //做xss过滤figureurl : reqData.figureurl}));}, function(opts){//注销成功alert('QQ登录 注销成功');}
);
</script>

开发者也可以使用下列函数作为登录成功的回调接收函数：
① 登录成功的回调函数，登录成功后被调用：

cbLoginFun(oInfo, oOpts)
参数说明：
oInfo：当前登录用户的基本信息，即OpenAPI中get_user_info返回的数据。
参数示例如下：

oInfo：{"ret":0,"msg":"","nickname":"遲來の垨堠","figureurl":"http://qzapp.qlogo.cn/qzapp/100229030/ECCC463F76A2E3C1D9217BBC30418164/30","figureurl_1":"http://qzapp.qlogo.cn/qzapp/100229030/ECCC463F76A2E3C1D9217BBC30418164/50","figureurl_2":"http://qzapp.qlogo.cn/qzapp/100229030/ECCC463F76A2E3C1D9217BBC30418164/100","gender":"男","vip":"1","level":"7"
}

oOpts：回传初始化参数，多个按钮时可用来区分来源，用来区分一个页面多个登录按钮的情况。
参数示例如下：

oOpts：{btnId:"qqLoginBtn"
}

回调函数使用示例如下：

var cbLoginFun = function(oInfo, oOpts){alert(oInfo.nickname); // 昵称alert(oOpts.btnId);    // 点击登录的按钮Id
};
QC.Login({btnId:"qqLoginBtn"}, cbLoginFun);

② 注销成功的回调函数，注销后被调用：

var cbLogoutFun(){alert("注销成功!");
};
QC.Login({btnId:"qqLoginBtn"}, cbLoginFun, cbLogoutFun);

Request与Response内置对象说明
4.1 Request
JS SDK在初始化时会根据浏览器环境创建不同的请求代理，QC.api的每次调用都是一个Request对象。

Request对象的公开方法如下：
success(resp): 请求完成并且返回码为0的回调。
error(resp): 请求完成并且返回码不为0的回调。
complete(resp): 请求完成后的回调。

调用时序为success/error -> complete，每个方法都可以调用多次，每次调用返回Request本身，支持链式调用。
resp参数为回调函数，回调函数参数为Response对象。

4.2. Response
Response为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开始编号。

JS_SDK实现网站应用QQ登录功能-QQ互联（小白易懂）相关推荐

网站集成QQ登录功能
原文:网站集成QQ登录功能最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能 ...
【愚公系列】2022年01月 Django商城项目13-登录界面-QQ登录功能实现
文章目录前言 1.QQ互联开发者申请 2.QQ互联应用申请 3.网站对接QQ登录一.django实际对接流程 1.创建抽象模型类 2.创建QQ用户模型类 3.注册应用 4.配置QQ登录信息 5.登 ...
测试用例集-9.QQ登录功能测试用例
------·今天距2020年70天·------ 这是ITester软件测试小栈第64次推文大家好我是coco小锦鲤对80.90后来说 QQ曾经维系了整个青春 QQ最开始的样子要从1999年 ...
网站接入QQ登录（QQ互联）php版的流程
0.下载QQ登录(QQ互)php版:下载地址:点击打开链接(本文编写时最新版本:V2.1 ) 1.在QQ互联网站注册一个appid,配置网站地址和回调地址. 例:http://yzdd.app1101 ...
Django项目实战——6—(退出登录、判断用户是否登录、QQ登录、QQ登录工具QQLoginTool、本机绑定域名)
1.退出登录注册界面跳转到登陆界面:templates/register.html 前端注册界面 {# 跳转到登陆界面 #}<a href="{% url 'users:login' ...
19网站实现QQ登录功能
一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用腾讯QQ登录的API接口. 如何使用JS_SDK让网站拥有QQ登录的功能,官网的这篇文章写得还算完整:http: ...
网站使用QQ登录功能
一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用腾讯QQ登录的API接口. 如何使用JS_SDK让网站拥有QQ登录的功能,官网的这篇文章写得还算完整:http: ...
网站实现QQ登录功能
转自: http://blog.csdn.net/wowkk/article/details/17315637 一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用 ...
php网站 qq登陆,php写的插件网站接入QQ登录，QQ互联
qq按钮这里的链接是入口,调用你的api api_qq.php前端直接链接到此/** * 这个QQ登录简单实用,只要大家看我写的注释会一目了然,请注意看哦. * 带有"@todo" ...

JS_SDK实现网站应用QQ登录功能-QQ互联（小白易懂）

JS_SDK实现网站应用QQ登录功能-QQ互联（小白易懂）相关推荐

最新文章

热门文章