admin管理员组文章数量:1531966
第一步:参考文档:
- 准备工作(opens new window)
- QQ互联JS_SDK
由于域名是 www.corho 和 localhost 不一致 无法回调页面,需要再本地修改 hosts 地址
window
1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入 127.0.0.1 www.corho
3. 保存即可。
# 如果提示没有权限
1. 将hosts文件移到桌面,然后进行修改,确认保存。
2. 将桌面hosts文件替换c盘文件
mac OS
1. 打开命令行窗口
2. 输入:sudo vim /etc/hosts
3. 按下:i 键
4. 输入:127.0.0.1 www.corho.com
5. 按下:esc
6. 按下:shift + :
7. 输入:wq 回车即可
这样还是不行,vue cli 是不允许用 ip 访问项目,所以要开启 ip 或者域名 访问 webpack 服务器权限,在 vue.config.js 中
// 这个是给webpack-dev-server开启可IP和域名访问权限。
chainWebpack: config => {
config.devServer.disableHostCheck(true)
}
修改完以后,打开浏览器输入 www.corho:8080 就可以访问到项目了
第三步:处理QQ登录按钮:
- 在index.html添加
<script src="http://connect.qq/qc_jssdk.js" data-appid="xxxxxx" data-redirecturi="回退地址"></script>
2.在vue.config.js添加
# 因为我们是 直接引入的 script ,所以在 vue 中 直接 写 QC.login 会报错
# 所以,我们要 忽略 xxx 包,因为我们在 index.html 的 script 中导入了
# 这个是设置外部扩展,模块为qc变量名为QC,导入qc将不做打包。
configureWebpack: {
externals: {
qc: 'QC'
}
},
# 虽然 qc 不进行打包了,但是依旧能用 QC 这个变量
3.在 src/views/login.vue
import QC from 'qc'
<span id="qqLoginBtn"></span>
// onMounted(() => {
// // 组件渲染完毕,使用QC生成QQ登录按钮
// QC.Login({
// btnId: 'qqLoginBtn'
// })
// })
4 . 看页面生成QQ登录按钮,点击后新窗口打开,登录成功也无法跳转到登录页面窗口。
5 . 通过审查元素,找到跳转连接,自己来控制
<a href="https://graph.qq/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho%3A8080%2F%23%2Flogin%2Fcallback">
<img src="https://qzonestyle.gtimg/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
</a>
这样暂时就不需要在这个 .vue 文件中 导入 QC ,用 QC.Login
import QC from 'qc'
// 检查QQ是否登录 check() 返回 true 表示登录,false 表示没有
if (QC.Login.check()) {
// getMe 获取 openId
// QC.Login.getMe(function(openId, accessToken){})
// openId:用户身份的唯一标识。
QC.Login.getMe((openId) => {
// 业务 查看QQ 是否 捆绑 账号 等等~~~~~~
// 获取头像信息 等等
// QC.api(api, paras, fmt, method)
QC.api('get_user_info').success(res => {
avatar.value = res.data.figureurl_1
nickname.value = res.data.nickname
})
})
}
版权声明:本文标题:Vue 中调用 QQ官方的登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725272461a1015936.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论