uniapp微信登录之app和微信小程序登录
以下介绍app微信登录和微信小程序登录,其他平台根据需求处理。
欢迎指教~
效果图
官方文档
前提
需要相关配置
方式一: 常用方式
<button class="" @click="weixinOauthByLogin">微信授权登录</button>
说明:
-
获取
服务供应商
-
调用
登录
api -
发送请求【因不同平台返回数据不一样,可以和后端商量具体传参,再根据实际来处理】
<script>
export default {
methods: {
/**
* 微信授权登录
*/
weixinOauthByLogin() {
uni.getProvider({
service: 'oauth',
success: (res) => {
console.log(res.provider);
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: (loginRes) => {
console.log('获取登录信息', loginRes);
//------- 以下根据实际需求处理 以下仅参考 --------
// #ifdef APP-PLUS
uni.getUserInfo({
success: (resInfo) => {
console.log(resInfo);
/**
* 发送请求,这里具体传参根据实际需求处理
*/
this.queryUserInfo(resInfo)
},
fail: (error) => {
console.log(error)
}
})
// #endif
// #ifdef MP-WEIXIN
this.queryUserInfo(loginRes.code)
// #endif
},
complete: (error) => {
console.log(error)
}
})
}
}
})
},
/**
* 发送请求,仅供参考
*
*/
queryUserInfo(data) {
uni.request({
url: 'https://xxx/api/account/minilogin',
method: 'POST',
data: {
// #ifdef APP-PLUS
openid: data.authResult.openid
// #endif
// #ifdef MP-WEIXIN
code: data
// #endif
},
success: (res) => {
console.log('=====request=====>', res);
if (res.data.code !== 200) {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
return;
}
// 发送请求成功, 根据实际需求处理
uni.showToast({
title: '登录成功'
})
},
fail: (error) => {
console.log('请求接口失败', error)
}
})
},
}
}
</script>
注意:
-
uni.getUserInfo
微信小程序端,在用户未授权过的情况下调用此接口,不会出现授权弹窗,会直接进入fail
回调。在用户已授权的情况下调用此接口,可成功获取用户信息。 -
微信小程序端 如果需要
用户信息
,可以通过:
- 发送请求登录成功让后端返回相关信息
- 通过
getuserinfo
获取【文章有介绍】
uni.login
在微信小程序
平台返回是code
值,App
中返回有authResult
中登录信息【authResult登录服务商提供的登录信息,服务商不同返回的结果不完全相同】 如下图- 微信小程序
- APP端
方式二: 结合html5+相关方法实现
仅供参考: 这里代码看起来比较多, 如果只实现微信登录可进行删减, 根据实际需求优化。
- 结合
html5+
中的OAuth
模块管理客户端的相关用户登录授权方法。 - 下面实现
APP
及微信小程序
微信登录,通过得到code
发送给后端
<button type="primary" class="button" v-for="(value, index) in providerListPlus" @click="loginByWeixin(value.value)" :key="index">{{value.value}} login</button>
说明:
getServices()
获取登录授权认证服务列表initProvider()
获取服务供应商- 微信授权相关api调用
- 如果只实现
微信登录
,可以删减下面相关代码。【此方式比较适合多个平台处理】
<script>
let weixinAuthService
export default {
data() {
providerListPlus: [],
},
onLoad() {
// #ifdef APP-PLUS
this.getServices();
// #endif
},
onReady() {
this.initProvider();
},
methods: {
/**
* 获取登录授权认证服务列表
*/
getServices() {
plus.oauth.getServices((services) => {
weixinAuthService = services.find((service) => {
return service.id === 'weixin'
})
if (weixinAuthService) {
this.hasWeixinAuth = true
}
});
},
/**
* 获取服务供应商
*/
initProvider() {
// 根据个人需求配置
const filters = ['weixin', 'qq', 'sinaweibo', 'alipay', 'toutiao'];
uni.getProvider({
service: 'oauth',
success: (res) => {
if (res.provider && res.provider.length) {
for (let i = 0; i < res.provider.length; i++) {
if (~filters.indexOf(res.provider[i])) {
this.providerListPlus.push({
value: res.provider[i], // weixin...
});
}
}
this.hasProvider = true;
}
},
fail: (err) => {
console.error('获取服务供应商失败:' + JSON.stringify(err));
}
});
},
/**
* 微信登录事件
*/
loginByWeixin(value) {
this.oauth(value).then((code) => {
console.log('oauth===code=======》', code)
// 方式一: 如果服务端使用uniCloud,请查看 https://uniapp.dcloud.io/api/plugins/login?id=login
// 方式二: 把得到的code, 发送给后端
return new Promise((resolve, reject) => {
// 这里测试,请求方法未封装
uni.request({
url: 'https://xxx.com/api/minilogin',
method: 'POST',
data: {
code: code
},
success: (res) => {
console.log('=====request=====>', res);
resolve(res);
},
fail: (error) => {
console.log('请求接口失败', error)
reject(new Error('请求接口失败'))
}
})
})
}).then((res) => {
console.log('oauth==then==res=======>', res)
if (res.data.code !== 200) {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
return;
}
// 请求接口成功 根据需求处理数据
uni.showToast({
title: '登录成功'
})
}).catch((e) => {
console.error(e)
uni.showModal({
showCancel: false,
content: '微信登录失败,请稍后再试'
})
})
},
/**
* 根据不同平台 处理微信登录逻辑
*/
oauth(value) {
// 如果当前操作不是 weixin
if (value !== 'weixin') {
uni.login({
provider: value,
success: (res) => {
uni.getUserInfo({
provider: value,
success: (infoRes) => {
/**
* 获取用户信息后,将信息发送给服务端。
* 根据需要处理
*/
},
fail() {
uni.showToast({
icon: 'none',
title: '登陆失败'
});
}
});
},
fail: (err) => {
console.error('授权登录失败:' + JSON.stringify(err));
}
});
return;
}
/**
* 根据需求来处理
* 下面处理 app-plus 及 weixin
*/
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
weixinAuthService.authorize(function(res) {
console.log('========authorize success======', res)
resolve(res.code)
}, function(err) {
console.error(err)
reject(new Error('微信登录失败'))
});
// #endif
// #ifdef MP-WEIXIN
uni.login({
provider: value,
success: (res) => {
console.log('授权登录成功--得到code-->', res.code)
// 如需要获取用户信息 调用 uni.getUserInfo({})
resolve(res.code)
},
fail: (error) => {
console.error('授权登录失败:' + JSON.stringify(err));
reject(new Error('微信登录失败'))
}
})
// #endif
})
}
}
}
</script>
微信小程序直接获取用户信息
-
可通过
getUserInfo
获取用户信息 -
withCredentials
是否带上登录态信息
<button open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">直接获取用户信息</button>
<script>
export default {
data() {
return {
loginCode: [], // code
}
},
onLoad() {
// 获取登录code
this.getLoginCode();
},
methods: {
/**
* 微信小程序 获取用户信息
*/
getUserInfo({ detail }) {
console.log('-----getUserInfo-------->', detail)
if (detail.userInfo) {
/**
* 发送请求
*/
this.queryUserInfo(this.loginCode, detail)
} else {
uni.showToast({
title: '登录失败',
icon: 'none'
})
}
},
/**
* 获取登录code
*/
getLoginCode() {
uni.login({
success: (res) => {
console.log(res)
this.loginCode = res.code;
},
fail: (error) => {
console.log(error)
}
})
}
}
}
</script>
返回数据效果图
获取所有服务供应商
- 根据在
manifest
中配置相关模块和SDK信息,运行时就能得到相应的服务供应商。
<button type="primary" class="button" v-for="(value, key) in providerList" @click="tologin(value)" :key="key">{{value.name}}</button>
<script>
export default {
data() {
return {
providerList: []
}
},
onLoad() {
this.getProvider();
},
methods: {
/**
* 获取服务供应商
*/
getProvider() {
uni.getProvider({
service: 'oauth',
success: (result) => {
this.providerList = result.provider.map((value) => {
let providerName = '';
switch (value) {
case 'weixin':
providerName = '微信登录'
break;
case 'qq':
providerName = 'QQ登录'
break;
case 'sinaweibo':
providerName = '新浪微博登录'
break;
case 'xiaomi':
providerName = '小米登录'
break;
case 'alipay':
providerName = '支付宝登录'
break;
case 'baidu':
providerName = '百度登录'
break;
case 'toutiao':
providerName = '头条登录'
break;
case 'apple':
providerName = '苹果登录'
break;
}
return {
name: providerName,
id: value
}
});
},
fail: (error) => {
console.log('获取登录通道失败', error);
}
});
},
}
}
</script>