QQ三方登录步骤详解

首先,登录QQ互联:http://connect.qq.com/intro/login  ,注册成为开发者

选择申请加入,并创建你的应用。

创建成功后可以获取到appid和appkey

在网站的主页引入下面代码

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"    data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8">  </script>

其中APPID就是你应用的appid,REDIRECTURI则是你注册应用时填写的回调地址

QQ提供了多种快速登录的方式,这里只说JS SDK的方式

在确定上面js引入成功后,在页面合适位置放置下面代码

<span id="qqLoginBtn" ></span>

<script type="text/javascript">
QC.Login({
btnId : "qqLoginBtn",//插入按钮的html标签id
size : "B_M",//按钮尺寸
scope : "get_user_info",//展示授权,全部可用授权可填 all
display : "pc"//应用场景,可选
});
</script>

此时可以弹出登录窗,如果要获取用户信息,则需要一个回调页面,这里使用的是官方的demo,QQ_callback.html,源码如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> QQConnect JSDK - redirectURI </title>
<style type="text/css">
html, body{font-size:14px; line-height:180%;}
</style>

</head>
<body>

<div>
<h3>数据传输中,请稍后...</h3>
</div>

</body>
</html>

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>

在主页写入接受回调的js代码:

<script type="text/javascript">
//从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数
var paras = {};

//用JS SDK调用OpenAPI
QC.api("get_user_info", paras)
//指定接口访问成功的接收函数,s为成功返回Response对象
.success(function(s){
console.info(s);
console.info(s.data);
//成功回调,通过s.data获取OpenAPI的返回数据
alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);
})
//指定接口访问失败的接收函数,f为失败返回Response对象
.error(function(f){
//失败回调
alert("获取用户信息失败!");
})
//指定接口完成请求后的接收函数,c为完成请求返回Response对象
.complete(function(c){
QC.Login.getMe(function(openId, accessToken){
alert("当前登录用户的openId为:"+openId+ " accessToken为:"+accessToken);
});
//完成请求回调
alert("获取用户信息完成!");

});
</script>

腾讯现在不提供用户的qq号码,所以只好根据用户的openid来标示用户的唯一性。

以上文章内容经过上线项目测试正常。可以获取到用户的昵称等信息,以及openid

时间: 2024-08-02 20:00:39

QQ三方登录步骤详解的相关文章

Oracle 10g创建表空间的完整步骤详解

本文我们主要介绍了Oracle 10g创建表空间的完整步骤,包括表空间的创建与删除.为应用创建用户以及权限的授予等操作,希望能够对您有所帮助. AD:WOT2014:用户标签系统与用户数据化运营培训专场 Oracle 10g数据库中,当在数据库中创建用户时,基于应用性能和管理方面的考虑,最好为不同的用户创建独立的表空间. 那么创建表空间的步骤是怎样实现的呢?本文我们主要就介绍了这一部分内容,接下来就让我们一起来了解一下这部分内容吧. 1.创建表空间 不论是Lnux环境,还是Wndows环境,都要

JDBC连接SQL Server 2005步骤详解

一.设置SQL Server服务器:    1."开始" → "程序" → "Microsoft SQL Server 2005" → "配置工具" → "SQL Server Configuration Manager"(确认"SQL Server Management Studio"已关闭)    2."SQL Server 2005 服务"中停止服务"

什么是weblogic?安装步骤详解

weblogic,就是用于java开发的web服务器. tomcat熟悉吧,跟tomcat一个作用,是比tomcat更具优势的web服务器. 安装:(转载) 1.提供安装文件网盘下载:链接处2.安装过程不在详述了,可自行修改安装地址,各种“下一步”,完成安装.Weblogic创建域 安装完成后,[开始菜单]-->[Oracle Weblogic]-->[Weblogic Server 11gR1]-->[Tools]-->[Configuration Wizard],打开Fusio

安装MACOS操作步骤详解

安装MACOS操作步骤详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 关于安装MAC的操作系统其实大家都知道可以让客服帮忙提供软件上的支持,而且苹果客服都很有礼貌呢,而且非常的有耐心.特别感谢她们的帮助,让我对MAC的操作系统的好感度有了大大的提升.起初,我刚刚拿到我的本的时候是去年,因为我压根并不看好笔记本,我到现在也非常喜欢台式机,因为体验度是相当棒的,但是由于工作的原因,可能是要去出差的时候带着个台式机到处跑也不太合适,于是就决定买一个低配的笔记本.刚刚拿到笔记本第

CentOS下安装Apache步骤详解

CentOS下安装Apache步骤详解 一.实验环境 Linux: CentOS release 6.7 (Final) Apache: httpd-2.4.23.tar.gz VMware: VMware 10.0 宿主机: Win10 x64 二.Apache介绍 Apache一款 Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充,将Perl/Python等解释器编译到服务器

gcc/g++等编译器 编译原理: 预处理,编译,汇编,链接各步骤详解

摘自http://blog.csdn.net/elfprincexu/article/details/45043971 gcc/g++等编译器 编译原理: 预处理,编译,汇编,链接各步骤详解 C和C++编译器是集成的,编译一般分为四个步骤: 预处理(preprocessing)  ----------------- cpp/ gcc -E  编译(compilation) ------------------ cc1 / gcc -S 汇编(assembly)  ----------------

197vpn配置热门pc端步骤详解

197vpn配置热门pc端步骤详解 在使用197vpn的时候会面临到各种的系统情况,不同的系统配置vpn进行使用的方法也是不同的,下面我们来看看当前热门的pc端系统中vpn是如何配置的呢? Windows 7 在画面右下角,点选网络连接,然后选择"打开网络共享中心": 在弹出的对话窗口中,选择"设置新的连接或网络": 选择"连接到工作区",然后选择"使用我的Internet连接(VPN),通过Internet使用虚拟专用网络(VPN)来

CentOS7/RHEL7安装Redis步骤详解

CentOS7/RHEL7安装Redis步骤详解 CentOS7/RHEL7安装Redis还是头一次测试安装了,因为centos7升级之后与centos6有比较大的区别了,下面我们就一起来看看CentOS7/RHEL7安装Redis步骤详解 方法一:使用命令安装(前提是已经安装了EPEL). 安装redis: yum -y install redis 启动/停止/重启 Redis启动服务:1systemctl start redis.service停止服务: systemctl stop red

Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解

Ubuntukylin-14.04-desktop(带分区)安装步骤详解