利用qq官方提供的js_sdk实现qq互联登录

最新公司交给我一个实现qq互联登录系统的功能,公司其他人也没有这方面经验,全靠网上搜索资料实现了该功能,下面总结一下个人实现该功能的一些总结,有一些不对的地方望网友交流指正

首先讲一下我们这边的需求,主要就是实现一个用qq号绑定系统账号后实现qq互联登录的功能 ,我们的需求里不需要获取qq里的一些信息(我们不需要实现利用qq号注册的功能),所以我把我使用js_sdk实现qq互联登录过程分成几个模块来讲一下 ,1.我需要准备的参数 2.我需要获取和存入的的参数3.我需要调用的方法54.我遇到的坑 **1.我需要准备的参数:** appid:这个在qq互联申请成功后就会有; 这个是放置qq登录按钮页要加入的代码


回调地址:这个就是上面代码里data-redirecturi需要填入的值[关于回调地址](https://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E4%BF%AE%E6%94%B9%E6%96%B9%E6%B3%95)

【利用qq官方提供的js_sdk实现qq互联登录】关于这个回调地址我想强调一下,第一点可以在qq互联申请的时候配多个回调地址,但是需要你在上面script里指定具体哪一个(这个你如果在qq互联申请的时候没有配置的话是绝对不行的) ;
2.我需要从qq那边获取的参数和绑定存入后台数据库的参数:
openid,你需要获取的和存入的仅openid就行,,具体怎么获取我在后面的方法调用里讲
3.我调用的方法:
第一个要调用的方法就是写在包含登录按钮的登录页面的代码如下:

这里的qqLoginBtn是登录按钮的id 参数showModal决定是否弹出新页面来点击已登录的qq账号,不建议弹出新页面,默认不写该参数就是false为弹出(注意false是弹出)
第二个方法写在回调页面,我设计这个页面完全是为了跳转使用,其实也可以把这个回调地址设成登录(注意:这个js_sdk在点击已登陆的qq账号后不论是不是我们系统内绑定的qq账号都会先跳转到你设定好的回调地址页面,你也只能在这个页面获取openid,然后向后台发送登录请求)代码如下

这里通过回调函数就可以获取openid及accessToken 交给ajax带到后台请求登录,
4.我遇到的坑
第一就是回调地址的坑,这个可以在申请qq互联的时候配好,也可以在后期编辑里修改,但一定要保证配置成功,如果格式有问题或者ip域名及路径格式有问题是配置不成功,每次修改一定要保证修改成功了
第二就是跳转的坑,这个可能不能算是qq互联的坑,要属于浏览对js页面调转代码兼容性问题,在ajax请求登录成功后在成功或失败方法里我试过的几种跳转形式`1.window.location.href=https://www.it610.com/article/“”(这个基本只有ie支持); 2.window.location.assgin(“”)(这个火狐兼容还行但是还是偶尔有闪退); 3.window.location.repalce(“”); (这个是在替换当前浏览器路经,试了几种浏览器兼容性都不错);4.window.open(”“); (这个浏览兼容都很好,而且可以指定窗口名跳转具体,默认传一个路径就是打开新窗口,可以传第二个参数即指定窗口名称);
这个我遇到的问题就是跳转时浏览器的闪退问题,目前只选用了3,4两种跳转兼容性很好没有闪退情况

    推荐阅读