【微信小程序】（2）：登录页面

01 设计思路

1.1 小程序设计思路

1.1.1 页面设计思路

• wxml中设定两个页面，第一个页面 实现登录并获取用户信息 ，第二个页面 获取用户的手机号
• 设定值isHide，判断是否实现登录，以确定展示 登录页 还是 手机获取页
• 登录页设定值canIUse，以判断 正常显示 ，还是 提醒微信版本更新

1.1.2 js设计思路

• Page的data中，canIUse: wx.canIUse('button.open-type.getUserInfo'),，判断小程序的API，回调，参数，组件等是否在当前版本可用
• OnLoad()中使用wx.getSetting()判断是否授权，是否需要改变isHide
• 第一个页面中按键绑定函数bindGetUserInfo()，
  该函数设计思路为：
  • ①设计弹窗，不授权则提示“取消授权，将无法查看更多”
  • ②成功授权，则wx.login()获取code
  • ③wx.request()发送code给后端，后端加密，返回程序段token与是否成功状态
  • ④若状态为成功，将token通过wx.setStorage()保存到本地
    并将token，通过wx.setData()保存在 页面的data
  • ⑤由于wx.setData()是异步，当保存成功后，再获取用户信息（头像、昵称），并reques发送
• 第二个页面中按键绑定函数 getPhoneNumber()，获取encryptedData和iv，request获取解密后的手机号

1.1.3 app.js设计思路

希望首次登录的用户，跳出登录页面，之后每次登录，首页面为主页面

• 在页面的js中，完成所有登录流程后，加入语句wx.setStorageSync('isFirst', 1);，设置标志isFirst，并放入storage，本地存储
• 在app.js中，取isFirst，判断是否是已登陆，确定不同的起始页面

02 详细说明

2.1 用户登录

2.1.1 参考

• 【B站讲解视频】https://www.bilibili.com/video/BV1cK4y1t75f?p=13

• 微信官方登录流程讲解

• wx.login() 官方文档

2.1.2 关于登录流程

→ wx.login 获取 临时登录凭证code （每个code只能使用一次，5分钟有效）
→ 后台根据code，获取 用户唯一标识 OpenID 和 会话密钥 session_key

2.2.3 关于openid

说明：
每个用户对同一个小程序有相同的OpenID，对不同的小程序OpenID不同
具体可参考：https://www.jianshu.com/p/9ea1f27773b1

2.2.4 程序说明

wxml：

<button class='bottom' type='primary' bindtap="bindGetUserInfo" >
            微信登录
button>

js：

Page({
  bindGetUserInfo(){
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          console.log(res.code)
	          // wx.request({
	          //   url: 'https://test.com/onLogin',
	          //   data: {
	          //     code: res.code
	          //   }
	          // })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }
})

• 将 wx.login 官方文档 中的程序复制到js文件中
• 加入 console.log(res.code)
• 运行成功后即可获得 code
• 使用 接口测试工具 Postman 或 Advanced REST client
• 参考auth.code2Session官方文档
  通过GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
• 将上一步中 APPID SECRET 和 JSCODE 分别换成小程序的 appid和 appsecret 以及 刚刚得到的 code
• 即可得到 OpenID 和 session_key

2.2 获取用户信息

<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            微信授权登录
 button>

  var TeacherInfo = e_UserInfo.detail.userInfo;
  console.log("用户的信息如下：");
   console.log(TeacherInfo);
   // 发送用户信息         
   wx.request({
     url: 'https://api.test.com/info/',//已更改
     method:'POST',
     header:{
       'content-type':"application/x-www-form-urlencoded"//使其收到为数据形式
     },
     data: {
       api_token : that.data.LoginToken,
       teacher_name : TeacherInfo.nickName,
       teacher_logo : TeacherInfo.avatarUrl,
     },
     success(res){
       console.log(res.data)
     }
   })

• 微信通过open-type="getUserInfo" ，提出用户公开信息的授权
• js发送请求给后端，登录后，每次发送请求都应该携带登录返回的token，对每个用户进行标记，以查找对该用户进行信息的存储与调取

2.3 获取手机号

• 【微信官方】获取手机号

<button class='bottom' type='primary' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确认授权button>

 getPhoneNumber: function (e) {
   var that = this;
   console.log("手机解码")
   console.log(e.detail.encryptedData);
   console.log(e.detail.iv);  
   if (e.detail.errMsg == "getPhoneNumber:ok") {
     wx.request({
       url: 'https://api.test.com/phone/',
       data: {
         api_token : that.data.LoginToken,
         encryptedData: e.detail.encryptedData,
         iv: e.detail.iv,
       },
       method: "post",
       success: function (res) {
         console.log("手机解码结果")
         console.log(res);
         if(res.data.state==1)
         {
           wx.setStorageSync('isFirst', 1);
           wx.redirectTo({
             url:'../index/index'
         })
         }
       }
     })
       wx.redirectTo({
           url:'../index/index'
       })
    }
 }
})

