微信小程序——浅谈微信授权登录

一、开发前的准备

现在的小程序要求很严，否则无法通过正常的审核和发布流程。
今天特意做了微信授权登录。
在这里插入图片描述
做流程开发前，需要先阅读微信小程序开发文档。

在这里插入图片描述
正常流程，只需要关注前面的授权操作流程即可。

二、接口解释

由于公司要求使用手机账号+密码的方式实现登录操作流程；这次需要根据微信账号获取绑定的手机号，实现微信授权登录。

wx.login()；
调用接口获取登录凭证（code）。
通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。
用户数据的加解密通讯需要依赖会话密钥完成。

简而言之，wx.login() 接口涉及到与微信账号绑定的手机号的解密信息的获取。

获取当前的微信绑定的手机号信息
现在的微信授权中，未开放获取手机号信息的接口，但是在“表单组件”中，却有一个button的open-type

三、实际开发

3.1wx.login()的使用

使用这个API前需要注意寄点：

wx.login()和 < button open-type=“getPhoneNumber” bindgetphonenumber=“getPhoneNumber” >< /button > 的关系很密切！
当你自己的服务器使用code请求了微信服务器后，随机code会失效！

所以，我们需要优先在onload中进行code的获取！

Page({
  data: {
    phone: '',
    password: '',
    logincode: "",//wx.login()获取到的code信息(在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //console.log("---->"+apps.d.host1);
    //页面加载 首先判断本地是否存有用户信息    如果有 直接跳转至首页
    var localToken = wx.getStorageSync("accessToken");
    console.log("登陆页面获取token信息为：" + localToken);
    var that = this;
    if (localToken){
      console.log("token存在  直接进行登陆操作");
      //跳转至tabBar页面  关闭所有非tabBar页面
      wx.switchTab({
        url: '../main/tools/tools'
      }); 
    }else{
      //不存在token时，此时需要进行登陆操作；
      //在不考虑用户是普通登陆还是微信登陆方式的前提下，都需要优先获取code
      wx.login({
        success(res) {
          console.log(JSON.stringify(res));
          //不管此时获取的code是否有效都进行保存---如果无效，会在checkSession的fail回执中修改
          that.setData({
            logincode: res.code
          })
          //获取后还需要校验是否有效的
          wx.checkSession({
            success(res) {
              //session_key 未过期，并且在本生命周期一直有效
              console.log("success--->"+JSON.stringify(res));
            },
            fail(res) {
              // session_key 已经失效，需要重新执行登录流程
              console.log("fail-->"+JSON.stringify(res));
              //重新登录
              wx.login({
                success(res) {
                  console.log(JSON.stringify(res));
                  that.setData({
                    logincode: res.code
                  })
                }
              }) 
            }
          })
        }
      })
    }
  },
 ...... 此处省略其他信息......
 })

其实，这里的wx.checkSession()并不是特别需要，虽然文档对其做了说明，但是我们每次刷新一次新的也可以使用！

3.2微信授权登录布局

<!-- 其他登陆方式 -->
  <!-- <view class="otherloginpre"></view> -->
  <view class="line"></view>
  <view class="otherlogin">
  <!-- plain 背景镂空 -->
    <button class="wxloginbtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"  >
      <image class="wxloginimg" src="/images/login/wxlogin3.png" style="width:60px;height:60px;" mode="scaleToFill"></image>
    </button>
  </view>
  </view>

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 1px;
}
/** 其他登陆方式 **/
.otherloginpre{
  width: 100%;
  height: 0.5px;
  border: 1px solid #ccc;
  background-color: #ccc;
  margin-top: 5px;
}
.otherlogin {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}
.wxloginbtn{
  /* 背景色随父类 */
  background-color: inherit;
  background-repeat: no-repeat;
  /* 去除button边框 */
  border: none;
}
.wxloginbtn::after{
  border: none;
}
.wxloginimg{
  border: none;
  /* 把元素的顶端与行中最低的元素的顶端对齐 */
  vertical-align: bottom;
  /* border: 0px solid #fff ; */
}

getPhoneNumber:function(e){
    console.log("getPhoneNumber--"+JSON.stringify(e));
    //获取到加密信息、偏移量，只有这些数据存在时，才请求服务器(弹窗点拒绝后，无这些信息)
    var ivs = e.detail.iv;
    var encryptedDatas = e.detail.encryptedData;
    var that = this;
}

当点击微信图标后，获取到如下的加密数据信息：
在这里插入图片描述

code 、 encryptedData 、 iv 这三个参数需要传递至服务器中，交由服务器再去请求微信服务器解密出当前使用的手机号信息。

四、注意点

每当请求一次服务器后，如果不刷新 wx.login()，则会出现报错信息。

wx.login() 获取的code是一次性的！

所以需要在每次请求后，刷新一次wx.login()；虽然很难出现登录超时的情况，但还是需要做完善的考虑。