- AppID：你的应用(网站)的ID。
- AppKey：对你的应用的验证。
- Redirect_uri：用户确认授权后的回调地址。(需自己设置，有防止别人盗用你的身份获取授权用户信息的作用)
- OpenID：用户身份的唯一标识。建议保存在本地并与本地创建的uid绑定，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权，使用户体验一致。(获取不到用户的QQ号)
- AccessToken：表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。(相当于token，令牌)
- Scope：你要获取的信息。
-
准备
注册QQ互联开发者身份
需要去腾讯QQ互联注册：https://connect.qq.com/。
准备好网站
网站要基本开发完成。网站域名，Logo等都有。
创建应用
在QQ互联管理中心创建应用。
-
部署测试
添加登录入口
在登录页面<head></head>中引入：
-
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"> </script>
官方提供的登录按钮代码，可直接将代码贴到你想要放置入口的位置就行：
-
<span id="qqLoginBtn"></span> <script type="text/javascript"> QC.Login({ btnId:"qqLoginBtn" //插入按钮的节点id });</script>
3.回调页面
- 和登录入口一样
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"> </script>
- 设置回调页面
-
<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.后台处理步骤：
-
- //判断openid是否存在。 - // 如果openid存在，则说明此用户之前登录过或者已与本地user表中的用户绑定。写入cookie，使用户为登录状态，到此结束。 - //如果用户openid不存在，则判断用户名是否存在。 - //如果用户名不存在，则直接生成新的本地用户，并绑定uid与openid。写入cookie，使用户为登录状态，到此结束。 - //如果用户名存在，提醒用户是否验证并与之绑定。如果用户选择验证，并验证通过，则与之绑定。写入cookie，使用户为登录状态，到此结束。 - //如果用户放弃验证，或者验证失败，则生成新的本地用户，并生成新的用户名，绑定uid与openid。写入cookie，使用户为登录状态，到此结束。