国外网站建设素材,专业网站设计企业,怎么把模板导入wordpress,传媒网站模板说明
前提资料准备
在QQ互联中心注册成为开发者 站点#xff1a;https://connect.qq.com/创建应用#xff0c;如图
js sdk方式
下载对应的sdk包
sdk下载#xff1a;https://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd
使用
下载离线js sdk
打开#xff1a;https:…说明
前提资料准备
在QQ互联中心注册成为开发者 站点https://connect.qq.com/创建应用如图
js sdk方式
下载对应的sdk包
sdk下载https://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd
使用
下载离线js sdk
打开https://connect.qq.com/qc_jssdk.js 复制打开的内容在本地新建一个jssdk.js文件粘贴到新建的js文件中
复制打开的内容 粘贴到文件 移入/导入项目中修改jssdk.js文件内容原文件是没有export 导出的 文件头的 var 修改为 const 添加接收函数用于导出 默认的 修改后的文件尾添加导出
项目中使用
封装QQ授权登录ts代码 文件名auth_login.ts import QC from ./jssdk // 修改过后的sdk文件const qqLogin async () {QC.Login.showPopup({appId: 申请的appid,redirectURI: 申请填写的回调地址, //登录成功后会自动跳往该地址})
}export default {qqLogin,
}调起QQ授权登录 在vue文件中使用登录页代码
templatediv classloginimg stylemargin-left: 15px; width: 30px; height: 30px; cursor: pointer clickqqLogin() src../../assets/images/qq.png //div
/templatescript langts setup
import authLogin from ../../utils/qq/auth_login
/*** qq授权登录*/
const qqLogin () {authLogin.qqLogin()
}
/script授权登录页面效果图 点击QQ图片调用QQ授权登录 点击后效果(图片违规真烦)
api方式
说明
不需要引入jssdk包了使用windows.open方式打开以下链接
https://graph.qq.com/oauth2.0/show?whichLogindisplaypc
client_id申请的appid
response_typetoken
scopeall
redirect_uri申请的时填写的回调地址使用
登录页与js sdk方式中的一致调整封装的QQ授权登录的 auth_login.ts 的内容const qqLogin async () {
// 获取宽度
let width document.body.clientWidth / 3
// 获取高度
let height document.body.clientHeight / 2
height height 400 ? 400 : height
width width 500 ? 500 : width
// 顶部偏移量
let top document.body.clientHeight / 4let newPage window.open(https://graph.qq.com/oauth2.0/show?whichLogindisplaypcclient_id申请的appidresponse_typetokenscopeallredirect_uri申请时填写的回调地址,_blank, // 打开新窗口locationyes, width width , height height ,top top ,left width, // 新窗口的位置大小
)
}
export default {qqLogin,
} QQ授权登录效果
