Vue 项目(网站应用)接入QQ互联qq登录接口 汇总
还是按照顺序从头到尾介绍一下(前面都知道的,可以直接看后面的VUE部分),如果有不对的地方,也欢迎大神指导1、申请appid和appkey(这指定是必须的了)申请地址申请地址地址1.1、注册开发者1.1.1、在QQ互联开放平台首页右上角登录(最好是公司共有的qq,避免离职带来不必要麻烦)1.1.2、登录成功后会跳转到开发者注册页面,在注册页面按要求提交公司或个人的基本资料。下图所示的是...
还是按照顺序从头到尾介绍一下(前面都知道的,可以直接看后面的VUE部分),如果有不对的地方,也欢迎大神指导
1、申请appid和appkey(这指定是必须的了)
申请地址
申请地址地址
1.1、注册开发者
1.1.1、在QQ互联开放平台首页右上角登录(最好是公司共有的qq,避免离职带来不必要麻烦)
1.1.2、登录成功后会跳转到开发者注册页面,在注册页面按要求提交公司或个人的基本资料。下图所示的是公司注册页面:(个人觉得两个选择差不多,只是提交的材料有差异而已,选公司接入的时候,后续需要提交营业执照,选个人的话,会提交本人手持身份证拍的照片)
1.1.3、按要求提交资料后,审核人员会进行审核,通过审核即可成为开发者(一般审核的还是挺快的)
1.2、创建应用
开发者注册完成后,点击“应用管理”按钮,如下图
选择需要创建的应用类型,我们以网站应用为例(必须是审核通过后),会填写如下图信息这几个信息是必须填的,我之前想测试自己本地localhost的地址,是不行的,必须是备案的,是外网可以访问的(也许也可以,不过我没试出来,腾讯反正是审核通过不了)
审核通过后,既可以拿到Appid和appkey,如下图,我这是没通过的,通过的和这个是一样的,给你们看下就行了
2、在VUE 项目调用接口
只需要addid和回调地址即可
2.1 引入JS SDK文件
在index.html页面插入如下标签
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true"
data-appid="你自己的appid" data-redirecturi="你自己的回调地址" charset="utf-8">
</script>
2.2、起个别名(我猜的,我也不是很懂,但是必须引入)
在build下的webpack.base.conf.js文件里,找到module.exports,添加如下,可能没个项目不同吧,这个是建前端项目得同事告诉我的(我也不是主要做前端的啊,哈哈),不然在其他地方引入QC的方法是undefined
module.exports = {
externals: {
'QC': 'QC'
},
}
2.3、自定义登录按钮,添加方法
在你需要登录的页面添加按钮,写入方法
页面先引入一下QC,不然报错
import QC from 'QC'
<div class="qqIcon"
@click="qqLoginClick('qq')"
id="qqLoginBtn">QQ登录</div>
方法如下
// QQ 第三方登录
qqLoginClick (value) {
// 直接弹出授权页面,授权过后跳转到回调页面进行登录处理
QC.Login.showPopup({
appId: '你自己的appId',
redirectURI: '回调地址'
})
},
但是我发现这个回调地址不管我怎么写,还是回到我登录页面了,不过也无所谓了,再处理一下反正
此时页面上点击后,会跳转到qq页面,如下,授权后会回到页面
2.4、接收qq返回数据
然后我看有的人是用的定时器,我觉得不好,所以我是在create()写的方法,如下所示
created () {
// 检查是否登录
if (QC.Login.check()) {
// 该处的openId,accessToken就是后台需要的参数了,后台可以通过这些参数获取临时登录凭证,然后就是自己的逻辑了
QC.Login.getMe(function (openId, accessToken) {
if (openId !== undefined) {
//openId 是用户的唯一标识,也是需要存到数据库的
console.log(openId)
console.log('-------------------------------')
console.log(accessToken)
// 用JS SDK调用OpenAPI
QC.api('get_user_info', this.qqParam)
// 指定接口访问成功的接收函数,s为成功返回Response对象
.success(function (s) {
// 成功回调,通过s.data获取OpenAPI的返回数据
console.log('---------------------------------------------')
console.log(s.data)
//我把调用成功的返回数据打印到控制台,可以把这些参数发请求到后台,存入数据库
this.$api.post('api/qqLogin', this.qqParam).then(res => {
if (res.code === 'success') { }
})
})
// 指定接口访问失败的接收函数,f为失败返回Response对象
.error(function (f) {
// 失败回调
alert('获取用户信息失败!')
})
this.$router.push({ path: '/home' })//登录成功我处理完后跳转到首页了
}
})
console.log('已登录!')
this.$message.info('qq成功登录')
} else {
console.log('未登录')
}
qq返回的数据如下所示:
然后就基本上应该完事了,
在设置个qq退出的按钮,调用下面的方法,就可以退出了
qqOut () {
QC.Login.signOut()
this.$message.info('qq退出登录')
},
以上就是我接入的过程中涉及到的全部了,如果地方不对,请指导
更多推荐
所有评论(0)