微信小程序开发用户授权登录
微信官方的开放文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
说明:
小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器
开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
临时登录凭证code只能使用一次
OpenID:
在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID
1.1 普通用户的标识,对当前公众号唯一
1.2 不同的公众号,同一个用户,openid不同
unionid
同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。
也就是说:
如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。
实践方法
1、调用 wx.login 获取 code。
2、使用 wx.getSetting 获取用户的授权情况
2.1 如果用户已经授权,直接调用 API wx.getUserInfo 获取用户最新的信息;
2.2 用户未授权,在界面中显示一个按钮提示用户登入,当用户点击并授权后就获取到用户的最新信息。
3、将获取到的用户数据连同wx.login返回的code一同传给后端
import {
me,
xmini,
} from '../config/xmini';
import api from '../api/index';
import {
clone
} from '../utils/index';
const app = getApp();
module.exports = {
authCode: 0,
// 登录的逻辑
updatedAuthCode(callback) {
const that = this
wx.login({
success(auth) {
if (auth.code) {
console.log('auth code :', auth);
that.authCode = auth.code;
callback && callback.call(that, auth.code)
}
}
})
},
// 获取用户信息
getUserInfo(res) {
// 登录前,先清除下之前登录相关的缓存数据
app.clearUserInfo();
//这里是清除登录相关信息
xmini.store.dispatch('setUserInfo', {})
xmini.store.dispatch('setAddresses', []);
console.log(res)
const detail = res.detail;
console.log(detail)
if (detail.errMsg == 'getUserInfo:ok') {
console.log('xxxx')
wx.showLoading({
title: '登录中...',
})
this.postLogin({
data: {
code: this.authCode,
// userInfo: res.userInfo,
encryptedData: encodeURIComponent(detail.encryptedData),
iv: encodeURIComponent(detail.iv),
},
success: loginRes => {
//更新code
this.updatedAuthCode();
wx.hideLoading();
},
fail: loginErr => {
//
wx.showToast(loginErr.errmsg)
}
});
// })
} else {
// 失败!
if (detail.errMsg === 'getUserInfo:fail auth deny' || detail.errMsg === 'getUserInfo:fail:auth deny') {
// 获取用户信息授权失败,展示引导
wx.showModal({
title: '提示',
content: '需要你到授权,才能使用完整版的好食期',
confirmText: '知道了',
showCancel: false,
success(res) {
console.log(res)
}
});
}
}
},
getPhoneNumber(e) {
console.log('getPhoneNumber:', e)
if (e.detail.errMsg == 'getPhoneNumber:ok') {
// 更新code 解析手机号
wx.showLoading();
api.userAuthPrepose({
type: 2,
code: this.authCode,
encryptedData: encodeURIComponent(e.detail.encryptedData),
iv: encodeURIComponent(e.detail.iv),
}, (res) => {
//更新code
this.updatedAuthCode();
let userInfo = clone(xmini.store.state.user.userInfo)
userInfo.authPhone = true;
//这里更新存储的用户信息和地址
xmini.store.dispatch('setUserInfo', userInfo)
xmini.store.dispatch('setAddresses');
}, (err) => {
//更新code
this.updatedAuthCode();
console.log(err);
})
// })
}
},
postLogin({ data = {}, success, fail }){
const that = this;
api.login({
isLoading: false,
type: 2,
...data,
}, (res) => {
const { data } = res;
const userId = data.user_id;
// 更新code
that.updatedAuthCode()
// data.userId = userId;
if (userId) {
console.log('登录成功');
xmini.piwikUpdate({
isTrackWorking: true,
userId: data.user_id || '',
openId: data.wechat_open_id || '',
});
// data.authPhone=false; //!!test
// 更新store
xmini.store.dispatch('setUserInfo', data)
success && success.call(that, res);
} else {
wx.showToast('用户登录信息有误,请重新登录');
fail && fail.call(that, res);
}
//更新收货地址
xmini.store.dispatch('setAddresses');
}, (err) => {
// 更新code
that.updatedAuthCode()
//更新收货地址
xmini.store.dispatch('setAddresses');
fail && fail.call(that, err);
return true;
});
},
// 更新登录
updatedLogin({ success, fail}) {
const that = this;
// 获取 用户是否授过权
wx.getSetting({
success(res) {
console.log(res.authSetting)
// 判断权限
if (res.authSetting['scope.userInfo']) {
// 获取login code
that.updatedAuthCode((code) => {
console.log(code);
// 获取用户信息
wx.getUserInfo({
success(res) {
// console.log(res);
// 登录
that.postLogin({
data: {
code,
encryptedData: encodeURIComponent(res.encryptedData),
iv: encodeURIComponent(res.iv),
},
success: res => {
console.log(res);
success && success(res);
},
fail: err => {
// console.log(err);
fail && fail(err);
}
})
},
fail(err) {
fail && fail(err);
}
})
// end
})
// end
}
}
})
},
};
小结:在真实的业务场景中,我们希望,用户进入小程序时,未登录情况下可以正常浏览商品,对小程序有个基本的认知,不要直接弹出框要求用户授权,否则会干扰用户,导致新用户的流失,当用户需要使用一些高级功能和场景,这个时候再去要求用户授权,这样用户授权的几率会大大提高。