pc端qq登录集成(js方式)新手推荐
2016-05-10 09:44
399 查看
你需要一个测试的应用(创建完成之后就有appid了)
附上自己创建的应用详细信息,我的appid是101303571
因为你本地的项目tx不能访问,所以开发测试阶段需要把你的项目映射到公网上,这里推荐一个免费的穿透工具。网址http://natapp.cn/
下载对应的客户端解压后,进去文件夹里在改目录下打开命令提示符cmd
ngrok -config ngrok.cfg -subdomain myapp 80
myapp 自定义的域名, 80 为需要映射到的本机端口
使用http://myapp.ngrok.natapp.cn 访问
当然了,创建完应用后可以去http://connect.qq.com/intro/login/jssdk生成样式和js代码
重点来了,在你的登录页或者首页加入相应js代码
1): <meta property="qc:admins" content="217507737764534637566727366141006367" />
2):放置一个html代码,也就是qq登录按钮,id必须是唯一的咧<span id="qqLoginBtn"></span>
3):接下来利用qq封装好的js处理喽
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
QC.Login({
btnId : "qqLoginBtn",//插入按钮的html标签id
size : "B_M",//按钮尺寸
scope : "get_user_info",//展示授权,全部可用授权可填 all
display : "pc"//应用场景,可选
},function(reqData, opts){//登录成功
//根据返回数据,更换按钮显示状态方法
var dom = document.getElementById(opts['btnId']),
_logoutTemplate=[
//头像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//昵称
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
].join("");
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
nickname : QC.String.escHTML(reqData.nickname), //做xss过滤
figureurl : reqData.figureurl
}));
//QC.Login.getMe(function(openId, accessToken){
//alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n"));
//});
//这里可以调用自己的保存接口
//...
}, function(opts){//注销成功
alert('QQ登录 注销成功');
}
);
</script>
咱们的登录入口页算是处理完了,来看看回调页了
由于是开发。我的这个页面就一下代码
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true" ></script>
<script type="text/javascript">
</script>
<p>欢迎你。。</p>
是不是很简单呢!
附上自己创建的应用详细信息,我的appid是101303571
因为你本地的项目tx不能访问,所以开发测试阶段需要把你的项目映射到公网上,这里推荐一个免费的穿透工具。网址http://natapp.cn/
下载对应的客户端解压后,进去文件夹里在改目录下打开命令提示符cmd
ngrok -config ngrok.cfg -subdomain myapp 80
myapp 自定义的域名, 80 为需要映射到的本机端口
使用http://myapp.ngrok.natapp.cn 访问
当然了,创建完应用后可以去http://connect.qq.com/intro/login/jssdk生成样式和js代码
重点来了,在你的登录页或者首页加入相应js代码
1): <meta property="qc:admins" content="217507737764534637566727366141006367" />
2):放置一个html代码,也就是qq登录按钮,id必须是唯一的咧<span id="qqLoginBtn"></span>
3):接下来利用qq封装好的js处理喽
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
QC.Login({
btnId : "qqLoginBtn",//插入按钮的html标签id
size : "B_M",//按钮尺寸
scope : "get_user_info",//展示授权,全部可用授权可填 all
display : "pc"//应用场景,可选
},function(reqData, opts){//登录成功
//根据返回数据,更换按钮显示状态方法
var dom = document.getElementById(opts['btnId']),
_logoutTemplate=[
//头像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//昵称
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
].join("");
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
nickname : QC.String.escHTML(reqData.nickname), //做xss过滤
figureurl : reqData.figureurl
}));
//QC.Login.getMe(function(openId, accessToken){
//alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n"));
//});
//这里可以调用自己的保存接口
//...
}, function(opts){//注销成功
alert('QQ登录 注销成功');
}
);
</script>
咱们的登录入口页算是处理完了,来看看回调页了
由于是开发。我的这个页面就一下代码
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true" ></script>
<script type="text/javascript">
</script>
<p>欢迎你。。</p>
是不是很简单呢!
相关文章推荐
- html5 js跨域
- 常规功能和模块自定义系统 (cfcmms)—041模块附加字段和新的Grid方案设计器
- ELK-json型日志-特殊字段出现ERROR 字段报警配置文件
- cojs EX_香蕉 题解报告
- 全国城市二级联动js插件
- MyEclips中JS代码提示插件(spket)
- 如何快速学习正则表达式
- 编程题:1. var person = '{name:"Lily",sex:"famale",age:24,country:"US"}';将person转换成JSON对象并便利每个属性值。
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
- js中需注意的编程细节
- jsp页面常用控件
- javascript自动适应的iframe高度
- JSP/Servlet程序设计(入门书籍)
- json 解析
- JS alert()、confirm()、prompt()的区别
- js事件冒泡
- 深入了解JavaScript中的关键字
- js中的new关键字都干了些什么?
- JSP指令
- NightWatchJS