<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!-- js引用包 -->
<script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"     
data-appid="101037443" data-redirecturi="http://ikeepstudying.com/services/qq.php" data-callback="true" charset="utf-8"></script>
</head>
<body>
<span id="qqLoginBtn"></span>
<script>
    //调用QC.Login方法，指定btnId参数将按钮绑定在容器节点中  
    QC.Login({  
       //btnId：插入按钮的节点id，必选  
       btnId:"qqLoginBtn",      
       //用户需要确认的scope授权项，可选，默认all  
       scope:"all",  
       //按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S  
       size: "A_L"  
   }, 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>
</body>
</html>