有你在真好 的个人博客
web前端QQ互联
阅读:2236 添加日期:2021/3/27 23:19:39 原文链接:https://www.toutiao.com/item/6774288037321900556/

1、注册账号

https://connect.qq.com/

2、创建网站应用

  • 资料填写
web前端QQ互联

  • 完善资料
web前端QQ互联

3、审核通过后拿到appid

4、页面引入js-sdk

<script type="text/javascript"  charset="utf-8"
    src="//connect.qq.com/qc_jssdk.js"
    data-appid="APPID"    // 审核通过的APPID
    data-redirecturi="REDIRECTURI"    // 网站回调地址。回调地址必须以http或https开头。腾讯目前业务线都已切至https.所以建议此处都填写https.如果网站不支持,请自行升级
></script>

5、放置QQ登录按钮

在html页面需要插入QQ登录按钮的位置,粘贴如下代码:

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
       btnId:"qqLoginBtn"	//插入按钮的节点id
});
</script>

注:如需自定义按钮。则将上面代码生成的html(即<span id="qqLoginBtn"></span>节点里面的代码)粘贴在对应位置即可。

6、 回调地址页面

   <script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>

注:如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。页面URL地址中会在hash值部分加入access_token&expires_id=7776000。注意官网文档上面说可以拿到openid.其实是不可以的。需要登录后通过api拿到openid。

7、通过api获取access_token和openid

if(QC.Login.check()){ //如果已登录
    QC.Login.getMe(function(openId, accessToken){ // 注意业务中依赖openId和accessToken的需要写入在回调里面
        console.log(openId, accessToken)
    });
}

到此QQ互联登录的基本流程已结束。

8、常用的js-sdk 的api

web前端QQ互联

9、官方参考文档:

https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E


web前端QQ互联

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号