使用uniapp开发跨平台app, 难免会涉及第三方账号授权登录
本文主要使用uni.login API实现第三方登录, H5上的授权登录, uniapp未封装
平台差异说明
image
页面代码
<view class="auth">
<!-- #ifdef APP-PLUS -->
// 条件编译, 代码只有在app内才生效
<image src="../../static/icos/weixin.png" data-loginType="weixin" @click="auth"></image>
<image src="../../static/icos/QQ.png" data-loginType="qq" @click="auth"></image>
<image src="../../static/icos/weibo.png" data-loginType="sinaweibo" @click="auth"></image>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
// 条件编译, 代码只有在微信小程序内才生效
<image src="../../static/icos/weixin.png" @click="weixinLogin"></image>
<!-- #endif -->
</view>
在methods内处理点击事件
methods: {
auth(e) {
let loginType = e.currentTarget.dataset.logintype
// 获得定义在image标签上的logintype属性, 属性取值只能使用小写
// 授权登录
uni.login({
provider: loginType,
// 给provider传入不同的值, 调用不同的应用登陆接口
success(res) {
// 登录成功后, 获取用户数据
uni.getUserInfo({
provider: loginType,
success(e) {
console.log(JSON.stringify(e.userInfo));
// 返回的数据是json格式
}
})
}
}
provider 在不同服务类型下可能的取值说明 文档
image
微信,qq,微博三大平台返回的字段不同, 需要进行处理
auth(e) {
let loginType = e.currentTarget.dataset.logintype
uni.login({
provider: loginType,
success(res) {
// 登录成功后, 获取用户数据
uni.getUserInfo({
provider: loginType,
success(info) {
var userInfo = info.userInfo
var nickName = ""
var avatarUrl = ""
var openId = ""
if (loginType == "weixin") {
nickName = userInfo.nickName
avatarUrl = userInfo.avatarUrl
openId = userInfo.openId
} else if (loginType == "qq") {
nickName = userInfo.nickname
avatarUrl = userInfo.figureurl_qq_2
// qq返回了多个尺寸的头像, 按需选择
openId = userInfo.openId
}else if (loginType == "sinaweibo") {
nickName = userInfo.nickname
avatarUrl = userInfo.avatar_large
openId = userInfo.id
}
}
})
}
})
}
最后把获取到的用户数据传递给后端, 后端绑定用户信息
