vue移动端,使用腾讯提供的JS SDK实现第三方登录
1. 首先需要申请接入QQ登录,并成功获取到appid和appkey
1-1 在QQ互联上先申请为开发者
1-2 申请审核通过之后在首页上方点击应用管理,然后创建应用选创建网站应用
1-3 注意:这个回调地址是登录成功后的跳转地址,多个时用分号;隔开,且有条件限制,具体规则看文档介绍
1-4 都审核通过以后就可以开始介入啦,appid在这里看,点击查看可查看appkey(JS SDK登录没用到appkey)
2. 开始接入
2-1 引入js包
在html页面适当的位置引入JS脚本包(将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid;"REDIRECTURI"替换为申请接入QQ登录时输入的回调地址)
因为我们是vue单页面开发,直接引入到index.html下就可以了,data-callback="true"
表示登录成功后的回调页面标志,所以直接一起引入就行
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" data-callback="true" charset="utf-8"></script>
这里QQ互联的src
路径是 http://connect.qq.com/qc_jssdk.js
,两者随便用哪个都行
2-2 放置QQ登录按钮
在登录页面需要插入QQ登录按钮的位置,粘贴如下代码:
<span id="qqLoginBtn"></span>
js:
mounted() {this.$nextTick(() => {QC.Login({//btnId:插入按钮的节点id,必选btnId:"qqLoginBtn", //用户需要确认的scope授权项,可选,默认allscope:"all",//按钮尺寸,可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S],可选,默认B_Ssize: "A_M"}, function(reqData, opts){//登录成功后的逻辑写在这//location.href = 'https://www.baidu.com'}, function(opts){//注销成功alert('QQ登录 注销成功');});})
},
上述2-1引入了包,登录页面放置按钮跟写入js后就会自动有登录按钮出来,效果如下
如果你不想用官方的样式,也可以自己写,然后用QC.Login.showPopup(oOpts)
的方法,oOpts:需要指定appId,回调地址redirect_URI,也就是你申请的,如:
QC.Login.showPopup({appId:"你申请的appId",redirectURI:"你设置的redirectURI"
});
看哈效果图先:
2-3 在登录成功后的回调页面可获取openId和accessToken
created () {if(QC.Login.check()){QC.Login.getMe(function (openId, accessToken) {alert(openId)alert(accessToken)});}
},
获取到openId和accessToken后就可以直接调用OpenAPI接口啦
踩的坑:
踩了一些坑,我的项目不是mode: history
模式,如果申请QQ登录时写的回调地址是带井号的,如:http://www.baidu.com/#/xxx,你会发现在手机上测试一键登录之后会跳到这个页面
百度找了很久没找到答案,后来自己慢慢排查,发现用电脑测试的时候,登录后的链接是这样的:
这个192.168.181.65:8080/#/shop是我的回调地址,后面一串是登录成功带上的,官网有提到
我的单页面路由本身就是找井号后面地址,现在又多了个#,可能就是这里出了问题。然后我去验证
修改申请QQ登录的时候的网站地址,给它加上/#/,反正访问首页也是这样的,然后在回调地址去掉井号,
跳到了这里
那路由就去找井号后面的,找不到,所以就在路由配置那写一个path: '*'
的路由(找不到跳转路径时会跳到这个路由去),然后在这个路由里写逻辑,把它当做中转站就可以了
然后在中转站写入测试代码
效果出来了:
结语:办法总比困难多,只要你有满脑子的骚操作,总有一天能秀起来,一库
vue移动端,使用腾讯提供的JS SDK实现第三方登录相关推荐
- vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位 需求:希望网站显示当前城市 腾讯前端定位组件 解决的方法 定义一个文件,加载定位js 在vue页面中使用 需求:希望网站显示当前城市 腾讯前端定位组件 key的申请, ...
- 腾讯云 cos ajax,腾讯云 COS JS SDK(JSON API)
cos-js-sdk-v4 已弃用 - 请升级到 cos-js-sdk-v5 SDK 依赖的 JSON API 已弃用,请直接使用基于 XML API 的 cos-js-sdk-v5. 腾讯云 COS ...
- 在vue移动端项目中,配合clipboard.js插件,复制一段密令(类似淘宝支付宝口令)的文本到剪切板...
需求 开发过程中遇到的需求需要复制 请求过来的一段密令(类似支付宝淘宝口令)到剪切板. pc端的文本复制到剪切板 如果是在pc端的话,可以直接使用原生js进行编写,代码如下: <textarea ...
- Vue.js中Twitter第三方登录api实现[亲测可用]
国际化的项目就会用用到一些第三方的登录api,这次记录一下 Twitter 的! 按步骤来: 要注册 Twitter 开发者账号,这个要申请,审核时间要好几天.不过国内的手机注册的几乎都过不了审核.看 ...
- vue 移动端PC端选用的ui框架
1.pc端的项目,最好的选择是ElementUI.(pc端) 一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.Element是饿了么前端开源维护的Vue UI组件库,更新频率 ...
- 手把手教你 Vue 服务端渲染
写在前面 在写这篇文章之前,我有写一篇 Vue 预渲染的教程 以及 在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
- vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
- Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
- html5 调用本地街景,H5案例分享:在移动端调用腾讯街景
在移动端调用腾讯街景 腾讯地图街景组件可以通过多种方式调起,来展示3D街景信息. 腾讯街景API,是构建在v2版本上的全新应用接口,对于目的地,可以让用户足不出户,得到更直观.更真切 的身临其境的体验 ...
最新文章
- 试编写一个汇编语言程序,要求从键盘接收一个四位的十六进制数,并在终端上显示与它等值的二进制数
- 批量探测工具fpingping常用命令集合大学霸IT达人
- 三星电子网络营销重拳出击芯片制造力求“差异化”取胜智能手机市场
- 网工路由基础(3)RIP原理与配置
- js 操作cookies 方法
- 拆包--缓冲区查找包头及包尾偏移
- Visual studio docker build no such file or directory
- UDS知识整理(二):UDS诊断服务简介
- 餐饮业实施5S管理的效益及实施方案
- 玩转电脑|电脑回收站还能这么玩,自定义图标让你的回收站与众不同
- oracle00312,ORA-00322 ORA-00312 恢复
- Xilinx FPGA嵌入式开发(一) - EDK及SDK部分术语
- 创建数据库失败((Microsoft.SqlServer.Smo))执行Transact-SQL语句或批处理时发生了异常。
- 解决hbase报错Master exiting
- 同余定理+前缀和解题技巧
- 阴冷的愚公和唐僧,大师强迫症
- 5W1H聊开源之Who——谁“发明”了开源?
- 阿里笔试测评考什么?
- Xray和burpsuite联动被动扫描
- 有效的休息方式,如何休息才不会更疲惫