The SDK related to App login needs to be configured in the manifest:
Open manifest.json -> App module permission configuration and check OAuth (login authentication).
Open manifest.json -> App SDK configuration, check the login authentication. There are blue links in the description, including links to apply for SDKs on platforms such as WeChat, QQ, and Weibo.
After applying for sdk information to WeChat, QQ, Weibo and other platforms, backfill it in the manifest.
These configurations need to be packaged to take effect. The real machine operation is still the settings of the HBuilder base, and a custom base package can be used. For offline packaging, please refer to the offline packaging document for configuration in the native project.
After configuration and packaging, the configuration result list can be obtained through uni.getProvider. Note that what is returned here is the configuration of the manifest, and it has nothing to do with whether WeChat, QQ, and Weibo are installed on the mobile phone.
If QQ and Weibo are not installed on the mobile phone, the wap page login of these platforms will be launched when calling, and their client login will be launched if the corresponding client is installed.
APP WeChat authorized login
uni.login({
provider: 'weixin',
success: res => {
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
let formdata = {
nickName: infoRes.userInfo.nickName,
gender: infoRes.userInfo.gender,
headImgUrl: infoRes.userInfo.avatarUrl,
openId: infoRes.userInfo.openId,
unionId: infoRes.userInfo.unionId
};
uni.request({
url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
method: 'POST',
data: formdata,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
if (res.data.code != 200) {
uni.showToast({
title: res.data.err,
duration: 3000,
icon: 'none'
});
return false;
} else {
//登录成功处理
uni.showToast({
title: res.data.message,
duration: 3000,
icon: 'none'
});
let ticket = res.data.ticket;
uni.setStorageSync('ticket', ticket);
uni.reLaunch({
url: '../my/my'
});
return true;
}
}
});
}
});
},
fail: err => {
uni.showToast({
title: '请求出错啦！',
icon: 'none',
duration: 3000
});
}
});
The backend directly judges the uniqueness of the user based on the unionId.
APPQQ authorized login
uni.login({
provider: 'qq',
success: resp => {
var access_token = resp.authResult.access_token;
uni.getUserInfo({
provider: 'qq',
success: function(infoRes) {
var formdata = {
nickName: infoRes.userInfo.nickname,
gender: infoRes.userInfo.gender == '男' ? 1 : 2,
headImgUrl: infoRes.userInfo.figureurl_qq_2,
openId: infoRes.userInfo.openId,
access_token: access_token
};
uni.request({
url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
method: 'POST',
data: formdata,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
if (res.data.code != 200) {
uni.showToast({
title: res.data.err,
duration: 3000,
icon: 'none'
});
return false;
} else {
//登录成功处理
uni.showToast({
title: res.data.message,
duration: 3000,
icon: 'none'
});
let ticket = res.data.ticket;
uni.setStorageSync('ticket', ticket);
uni.reLaunch({
url: '../my/my'
});
return true;
}
}
});
}
});
},
fail: err => {
uni.showToast({
title: '请求出错啦！',
icon: 'none',
duration: 3000
});
}
});
The backend directly judges the uniqueness of the user based on the access_token.
The above shows are the most important code, you can copy it and use it, you can add some loading and display yourself.
The full version of uni-app realizes the authorization qq, WeChat, and Weibo login code on the App side as follows:
<template>
<view class="flex align-center px-5 py-3">
<view class="flex-1 flex align-center justify-center" v-for="(item, index) in providerList" :key="index">
<view
:class="item.icon + ' ' + item.bgColor"
class="iconfont font-lg text-white flex align-center justify-center rounded-circle"
style="width: 100rpx;height: 100rpx;"
@click="thirdPartyLogin(index)"
></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
providerList: []
};
},
mounted() {
uni.getProvider({
service: 'oauth',
success: result => {
this.providerList = result.provider.map(value => {
let providerName = '';
let icon = '';
let bgColor = '';
switch (value) {
case 'weixin':
providerName = '微信登录';
icon = 'icon-weixin';
bgColor = 'bg-success';
break;
case 'qq':
providerName = 'QQ登录';
icon = 'icon-QQ';
bgColor = 'bg-primary';
break;
case 'sinaweibo':
providerName = '新浪微博登录';
icon = 'icon-xinlangweibo';
bgColor = 'bg-warning';
break;
}
return {
name: providerName,
id: value,
icon: icon,
bgColor: bgColor
};
});
},
fail: error => {
console.log('获取登录通道失败！', error);
return false;
}
});
},
methods: {
//第三方登录
thirdPartyLogin(index) {
if (index === '' || index === undefined || index === 'undefined') {
uni.showToast({
title: '参数错误，请联系管理员！',
icon: 'none',
duration: 3000
});
return false;
} else {
let loginType = '';
// 1 判断用户的登录类型
if (index == 0) {
loginType = 'weixin';
} else if (index == 1) {
loginType = 'qq';
} else if (index == 2) {
loginType = 'sinaweibo';
}
// 2 授权登录，弹出授权窗口
uni.login({
provider: loginType,
success: res => {
var access_token = '';
access_token = res.authResult.access_token;
// 3 授权登录成功以后，获取用户的信息
uni.getUserInfo({
provider: loginType,
success: function(infoRes) {
let formdata = {};
if (index == 0) {
formdata = {
nickName: infoRes.userInfo.nickName,
gender: infoRes.userInfo.gender,
headImgUrl: infoRes.userInfo.avatarUrl,
openId: infoRes.userInfo.openId,
unionId: infoRes.userInfo.unionId,
access_token: access_token,
appLoginType: 'WEIXIN'
};
} else if (index == 1) {
formdata = {
nickName: infoRes.userInfo.nickname,
gender: infoRes.userInfo.gender == '男' ? 1 : 2,
headImgUrl: infoRes.userInfo.figureurl_qq_2,
openId: infoRes.userInfo.openId,
unionId: '',
access_token: access_token,
appLoginType: 'QQ'
};
} else if (index == 2) {
formdata = {
nickName: infoRes.userInfo.nickname,
gender: infoRes.userInfo.gender == 'm' ? 1 : 2,
headImgUrl: infoRes.userInfo.avatar_large,
openId: infoRes.userInfo.id,
unionId: '',
access_token: access_token,
appLoginType: 'SINAWEIBO'
};
}
// 4 调用开发者后台，执行一键注册或登录
uni.request({
url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
method: 'POST',
data: formdata,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
if (res.data.code != 200) {
uni.showToast({
title: res.data.err,
duration: 3000,
icon: 'none'
});
return false;
} else {
//登录成功处理
uni.showToast({
title: res.data.message,
duration: 3000,
icon: 'none'
});
let ticket = res.data.ticket;
// 5 保存用户信息到全局的缓存中
uni.setStorageSync('ticket', ticket);
// 6 切换页面跳转，使用tab切换的api
uni.switchTab({
url: '../my/my'
});
return true;
}
}
});
}
});
},
fail: err => {
uni.showToast({
title: '请求出错啦！',
icon: 'none',
duration: 3000
});
}
});
}
}
}
};
</script>
<style></style>