QQ登录将用户信息存储在cookie中,命名为__qc__k ,请不要占用

__qc__k :


1) :: 在页面顶部引入JS SDK库:

将“js?”后面的appid参数(示例代码中的:100229030)替换成您自己的appid:
示例代码:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100229030" charset="utf-8"></script>
 

2) :: HTML页面中粘贴如下代码,插入QQ登录按钮

点击下述登录按钮进行体验:
 
示例代码:

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


3) :: 调用openapi:

3.1) ※ 调用openapi获取当前登录用户基本信息:
发送参数:

返回数据:

返回 json格式的用户信息;请指定接口访问成功的接收参数,如demo中的success(function(s)),即指定将成功返回值传递到s中; 其中所有API的返回均为response对象,包括:data, code, status等属性,分别表示数据、返回码、请求的响应状态

示例代码:

<script type="text/javascript">
var paras = {};

QC.api("get_user_info", paras)
.success(function(s){//成功回调
alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);
})
.error(function(f){//失败回调
alert("获取用户信息失败!");
})
.complete(function(c){//完成请求回调
alert("获取用户信息完成!");
});
</script>

 

3.2) ※ 调用openapi发分享 [相同url参数只能分享一次]:
发送参数:

{
images:"http://y.photo.qq.com/img?s=OnbP8BwOF&l=y.jpg",
title:"#QQ互联JSSDK测试#我是标题啊标题",
url:"http://connect.qq.com/",
comment:"我是评论:转发原因",
summary:"我是摘要:内容说明"
}

返回数据:

 
示例代码:

<script type="text/javascript">
//从页面收集openapi必要的参数
var paras = {
images:"http://y.photo.qq.com/img?s=OnbP8BwOF&l=y.jpg",
title:"#QQ互联JSSDK测试#我是标题啊标题",
url:"http://connect.qq.com/",
comment:"我是评论:转发原因",
summary:"我是摘要:内容说明"
};

//用jssdk调用openapi
QC.api("add_share", paras)
.success(function(s){//请自行改写成功回调
alert("分享成功,请到空间内查看!");
})
.error(function(f){//请自行改写失败回调
alert("分享失败!");
})
.complete(function(c){//请自行改写完成请求回调
alert("分享完成!");
});
</script>

 

3.3) ※ 调用openapi发微博:
发送参数:

{content : "#QQ互联JSSDK测试#曾经沧海难为水,除却巫山不是云。"}
			

返回数据:

 
示例代码:

<script type="text/javascript">
var paras = {content : "#QQ互联JSSDK测试#曾经沧海难为水,除却巫山不是云。"};

QC.api("add_t", paras)
.success(function(s){//成功回调
alert("发送微博成功,请到腾讯微博内查看!");
})
.error(function(f){//失败回调
alert("发送微博失败!");
})
.complete(function(c){//完成请求回调
alert("发送微博完成!");
});
</script>

 

3) :: 获取openId 与 accessToken

用户通过“QQ登录”登录成功后,可以调用示例代码将获取到openId与accessToken

  • openid是用户身份的唯一标识,请保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。
  • accessToken:表示当前用户在此网站/应用的登录状态与授权信息,也请保存在本地。
示例代码:

<script type="text/javascript">
if(QC.Login.check()){//如果已登录
QC.Login.getMe(function(openId, accessToken){
alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n"));
});
//这里可以调用自己的保存接口
//...
}
</script>

转自:本页面用来演示如何通过JS SDK,创建完整的QQ登录流程,并调用openapi接口

本页面用来演示如何通过JS SDK,创建完整的QQ登录流程,并调用openapi接口的更多相关文章

  1. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  2. 文件上传漏洞演示脚本之js验证

    文件上传漏洞演示脚本之js验证 0 0       716   关于文件上传漏洞,想必玩web安全的同学们都有接触,之前本站也发布过一篇文章介绍文件上传漏洞的各种绕过方法,但是只是有文档却没有演示代码 ...

  3. 如何在一个网站或者一个页面,去书写你的JS代码

    // JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...

  4. 页面跳转后样式丢失js失效

    2 页面跳转后样式丢失js失效 问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法: 将当前页面需要用到的css以及js放在< ...

  5. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  6. 爬虫实战:汽车之家配置页面 破解伪元素和混淆JS

    本篇介绍如何破解汽车之家配置页面的伪元素和混淆的JS. ** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9242156.ht ...

  7. 当页面提交时,执行相关JS函数检查输入是否合法

    当页面提交时,执行相关JS函数检查输入是否合法 关键代码 <form action="tj.php" method="post" onSubmit=&qu ...

  8. 微信 JS SDK 的 chooseImage 接口在部分安卓机上容易造成页面刷新

    该问题的症状是,当调用 chooseImage 接口并选择拍照,选择照片确定之后,然后从相机返回后,当前web页面就刷新了一次,导致拍照的图片无法选择上传:但是如果直接从相册中选择图片,则不会出现这个 ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

  1. VMware 虚拟化编程(1) — VMDK/VDDK/VixDiskLib/VADP 概念简析

    目录 目录 VMDK VDDK VixDiskLib VADP VMDK VMDK(VMware's Virtual Machine Disk Format,VMware 虚拟磁盘格式):简单来说就是 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_06 Properties集合_2_Properties集合中的方法store

    第一行是注释,第二行是时间,时间是自动加的 使用FileOutputStream. 写入中文会乱码

  3. ES6标准入门 第二章:块级作用域 以及 let和const命令

    一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...

  4. Bootstrap 学习笔记 项目实战 首页内容介绍 上

    效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  5. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  6. VMware虚拟机上运行Manjaro系统

    Manjaro系统是从ArchLinux系统发展而来.它的软件安装工具不是ubuntu的apt-get,不是yum,而是pacman. 在虚拟机安装好Manjaro后, 安装虚拟机工具VM-Tools ...

  7. 来自python自学者的小问题

    我想使用python的第三方库,但是我的IDE给我一个错误代码: D:\untitled\venv\Scripts\python.exe "D:/py code/venv/sxsxsxsxs ...

  8. java高级开发面试总结

    Java高级工程师面试题总结及参考答案 (转载)博客原文链接:https://www.cnblogs.com/java1024/p/8594784.html 一.面试题基础总结 1. JVM结构原理. ...

  9. Eclipse的Working Set管理项目

    想必大家的Eclipse里也会有这么多得工程...... 每次工作使用到的项目肯定不会太多...... 每次从这么大数量的工程当中找到自己要使用的, 必须大规模的滚动滚动条......有点不和谐了. ...

  10. 大神级回答exists与in的区别

    google搜了一下,很多帖子,而且出发点不同,各有各的道理,但是有一个帖子讲的特别好: http://zhidao.baidu.com/question/134174568.html 忍不住在百度上 ...