uni开发的H5接入QQ登录

本以为网上应该有现成的答案,没想到啊,没个有用的,只能自己琢磨,阿西八!

uni-H5接入QQ流程
第一步:首先肯定要去QQ互联 申请开发者啦,然后注册,然后得到APPID,对,就是很基操的一套流程,这个就不多废话了
第二步:uni的H5在没有Vue的那种index.html如何配置外链scirpt呢???

解决办法
首先在目录创建个index.html,然后把
https://uniapp.dcloud.io/collocation/manifest?id=h5-template
官方的模板代码拿进来,直接拿就行,不用改动,否则可能会出现点稀奇古怪的毛病。

创建了index.html模板后,打开下图

在这里插入图片描述
在这里插入图片描述

这样就配置好了你的index.html

接着就是打开你的index.html把QQ互联的那个外链Script拿进来,具体代码在QQ互联文档上面有,地址是:QQ互联SDK文档

这里注意一下

data-appid:你申请的appid
data-redirecturl:登录成功后回调的地址(这个地址必须是别人可以访问到的地址,如果不会的话,可以找你们的后端协调一块整
在这里插入图片描述
到这一步你就已经成功引入QQ的互联了,接下来就是触发了,找到你要触发的点击事件

—— 注意!!!!——

设置完这些模板后,一定要重启项目!一定要重启项目!一定要重启项目! 否则会出现QC未定义的错误!

在这里插入图片描述

登录成功后回调的页面可以卸下如下代码

created() {
	if(QC.Login.check()){
		console.log('已经登录')
		QC.Login.getMe((openId, accessToken, ) => {
			this.openId = openId;
			this.accessToken = accessToken;
			console.log('openId:'+this.openId)
			console.log('accessToken:'+this.accessToken)
		})
		
	}else{
		console.log('没有登录')
	}
},

示例代码:https://gitee.com/myGitHuya/qqlogin-demo.git
补充

如果要获取用户信息,最好交给后台去调用,因为前台调用可能会出现跨域问题,后台去调接口,具体接口方式也在QQ互联文档上有QQ互联API列表

Logo

前往低代码交流专区

更多推荐