小程序授权手机号跟button表单组件—小程序入门与实战【十六】

上一章节我们学习了小程序登录的部分流程,今天我们继续来把登录流程完善。

小程序客户端将获取到的微信用户绑定的手机号传给后端,返回给小程序客户端自定义登录状态 token

获取手机号

获取微信用户绑定的手机号,需先调用wx.login接口。

「请注意:」

需要用户主动触发才可以发起获取手机号接口,所以我们需要 button 组件的帮助。

button 组件

按钮,为表单组件。

常用属性:

  • open-type 微信开放能力,值为字符串。
    • getPhoneNumber  获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息。
    • getUserInfo 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息
    • share 触发用户转发
  • bindgetphonenumber 获取用户手机号回调
  • bindgetuserinfo 用户点击该按钮时,会返回获取到的用户信息

上面的属性一定要了解,这些我们后面全都会用到的。

使用方法
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

将 button 组件 open-type 的值设置为 getPhoneNumber

当用户点击同意之后,我们就可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据,然后我们将加密数据返回给后端,让后端去进行解密获取手机号。

「注意」

在回调中调用 wx.login登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。

bindgetphonenumber()回调函数
getPhoneNumber (e) {
   console.log(e.detail.errMsg)
   console.log(e.detail.iv)
   console.log(e.detail.encryptedData)
 }
 
  • encryptedData 包括敏感数据在内的完整用户信息的加密数据
  • iv 加密算法的初始向量

这些都是要传给后台的数据。

代码详解

部分 personal.wxml

  <view class="nick-name">
           <blcok wx:if="{{token == '' && is_fill_info == false}}">
               点击登录
           </blcok>
           <blcok wx:if="{{token  && is_fill_info == false}}">
               点击授权头像昵称
           </blcok>
           <block wx:if="{{token  && is_fill_info == true}}">
               @黔在在
           </block>
       </view>
       
<!--        手机号登录-->
       <button class="phone_number_button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:if="{{token == '' && is_fill_info == false}}"></button>

部分 personal.js

data:{
    open_id:'',
       token:'',
       is_fill_info:false,
       code:'',
       unionId:""

},
onShow(){
       let token = wx.getStorageSync('user_token');
       if(token){
           this.setData({
               token:token
           })

       } else {
           this.wxLogin()
       }

   },
    //手机回调
   getPhoneNumber(e){
   //encryptedData: 包括敏感数据在内的完整用户信息的加密数据
   //iv : 加密算法的初始向量
       if(e.detail.encryptedData){
           wx.login({
               success: res => {
                   if (res.code) {
                       this.setData({
                           code: res.code
                       }, res => {
                           this.phone(e);
                       })
                   } else {
                       wx.showModal({
                           content: " 获取code失败",
                           showCancel: false
                       })
                   }
               }
           });
       }

   },
   //传给后端去解密
   phone(e){
       wx.showLoading({
           title: '正在登录',
           mask: true
       })
       //传给后端的参数
       
       sandBox.post({
           api:'api/sir/user/wechat/login',
           data:{
               code:this.data.code,
               encryptedData: e.detail.encryptedData,
               iv: e.detail.iv,
               openId: this.data.open_id,
               unionId:this.data.unionId
           }
       }).then(res=>{
           res= res.data;
           if(res.status){
               if(res.data && res.data.access_token){
                   //将拿到的token,做一下处理,客户端跟服务端协调一致
                   let access_token = res.data.token_type + ' ' + res.data.access_token;
                   //将token存在本地
                   wx.setStorageSync('user_token', access_token);
                   this.setData({
                       token:access_token
                   })
               }
           } else {
               wx.hideLoading()
               wx.showModal({
                   content: res.message || '请求失败,请重试',
                   showCancel: false
               })
           }
           wx.hideLoading()
       }).catch(rej=>{
           wx.hideLoading()
           wx.showModal({
               content: rej.message || '请求失败,请重试',
               showCancel: false
           })
       })
   }

然后我们的页面就变成下面这个样子了。

还需要用户去授权头像昵称。

大家肯定有疑问,wx:if 是什么?别着急,在下一章节会跟大家详细讲解。

image

总结

  • button  组件
  • 授权用户手机号
  • getPhoneNumber() 回调函数

至此小程序登录的功能我们就学习完成了,所以下一章节我们讲解何为 wx.if 条件渲染跟如何拿到用户的头像昵称。