使用uniapp開發(fā)跨平臺app, 難免會涉及第三方賬號授權(quán)登錄
本文主要使用uni.login API實(shí)現(xiàn)第三方登錄, H5上的授權(quán)登錄, uniapp未封裝
平臺差異說明
image
頁面代碼
<view class="auth">
<!-- #ifdef APP-PLUS -->
// 條件編譯, 代碼只有在app內(nèi)才生效
<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 -->
// 條件編譯, 代碼只有在微信小程序內(nèi)才生效
<image src="../../static/icos/weixin.png" @click="weixinLogin"></image>
<!-- #endif -->
</view>
在methods內(nèi)處理點(diǎn)擊事件
methods: {
auth(e) {
let loginType = e.currentTarget.dataset.logintype
// 獲得定義在image標(biāo)簽上的logintype屬性, 屬性取值只能使用小寫
// 授權(quán)登錄
uni.login({
provider: loginType,
// 給provider傳入不同的值, 調(diào)用不同的應(yīng)用登陸接口
success(res) {
// 登錄成功后, 獲取用戶數(shù)據(jù)
uni.getUserInfo({
provider: loginType,
success(e) {
console.log(JSON.stringify(e.userInfo));
// 返回的數(shù)據(jù)是json格式
}
})
}
}
provider 在不同服務(wù)類型下可能的取值說明 文檔
image
微信,qq,微博三大平臺返回的字段不同, 需要進(jìn)行處理
auth(e) {
let loginType = e.currentTarget.dataset.logintype
uni.login({
provider: loginType,
success(res) {
// 登錄成功后, 獲取用戶數(shù)據(jù)
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
}
}
})
}
})
}
最后把獲取到的用戶數(shù)據(jù)傳遞給后端, 后端綁定用戶信息