• 同样是open-type="getPhoneNumber" 获取授权
• 小程序向后端发送encryptedData和iv，以及该用户的标志token，返回解密后的用户手机号

2.4 request() 发送信息

参考

• request 微信官方文档

wx.request({
  url: 'https://api.test.com/phone_get/',
  data: {
    api_token : that.data.LoginToken,
    encryptedData: e.detail.encryptedData,
    iv: e.detail.iv,
  },
  method: "post",
  header:{
     'content-type':"application/x-www-form-urlencoded"//使其收到为数据形式
  },
  success: function (res) {
    console.log("手机解码结果")
    console.log(res);
  }
})

• url为后端的接口
• data为向后端发送的信息
• method可以为post或者get等方法
• head为'content-type':"application/x-www-form-urlencoded"使其收到为数据形式，不然默认是json

2.5 登陆和获取用户信息的时序问题

• 目前一个button，完成login()和getUserInfo()
• login()中需要发送code，然后把token存入本地setStorage()和存入页面的data{}中
• 因此会涉及到时序问题，可能先 获取信息 ，之后才 完成登陆，这样发送用户信息时，就没有token，会出问题
• 因此应当token获取成功后 if(res.data.state==0){//返回成功 并且if(ticket)//当ticket已经保存，即code返回成功，再向后端发送用户（昵称、头像）信息

2.6 首次登陆显示登录页，非首次显示主页

• 参考：
  【微信官方数据存储】getStorage https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorage.html

• 在完成获取手机号返回成功后，在执行 wx.setStorageSync('isFirst', 1);

• app.js中

    //读取缓存，判断是否首次登陆
    var isFir=wx.getStorageSync('isFirst');
    // console.log("是否已登陆");
    // console.log(isFir);
    if(!isFir){
      wx.navigateTo({
        url:"pages/login/login"
      });
    }

• 注意不要else，再转到pages/index/index了，因为这样添加编译模式时，就会跳到index页面，不会跳到特定编译模式了

03 代码

3.1 login.wxml

<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='../../images/logo.png'>image>
        view>        
        <view class='content'>
            <text>您可以选择微信登录，\n 申请获得您的微信公开信息text>
        view>        
        <button class='bottom' type='primary' opentype="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            微信授权登录
        button>        
    view>

    <view wx:else>请升级微信版本view>
view>
 
<view wx:else>
    <view class='header'>
        <image src='../../images/logo.png'>image>
    view>
    <view class='content'>
        <text>申请获得你的手机号码text>
    view>
    <button class='bottom' type='primary' opentype="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确认授权button>
view>

04 一些参考

4.1 比较有用的参考：

• 【登录状态检测与登录+后端逻辑】https://www.cnblogs.com/dashucoding/p/9917371.html
• 【授权登录部分】（我的login部分参考）（ps：这个博主很多小程序教程并且都有源码）https://blog.csdn.net/weidong_y/article/details/79636386
• 【小程序获取openid和unionid等用户信息的机制解读】https://www.jianshu.com/p/9ea1f27773b1
• 【用户信息部分】https://www.jianshu.com/p/524c587f33d3
• 【手机登录部分】（我的手机获取部分参考）https://www.jianshu.com/p/3d6c3c80813f
• 【第一次进入引导页】（我的首次登陆部分参考）https://www.cnblogs.com/cisum/p/9095974.html

4.2 其他参考：

• 简书：微信小程序授权登录最佳实践
• 百度经验：微信小程序授权登录示例
• 微信官方：获取手机号
• CSDN：小程序通过用户授权获取手机号之getPhoneNumber
• CSDN：微信小程序登录授权并获取手机号