微信小程序授权登录 获取用户信息与手机号
-
很多不看文档的总有一些奇葩想法，小程序能直接获取用户信息吗，小程序能直接获取手机号么
答案是no
公告地址
微信小程序，逐渐向用户个人隐私保护上优化，所以开发记住考虑这点，一切需要获取用户个人隐私的信息都需要得到用户的手动的许可，包括 信息，手机号，和用户位置等等，都需要开启相应的权限，以前是用api调用，现在基本都在button组件来调用，
-
现在还能强制登陆吗，
什么是强制登陆，就是用户进入小程序的第一个启动页面就是登录页，同时，不登陆就无法进入到小程序主体，这就叫做强制登录，
在2019年的9月1日更新中，就禁止小程序强制登录，简单说，就是启动页不能是登陆页面，同时可以让用户浏览一些页面，你可以让用户在我的中自己登录，或者让一些需要登陆权限的页面，点击后跳转到登录这样是合理的。
3.登陆流程
演示
如上图，我们先点击授权按钮，弹出获取用户信息的弹框，然后在弹出自己的弹框用于获取手机，点击后弹出获取手机号的授权弹框，之后就是传给后台，获取的登陆信息
看到上图没用过的，和初学者基本有点蒙圈，上面是阐述的整个流程，前端做的大致如下代码是mpvue的，
第一步先通过wx.login获取到code这个code，是给后台换取微信服务器登陆凭证的，就是微信的临时token
正常情况，我们登陆成功后是会存储用户信息和token到storage 所以我们一般会先判断本地是否存储着token，
有就直接到首页
login() {
let me = this
let obj = wx.getStorageSync('USER_INFO')
console.log(obj, 'USER_INFOUSER_INFO')
if (obj) {
wx.switchTab({ url: "/home/main" })
} else {
wx.login({
success (res) {
if (res.code) {
me.code = res.code
}
}
})
}
},
拿到code后按上述流程操作
第二步通过button组件的获取到用户信息， 上面有button组件文档地址，open-type代表着button的开放能力，
会自动调起，授权弹框，getuserinfo 绑定的事件，会自动传人一个参数，里面包含了，用户的一些信息包含encryptedData, iv 等敏感信息 ，可以用于拿到unionId，这时可以把获取到的用户信息存到本地
<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">确认授权</button>
// 调用授权页面
bindGetUserInfo(e) {
if (!this.cancelAuth) {
this.isPone = true//显示自定义的获取手机权限提示框
}
wx.setStorageSync('USER_MSG', JSON.stringify(e.mp.detail.userInfo))
console.log(e)
if (e.mp.detail.userInfo) {
this.params = {
code: this.code,
name: e.mp.detail.userInfo.nickName,
userIcon: e.mp.detail.userInfo.avatarUrl,
}
} else {
// 用户按了拒绝按钮
this.cancelAuth = true
}
}
},
第三步步通过button组件的获取到用户的手机号码
和上述一样 这里有个注意事项，这里获取到信息后也会有个encryptedData, iv ；用于后台解析电话号码，与上面getUserInfo获取的并非相同，注意区别
<div v-if="isPone" class="alert" >
<div class="auth">
<div class="apply">
<span class="">需要获取您的手机权限</span>
<p>(请开启手机权限)</p>
</div>
<button class="confirm" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button>
</div>
</div>
/*js*/
getPhoneNumber(e) {
console.log(e)
if (e.mp.detail.errMsg==="getPhoneNumber:ok") {
this.isPone = false
this.params.iv = e.mp.detail.iv
this.params.encryptedData = e.mp.detail.encryptedData
console.log(this.params)
this.getTokenAsync(this.params)
}
},
/*scss*/
.alert{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
outline: 0;
-webkit-overflow-scrolling: touch;
background-color: rgb(0, 0, 0);
filter: alpha(opacity=60);
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
.auth{
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 340rpx;
border-radius: 20rpx;
transform:translate(-50%,-50%);
background: #fff;
display: flex;
flex-direction: column;
.apply{
margin: 0rpx auto;
padding: 60rpx 40rpx;
flex:1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-size: 34rpx;
color:rgb(34,34,34);
p{
font-size:30rpx
}
}
.confirm{
border-top: 1rpx solid rgb(221,221,221);
text-align: center;
height: 100rpx;
width: 100%;
line-height: 100rpx;
font-size: 34rpx;
color:rgb(255,145,37);
}
}
}
最后一步，将上面获取的数据传给自己的后台，将后台返回的token存储到本地，之后在请求中携带上token即可。
// 请求后获取token
async getTokenAsync(params) {
let res = await getToken(params)
if (res.success) {
wx.setStorageSync('USER_INFO', JSON.stringify(res.data))
wx.switchTab({ url: "/home" })
} else {
console.log("获取失败")
}
},
完整代码请查看博文
