admin管理员组文章数量:1633029
目录
1. 微信登录
2. QQ登录
1. 微信登录
官方文档地址:网页授权 | 微信开放文档
点击微信登录触发事件后,会跳转到微信授权页面,授权成功后页面自动跳转到回调地址页面,需在微信公众平台配置地址
// 微信登录
wxLogin() {
let url = 'https://open.weixin.qq/connect/qrconnect?appid=自己的appid&redirect_uri=http://回调地址(微信公众平台配好)&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
window.location.href = url
},
授权成功后回调页面的地址上会携带code,在回调页面上进行操作,截取code作为参数调用后台接口
// 获取code登录
getLogin() {
// 判断是否登录过
let userdata = {}
if (localStorage.getItem('userdata')) {
userdata = JSON.parse(localStorage.getItem('userdata'))
}
if (userdata.id) {
return false
}
let code = this.getUrlCode().code; //是否存在code
// 微信登录
if (code) {
// 拿到code 调用后台接口进行操作
}
},
2. QQ登录
官方文档地址:放置“QQ登录”按钮_OAuth2.0 — QQ互联WIKI
在这里添加脚本
<script type="text/javascript" src="http://qzonestyle.gtimg/qzone/openapi/qc_loader.js" charset="utf-8"></script>
QQ登录事件触发调起qq登录页面,授权登录成功会自动跳到回调地址, 需要在QQ互联上配好地址
/*qq登录按钮点击*/
qqdl() {
this.$nextTick(() => {
QC.Login.showPopup({
appId: "123456",
redirectURI: "http:回调地址", //登录成功后会自动跳往该地址
});
});
},
授权成功后回调页面的地址上会携带accessToken,在回调页面上截取后跟后台交互完成登录
// qq登录
let accessToken = ''
console.log('href--accessToken', accessToken);
if (location.href.split('access_token=')[1]) {
accessToken = location.href.split('access_token=')[1].split('&')[0]
}
if (accessToken) {
拿到accessToken后作为参数给后台接口请求登录
}
版权声明:本文标题:PC端 微信登陆 + qq登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729147890a1187845.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论