接下来会陆续更新 小程序、h5公众号、支付宝(可能) ,只要涉及到的使用uniApp登录的业务,都会记录在登录篇中,不定期更新。
第一步:通过uni.login 获取CODE 回传给服务器 需要服务器端提供一个接口
因为很多地方要使用 所以我封装了一下 并且挂载到了vue的原型
//微信静默获取Code并返回
V_Proto.$getCodeWx = async function() {
//这个函数会返回一个CODE 是通过uni.login得到的 如果没有获取到则会返回false
let that = this;
let [err, res] = await uni.login({
provider: 'weixin'
})
if (res) {
return res
}
return false
}
第二步 获取Token (后端自定义的登录态)
//有了CODE后 可以调取接口 后端可以通过CODE 获取到用户的基础信息 (不包含头像和昵称)
//此时的登录是静默的 用户无感知的
//写一个方法挂载到全局 多处需要用到的时候方便调用
//小程序完整登录流程
V_Proto.$WxMpLogin = async function() {
//尝试抛出错误
try {
let that = this;
//拿到lifeData 持久化保存数据体
let lifeData = uni.getStorageSync('lifeData');
//如果local中不存在Token 和用户完整信息 则重新登录并且授权
if (!lifeData.vuex_Token||!lifeData.vuex_userInfoAuth) {
let result = await that.$getCodeWx(); //静默登录Code拿取
//Code为正常 则执行下一步获取用户授权
if (result) {
getToken({
code: result.code
}).then(res => {
that.$u.vuex('vuex_Token', res.data.result.userToken); //Token存入local且存入全局配置Com用于调用Api
com.userToken = res.data.result.userToken;
//开始请求用户授权 将昵称头像进行获取
this.$getWxInfo();
})
}
}else{
//否则Token存在且用户信息也完整的话 将com的userToken保持和local同步
com.userToken = lifeData.vuex_Token;
console.log(com,'保持登录态')
}
} catch (e) {
console.log(e, '尝试获取微信小程序登录失效..')
}
}
//第三步 在获取了Token之后我们需要调用提前封装好的获取用户头像和信息的方法
//同样 挂载到vue上
//弹出窗口并请求用户授权拿取头像昵称
V_Proto.$getWxInfo = function() {
let that = this;
uni.showModal({
title: '温馨提示',
content: '请您授权微信登录后,才能正常使用小程序功能',
success:res => {
if (res.confirm) {
console.log('用户1次授权同意')
uni.getUserProfile({
desc: '获取您的昵称、头像、地区及性别',
success(info) {
getWxInfo(info).then(res=>{
if(res.data.code==200){
//返回正常则将完整信息包含用户头像和名称进行存入
that.$u.vuex('vuex_userInfoAuth',res.data.result);
}else{
console.log(res,'请求获取用户头像信息失败')
}
})
},
fail(err) {
console.log(err,'用户取消授权');
}
})
console.log(res,'详细的用户信息')
} else if (res.cancel) {
//如果用户点击了取消按钮
console.log('用户1次授权取消');
uni.showToast({
title: '您已取消授权!',
icon: 'error',
duration: 2000
});
}
}
})
}
//这是二次封装的接口请求 以及需要传递的参数
//comParams 是我全局引用的配置参数 会跟随Token变化而改变值
//根据iv 和二次授权 获取微信个人用户基本信息 不包含手机号
export function getWxInfo(data){
return http.get('接口路径后端给你的',{
params:{
userToken:comParams.userToken,
encryptedData:data.encryptedData,
iv:data.iv,
}
})
}
//根据iv 和二次授权 获取微信个人用户基本信息 包含手机号
export function getPhoneWxInfo(data){
return http.get('接口路径后端给你的 由后端拿到你传递的数据进行解密',{
params:{
userToken:comParams.userToken,
encryptedData:data.encryptedData,
iv:data.iv,
}
})
}
以上三步做完 基本上已经拿到了用户的Token 头像 昵称 等信息
//第四步 引导用户获取手机号 并根据业务 是直接绑定 还是获取短信认证后 再进行绑定
//我这边业务是获取到绑定手机号 将手机号帮用户输入在input中 用户点击获取验证码 再绑定手机号
//首先需要一个button 按钮在页面上引导用户进行点击 绑定手机
<button class="bindPhone-btn" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber"></button>
//注意 必须是button 按钮 但是当然 他会很丑 所以需要你自己写class 完善成你需要的样子
//我这边是改变了他的背景图 将他的边线 去掉了 否则会很难看 去边线的CSS代码如下
//CSS - >
.bindPhone-btn::after{
border: none !important;
}
//用户点击后 触发 onGetPhoneNumber 也会触发小程序的获取手机号弹窗 用户点击确认和拒绝 都有回调
//JS - >
onGetPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
console.log("用户点击了接受")
console.log(e.detail);
//用户点击接受后 你会拿到和之前获取基本信息一样的iv 和en 几个参数 传递给后端,后端调取微信官方的接口并且进行解密 再回传手机号到前台
getPhoneWxInfo(e.detail).then(res=>{
console.log(res,'获取到的手机号');
if(res.data.result){
//如果接口成功返回了手机号 执行你需要的逻辑
}else{
console.log(res,'获取绑定的手机号失败my.js')
}
})
} else {
console.log("用户拒绝了获取手机号!")
}
},
再来几张效果图
以上差不多就是登录到获取手机号 到绑定的流程了 。我也是第一次做,后续有任何问题会及时更新。希望能帮到大家。