使用uniapp开发app,难免涉及到第三方账号登录
使用uni.log
inAPI实现第三方登录
两个界面
login.vue
登录界面my.vue
我的界面,存放校验登录的函数
my.vue
页面
- 如果登录过,不跳转,直接
return
- 如果没有登录过,就跳转到login.vue 并携带两个参数(登录成功之后的跳转界面,跳转方式)
<script>
var loginRes;
export default {
onLoad:function(){
loginRes = this.checkLogin('../my/my', '2');
if(!loginRes){
return;
}
}
}
</script>
login.vue
页面
- 用到了三个方法
uni.login()
登录方法uni.getUserInfo()
获取用的信息方法uni.request()
请求数据的方法
<script>
var _self;
export default {
data() {
return {
backpage:'',
backtype:''
};
},
onLoad:function(options){
_self = this;
uni.login({
success: (res) => {
uni.getUserInfo({
success: (info) => {
uni.request({
url: _self.apiServer+'member&m=login',
method: 'POST',
header: {'content-type' : "application/x-www-form-urlencoded"},
data: {
openid: info.userInfo.openId,
name: info.userInfo.nickName,
face: info.userInfo.avatarUrl,
},
success: res => {
console.log(JSON.stringify(res))
res = res.data;
if(res.status == 'ok'){
uni.showToast({
title: '登陆成功',
mask: false,
duration: 1500
});
uni.setStorageSync('SUID' , res.data.u_id + '');
uni.setStorageSync('SRAND', res.data.u_random + '');
uni.setStorageSync('SNAME', res.data.u_name + '');
uni.setStorageSync('SFACE', res.data.u_face + '');
if(options.backtype == '1'){
uni.redirectTo({url:options.backpage});
}else{
uni.switchTab({url:options.backpage});
}
}else{
uni.showToast({title:res.data});
}
},
fail: () => {
console.log('登陆失败')
},
complete: () => {}
});
},
fail: () => {
uni.showToast({title:"微信登录授权失败"});
}
})
},
fail: () => {
uni.showToast({title:"微信登录授权失败"});
}
})
console.log(options)
}
}
</script>
解释
uni.login
- 用于触发第三方登录,掉漆微信登录,登录成功之后返回对象格式如下
{
"code":"***",
"authResult":{
"openid":"***",
"scope":"snsapi_userinfo",
"refresh_token":"**",
"code":"****",
"unionid":"***",
"access_token":"***",
"expires_in":7200
},
"errMsg":"login:ok"
}
uni.getUserInfo
- 获取用户信息,通过上方的
uni.login
方法会得到用户assess_token
,古 uni.getUserInfo
在此基础上获取的用户信息openid
,userInfo
(头像,昵称)等信息
{
"errMsg":"getUserInfo:ok",
"rawData":"..."
"userInfo":{
"openId":"***",
"nickName":"***",
"gender":1,
"city":"Xi'an",
"province":"Shaanxi",
"country":"China",
"avatarUrl":"头像",
"unionId":"oU5xxxxxxxxxxeLfFPqxo"
},
"signature":""
}
uni.request
- 次方法uni-app中用于网络请求,详情见官方手册:uni.request