微信小程序如何登录

首先我们看一下官方文档里的说明，接下来逐一说明各个步骤

由于直接解读比较不方便，所以直接举例

首先 getUserInfo

<button class='loginButton'
          open-type="getUserInfo"
          bindgetuserinfo='login'
          withCredential='true'>
          登录
</button>

首先我们可以通过button组件的open-type属性来获取到微信的开放信息，同时会触发getuserinfo事件，可以在bindgetuserinfo回调中获取到事件信息，想要获取到用户敏感信息，必须带上withCredegntial=true

在这里我们可以获取到encrytedData和iv两个数据，注意这里的信息是加密的，想要获取到解密数据接着往下看

1. wx.login

临时登录凭证code ，并回传到开发者服务器。

wx.login({
      success: (res)=>loginMe(res.code , iv, encrypted_data)
    })

wx.login有一个成功回调，我们可以在这里获取到response.code

code:

用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 auth.code2Session，使用 code 换取 openid 和 session_key 等信息

2. wx.request

发送http请求到开发者服务器，也就是自己的服务器，这里我们使用自己封装的http请求函数来发送POST请求

loginMe(code, iv, encrypted_data){
     http.post('path', {
      code,
      iv,
      encrypted_data,
      app_id,
      app_secret,
      }
    }

需要带上code,iv,encrypted_data,还需要两个参数，app_id和app_secret，这是每个小程序的标识符，用于给后端向微信服务获取session_key和openid

3. session_key api

后端服务器获取到code，app_id和app_secret，之后，用code来获取 session_key api

4. session_key |openid

后端发出请求后，微信接口收到请求后返回相应的session_key和openid

session_key

session_key是用于解密前端通过open-type获取到的encrypted_data的，由于前端无法直接获取，所以前端发送请求，后端通过解密后获取信息返回给前端

5. 自定义登录态

因此后端应该关联session_key和openid，生成一个自己的session来用于用户登录使用

这里我们返回到loginMe，在请求回调中我们将后端返回的session存到本地，便于下一次登录使用

 wx.setStorageSync('X-token', response.header["X-token"])

6.携带登录态发起请求

const _http=(method,url,data)=>{
 let header={
   "t-app-id":t_app_id,
   "t-app-secret":t_app_secret
   
 }
 if(wx.getStorageSync('X-token')){
   header['Authorization']=`Bearer ${wx.getStorageSync('X-token')}`
 }
 return new Promise((resolve,reject)=>{
     wx.request({})
 }

在http请求函数中，如果本地session(x-token)存在，则在请求头中设置Authorization，当然这是后端决定的，后端通过此session就可以跟之前的session_key以及openid对应，决定是否返回数据