最近在实现QQ授权登录,现将我的实现过程以及我的理解整理如下。以下所述如有不对之处,请指正。 官方提供的SDK有:JS,PHP,Java。我的网站使用Scala+Play搭建的,所以只能用JS SDk。
2.准备 注册QQ互联开发者身份 需要去腾讯QQ互联注册:http://connect.qq.com/。 准备好网站 网站要基本开发完成。网站域名,Logo等都有。 创建应用 在QQ互联管理中心创建应用。 上面的信息,创建好了之后随时可以更改。 网站验证 上图中的网站地址后面的验证,我选择的是在自己网站首页HTML代码的HEAD标签中添加: <meta property="qc:admins" content="你的验证信息" /> 回调地址可以自己设置一个。我网站首页是http://xjpz.me,因此设置的是http://xjpz.me/blog/test/qcback。 其他的按需填写。 创建了应用可获得AppID与AppKey。 3.部署测试 添加登录入口 引入JS SDK文件: 在登录页面<head></head>中引入: <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" 将APPID换成你自己的APPID,REDIRECTURI换成你自己设置的回调地址。 放置QQ图标(下面有素材地址),设置图标超链接地址:
将client_id换成你的AppID,redirect_uri换成你的回调地址。 如果你要获取其他信息或者调用其它接口,请将scope改成你需要的API名或者直接改成 all 。(API列表可查看http://wiki.connect.qq.com/api%E5%88%97%E8%A1%A8)。 我的登录入口样例: 官方资料: 素材与放置规范 或者这个 官方提供的登录按钮代码,可直接将代码贴到你想要放置入口的位置就行: <span id="qqLoginBtn"></span> <script type="text/javascript"> QC.Login({ btnId:"qqLoginBtn" //插入按钮的节点id }); </script> 设置回调页面
我的回调页面代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> QQConnect JSDK - redirectURI </title> <script src="/assets/javascripts/jquery.min.js"></script> <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="xxxxxxx" data-redirecturi="http://xxxx.com/xxxxx" charset="utf-8"></script> <style type="text/css"> html, body{font-size:14px; line-height:180%;} </style> </head> <body onload="getInfo()"> <div> <h3>数据传输中,请稍后...</h3> </div> </body> </html> <script type="text/javascript"> function getInfo() { if(QC.Login.check()){ QC.api("get_user_info") .success(function(s){//成功回调 QC.Login.getMe(function(openId, accessToken){ $.post('/你的后台处理Action',{name:s.data.nickname,openid:openId,otype:1,token:accessToken},function(data,status){ if(status=="success"){ alert(s.data.nickname+"恭喜你,登录成功!"); location.href = "/"; }else{ alert("获取用户信息成功!登录失败!"); location.href = "/blog/to/login"; } }) }) }) .error(function(f){//失败回调 alert("获取用户信息失败!登录失败!"); location.href = "/blog/to/login"; }) .complete(function(c){//完成请求回调 //alert("获取用户信息完成!"); }); }else{ alert("请登录!"); location.href = "/blog/to/login"; } } </script> 说明,
为了方便用户,用户授权成功后,我并没有再继续让用户输入邮箱、密码等。如果再让用户输入一遍,那和直接注册有什么区别?那样授权登录基本就失去了意义。 顺便贴一下我后台处理步骤:
4.提交 以上完成,自己测试通过,就可以提交腾讯审核。没有审核通过之前只能设置几个账号测试,其他账号无法授权登录。 提交时需注意,
|