html 加QQ链接QQ版本不支持,网站接入QQ登录(JS版)【最新教程 04.10更新】,亲身失败百次的总结...

开发阶段(偏后端的同学可以查看 PHP版 教程)

3.1. 因为 QQ互联 官网只是简单的提供了 JS-SDK 以及相关的 API,可能部分同学初见比较茫然。所以为了帮助同学们更好理解,我整理出以下内容,力求最简单的方法实现目的。

JS-SDK

3.2. 因为是写教程,所以代码就尽量简单明了一点。实际上网站使用 'JS' 接入 'QQ登录' 非常简单,原则上只需要自己编辑如下图所示的 2个 'HTML' 页面:

Code

callback.html # 【QQ互联】中已经通过审核的回调地址页面

index.html # 接入【QQ登录】的网站主页面

3.3. 由于是嵌入在 'HTML' 中的 'JS' 脚本,因此在 'index.html' 中需要输入以下代码:

......................other HTML code..............

// QC.Login()方法成功之后的回调函数

var success=function(user_info,option){

console.info(user_info);

console.info(option);

}

// QC.Login()方法失败之后的回调函数

var fail=function(option){

console.info(option);

}

QC.Login({

//btnId:插入按钮的节点id,必填项

btnId: "login_btn",

},success,fail);

......................other HTML code..............

3.4. 再在 'callback.html' 文件中输入以下内容:

......................other HTML code..............

数据传输中,请稍后...

$(function(){

if (QC.Login.check()) {

// 通过回调函数获取'open_id'和'access_token'

QC.Login.getMe(function(open_id, access_token){

// 可以改成你自己的后台处理地址,然后对'open_id'和'access_token'进行缓存

$.post('http://www.example.com/method.php',{

open_id:open_id,

access_token:access_token

});

});

}

});

......................other HTML code..............

3.5. 最后,再回过头去检查 'index.html' 中设置的 'appid'、'callback' 是否与 QQ互联 中通过审核的网站应用信息一致。

你可能感兴趣的:(html,加QQ链接QQ版本不支持)