QQ快捷登录集成教程

在阅读本文之前建议先翻阅官方的js_sdk集成文档，有一个大致的了解,地址如下：

https://wiki.connect.qq.com/js_sdk%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e

js_sdk集成的QQ快捷登录的方式有多种，本文主要介绍采用 QC.Login.showPopup(oOpts)方式。

1 这里引入3个页面概念

登录页面：放置QQ登录图标所在的页面
授权页面：点击QQ登录图标所跳转的页面
回调页面：授权成功后，跳转到的页面（QQ互联申请时，配置的回调地址）

2 相关页面设置

2.1.1 登录页面

引入js文件，data-appid为申请账号时的appId，data-redirecturi为申请账号配置的回调地址

<script type="text/javascript" charSet="utf-8"
src="//connect.qq.com/qc_jssdk.js"
data-appid="xxxxxx"
data-redirecturi="xxxxxx">

在html中配置QQ快捷登录的入口

<a style="cursor: pointer;" class="social" onclick="QClogin()">
<img width="20px" height="25px" src="/img/qq_3.png">
</a>

js文件内容

function QClogin() {
// 首先调用登出方法。不调用时，在同一个页面多次登录不同的QQ号，会失败
QC.Login.signOut();
// 该方法会打开一个新窗口（授权登录页），这里获取到新窗口的对象
let windowObj = QC.Login.showPopup({
appId:"xxxxxx",
redirectURI:"xxxxxx"
});
let flag = true;
// 定时任务，轮询监控windowObj.closed的状态，如果返回true，代表授权窗口已经关闭，QQ登录已成功，这个地方研究了很久，最后找到了这个方法。还有其他类似在回调页面调用window.opener.reload()方法，但是尝试的时候，总感觉不稳定
setInterval(function () {
if(windowObj.closed && flag) {
flag = false;
// 先判断是否登录成功
if(QC.Login.check()) {
let qcOpenId;
let qcAccessToken;
// 回调函数，可以获取openId、accessToken
QC.Login.getMe(function(openId, accessToken){
console.log("opendId = " + openId + ", accessToken = " + accessToken);
// 通过获取到的openId、accessToken获取用户信息
QC.api("get_user_info", {
"access_token": accessToken,
"oauth_consumer_key" : "xxxxxx",
"openid" : openId}, "json", "GET")
.success(function (data){
// 返回用户QQ的基本信息，可以调用本地方法保存，并给授权用户注册网站账号
console.log("success：" + JSON.stringify(data))
// 最后一步reload当前页面，刷新信息，加载数据
window.location.reload();
}).error(function (data) {
console.log("error：" + JSON.stringify(data))
}
);
});
}
}
}, 200)
}

2.1.2 回调页面

引入js文件，data-callback 设置为true，代表跳转到该页面后，页面会主动关闭，设置为false时，页面不关闭，由于我们在登录页面监听了该页面的close事件，所以这里设置为true。为了界面更加美观，可以加入loading图片

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