admin管理员组

文章数量:1530842


  1. 你需要一个测试的应用(创建完成之后就有appid了)

  1. 附上自己创建的应用详细信息，我的appid是101303571

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

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

ngrok -config ngrok.cfg -subdomain myapp 80

 

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

 

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

 

  1. 当然了，创建完应用后可以去http://connect.qq/intro/login/jssdk生成样式和js代码

  1. 重点来了，在你的登录页或者首页加入相应js代码

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

2):放置一个html代码，也就是qq登录按钮，id必须是唯一的咧<spanid="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>

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

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

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

 

<scripttype="text/javascript">

 

</script>

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

 

 

是不是很简单呢！

本文标签： 第三方网站jsqq

版权声明：本文标题：js 实现网站 第三方 qq 登录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725629815a1033630.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。