pc端qq登录集成（js方式）新手推荐

• 1. 你需要一个测试的应用(创建完成之后就有appid了)
  2. 附上自己创建的应用详细信息，我的appid是101303571

  因为你本地的项目tx不能访问，所以开发测试阶段需要把你的项目映射到公网上，这里推荐一个免费的穿透工具。网址http://natapp.cn/

  下载对应的客户端解压后，进去文件夹里在改目录下打开命令提示符cmd

  ngrok -config ngrok.cfg -subdomain myapp 80

   

  myapp 自定义的域名, 80 为需要映射到的本机端口

   

  使用http://myapp.ngrok.natapp.cn 访问

   

  3. 当然了，创建完应用后可以去http://connect.qq.com/intro/login/jssdk生成样式和js代码
  4. 重点来了，在你的登录页或者首页加入相应js代码

  1): <meta property="qc:admins" content="217507737764534637566727366141006367" />

  2):放置一个html代码，也就是qq登录按钮，id必须是唯一的咧<span id="qqLoginBtn"></span>

  3):接下来利用qq封装好的js处理喽

  <script type="text/javascript">

  QC.Login({

  btnId:"qqLoginBtn" //插入按钮的节点id

  });

   QC.Login({

    btnId : "qqLoginBtn",//插入按钮的html标签id

    size : "B_M",//按钮尺寸

    scope : "get_user_info",//展示授权，全部可用授权可填 all

    display : "pc"//应用场景，可选

   },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>

  咱们的登录入口页算是处理完了，来看看回调页了

  由于是开发。我的这个页面就一下代码

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

   

  <script type="text/javascript">

   

  </script>

  <p>欢迎你。。</p>

   

   

  是不是很简单呢！