效果就是避免了繁琐的注册流程,登录qq时,直接点击用qq登录即可。坏处就是网站不能搜集到用户的一些基本信息。
1,申请appid之后要去开发者后台设置相应的回调地址,这样就算appid被偷后别人也用不了。
流程:申请appid且设置回调地址后,点击“qq登录”后,会跳转到用户授权页面,会利用到appid和用户的授权之后,在跳回之前设置的回调地址并得到code和state参数之后,在获取到Access Token,在用Access Token和appid结合,获取OpenID,就可以调用数据了。
2,登录注册成为开发者 http://open.qq.com/login
3,填写认证信息
4,提交审核
5,js的用法
要提交一些杂七杂八的审核信息才能获取到appid

设置回调地址

以上准备工作都完成后就可以开始用qq授权登录功能了。我们使用的是js SDK方法。这是腾讯的人帮我们封装好的也是目前最简单的方法。
(1) 引入
<script type="text/javascript" charset="utf-8" src="https://connect.qq.com/qc_jssdk.js" data-appid="你的appid" data-redirecturi="你的回调地址" ></script>
注意:回调地址必须以http或https开头。 回调地址还需要在开发者后台添加
或者
引入https://connect.qq.com/qc_jssdk.js 在用点击事件触发以下代码
QC.Login.showPopup({
appId:"[appId]",
redirectURI:"[回调地址]"
});
(2)放置按钮
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
</script>
JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要再开发代码进行获取,直接调用QQ登录OpenAPI即可。
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
}, loginFun, logoutFun, outCallBackFun)进行初始化
(3)回调页面设置,为了获取Access Token和OpenID,发送数据给腾讯才能拿到用户数据
在需要获取的页面加载
<script type=”text/javascript”
src=”https://connect.qq.com/qc_jssdk.js” charset=”utf-8″ data-callback=”true”></script>
注意:如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。
以下是回调地址:不需要我们任何操作

(4)获取qq用户数据
QC.api(api, paras, fmt, method)
例如:
get_user_info不需要输入参数,因此paras中没有参数
QC.api("get_user_info", {})
.success(function(s){
//成功回调,通过s.data获取OpenAPI的返回数据
alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);
})
//指定接口访问失败的接收函数,f为失败返回Response对象
.error(function(f){
//失败回调
alert("获取用户信息失败!");
})
//指定接口完成请求后的接收函数,c为完成请求返回Response对象
.complete(function(c){
//完成请求回调
alert("获取用户信息完成!");
});
QC.Login.getMe(function(openId, accessToken){
console.log("当前登录用户的accessToken为:"+accessToken);
console.log("当前登录用户的openId为:"+openId);
});
QC.Login.signOut()【注销当前登录用户】
QC.Login.check()【检测当前登录状态】
效果:在qq登录的地址,点击qq登录会弹出一个授权页面,这时候需要用户点击授权,之后会跳转到回到地址,就是我们在开发者页面里面添加的那条地址,回调地址会拿到Access Token和OpenID发送给腾讯那里,判断我们是否登录成功,成功后又再次回到我们刚刚登录的页面,但是这时候已经显示了我们已经能是登录状态了

开发人员要判断用户是否用qq第三方登录成功,就在成功回调里写判断就行
QC.api("get_user_info", {})
.success(function(s){
//这里告诉后台我们登录成功了
})
————-以下是一些相关信息—————-
放置“QQ登录”按钮
快速上手
回调地址有变化,(申请appid之后要去开发者后台设置相应的回调地址,这样就算appid被偷后别人也用不了)