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. 测开之路一百一十一:bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  2. cmd 编码修改。 牛阿。 解决问题

    http://jingyan.baidu.com/article/e75aca85440f01142edac636.html 命令窗口修改编码,CMD编码修改方法 听语音 | 浏览:9696 | 更新 ...

  3. 应用安全 - 工具使用 - Nmap

    TCP端口扫描类型 TCP connect扫描 三次握手完成/全连接/速度慢/易被检测到 TCP SYN扫描 半开扫描/发送SYN包启动TCP会话 TCP FIN扫描 半开扫描/发送SYN包启动TCP ...

  4. spring data jpa 使用SQL语句查询

    package com.ytkj.entity; import javax.persistence.*; import java.io.Serializable; /** * @Entity * 作用 ...

  5. jdk下载安装后为什么要设置环境变量?

    因为电脑不知道javac这个命令是在C:\Program Files\JAVA\jdk1.8.0_65\bin的这个路径下面,所以我们要设置好环境变量,来让电脑知道其路径

  6. Linux下修改时间及date使用

    [root@host1 ~]# date #显示时间 2017年 06月 01日 星期四 17:02:59 CST 以指定格式显示时间: [root@host1 ~]# date +%Y%m%d 20 ...

  7. Java RPC 分布式框架性能大比拼,Dubbo排老几?

    来源:http://985.so/aXe2 Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成 ...

  8. Java虚拟机最多支持多少个线程?

    作者:miracle1919  来源:http://sina.lt/getP McGovernTheory在StackOverflow提了这样一个问题:Java虚拟机最多支持多少个线程?跟虚拟机开发商 ...

  9. 面试题思考:Stack和Heap的区别 栈和堆的区别

    堆栈的概念: 堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.在单片机应用中,堆栈是个特殊的存储区,主要功能是暂时存放数据和地址,通常 ...

  10. Elasticsearch学习,请先看这一篇!

    原文:Elasticsearch学习,请先看这一篇! 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...