Small micro-channel program authorized login for user information and mobile phone number
-
Many do not look at the total number of documents wonderful idea, a small program you can directly obtain user information, the applet can get the phone number directly Mody
The answer is no
announcement address
Small micro-channel program, and gradually optimized to the user's personal privacy, so remember to consider the development of this point, all the user needs to obtain information privacy still need permission from the user's manual, including information, phone number, and user location, etc., need to open the appropriate permissions, formerly with the api calls, and now basically in the button to call the assembly,
-
It can now forced landing,
What is forced landing, is the first user to enter a start page is a small program login page, while not landing can not enter the body to a small program, which is called forced login,
In the updated 2019 of September 1, the ban on small programs forced login, simply put, is to start page can not be a landing page, and allows users to browse some pages, you can allow users to my in which you log in, or let Some need to login permissions page, click to jump to log on this is reasonable.
3. entry process
Show
As shown above, we first click the Authorize button, pop-up box bomb obtain user information, and then in the pop-up box to get his playing phone, click on the pop-up box bomb obtain authorization phone number, then that is passed to the background, to obtain login information
See figure not used, a little basic and beginner Mongolia circle, the whole process is set forth above, the front end to do roughly the following code is mpvue of,
The first step is to get through wx.login code this code, is to give back in return for the WeChat server login credentials, is a temporary token micro-letter
Normally, after the successful landing we will store user information and token to storage so we generally will first determine whether the token is stored locally,
There directly to the home page
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
}
}
})
}
},
After getting the above-described process operation code
The second step is to get through the button component user information, there are button assembly document address above, open-type button represents the ability to open,
Automatically invoking authorization bomb blocks, events getuserinfo binding, automatically descendant of a parameter, which contains some user information includes encryptedData, iv and other sensitive information, can be used to get unionId, then you can get to the user information stored locally
<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
}
}
},
To the user's mobile phone number to obtain a third step by step through the button assembly
Here is the same as above and precautions, after obtaining the information here will have a encryptedData, iv; for background parsing phone number is not the same as above getUserInfo acquired, note the difference
<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);
}
}
}
The final step will be to obtain the above data to their own background, the background will store the returned token to a local, after carrying the request on the token can be.
// 请求后获取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("获取失败")
}
},
See the complete code Bowen
Small micro-channel application development mpvue achieve unauthorized access
