【小程序】前端微信授权登录

一、写在前面

这里讲讲怎么实现微信授权登录，以及可能踩的坑。

首先已经拿到了后端的登录注册接口。

二、实现逻辑 

小程序登录流程时序

我们的前端逻辑是，先调登录接口，如果报错，证明该用户没有注册过，然后调注册接口。完成登录。登录的接口需要我们穿过去已经获取的token。

 1、登录

wx.login

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

 将获取的code,传给登录接口，开发者服务器凭此去验证该code，有没有登录成功。若成功，则返回token。若该用户没有授权注册过，则返回错误“登录失败”。此时，我们需要进行注册。

2、注册®️接口

post 方法传三个参数，encryptedData ｜ iv | code

 

 code已在上面说过，iv和encryptedData如下表解释

iv	String	加密算法的初始向量，详细见加密数据解密算法
encryptedData	String	经过加密的activityId，解密后可得到原始的activityId。若解密后得到的activityId可以与开发者后台的活动id对应上则验证通过，否则表明valid字段不可靠（被篡改） 详细见加密数据解密算法

一开始去调用了wx.getUserInfo 来获取这两个参数，但调用接口时，就在报错。报错的具体原因还不明，（是不是因为没有登录，这个获取的东西不对？）如果有知道的拜托指点下～～但是直接用绑定事件的参数e，打印出来看见了我们需要传的内容。

三、代码

index.wxml 

 <div class="info-name" bindtap="bindPhone">
    <button class="weui-btn mini-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" type="primary" size="mini">{{textLogin}}</button>
</div>

index.js 

    getPhoneNumber(e){
      console.log(e)
      api.getWxToken((token)=>{ //这个api调的wx.login 看上面
        api.login(token,(res)=>{ //调登录接口
          if(res.code == 0){
            this.setData({
              textLogin: '已登录'
            })
          }
          else{
            api.bindAndRegister({  //未登录，调注册接口
              encryptedData:e.detail.encryptedData,
              iv:e.detail.iv
            },res,(result)=>{
              wx.showToast({
                title: '绑定成功！',
              })
              this.setData({
                textLogin: '已登录'
              })
            },(err)=>{
              wx.showModal({
                title: '提示',
                showCancel:false,
                content: err.message,
                confirmText:"我知道了",
              })            
            })
          }
        })
      })
    },