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. 函数介绍——MulDiv

    http://blog.sina.com.cn/s/blog_579ebc11010008ql.html 函数介绍——MulDiv (2007-03-27 10:05:30) 转载▼   分类: 编程 ...

  2. Parcel在binder通信readStrongBinder和writeStrongBinder

    Binder IPC通信中,Binder是通信的媒介,Parcel是通信的內容.远程调用过程中,其参数都被打包成Parcel的形式来传递. 在IPC通信的Proxy端,我们经常可以看到下面类似的代码, ...

  3. 【GTS】关于GtsTetheringTestCases模块的几个失败项

    GTS---关于GtsTetheringTestCases模块的几个失败项 1.run gts -m GtsTetheringTestCases -t com.google.android.tethe ...

  4. Node.js实战11:fs模块初探。

    fs模块封装了对文件操作的各种方法,比如同步和异步读写.批量操作.流.监听. 我们还是通常例程学习, 获取目录下的文件清单: var fs =require("fs"); fs.r ...

  5. Springboot(java)程序部署到k8s

    新建rc(replication controller) 以下操作在master1做 rc是一套程序部署的配置,k8s会根据配置自动运行和管理程序,例如自动启动程序,程序挂了自动重启等等 rc配置一般 ...

  6. 5105 pa1 MapReduce

    Programming Assignment 1: A simple MapReduce-like compute framework Yuanli Wang  wang8662            ...

  7. .net 关于路径的总结

    原文:https://www.cnblogs.com/hehehehehe/p/6196155.html https://www.cnblogs.com/yugongmengjiutian/artic ...

  8. C#取模的理解:为什么当a<b,a%b=a?

    一,取模a%b 1,如果a>b,例如10%7=3,这是什么原因呢?可以根据下面的理解 10 =7*1+3,则模就是3 2,如果a<b,例如7%10 = 7,这时怎么得到的呢?根据下面来理解 ...

  9. React框架新闻网站学习过程中遇到的错误总结

    1.安装指定版本插件命令 npm install 插件名字@1.1.4(版本号) --save 或 yarn add 插件名字@1.1.4(版本号) --dev 2.Error:‘Link’ is n ...

  10. 什么是服务端伪造(SSRF)

    什么是服务端伪造(SSRF) 原文:GitHub Pages and Single-Page Apps 译者:neal1991 welcome to star my articles-translat ...