微信小程序登陆篇

1. 登录流程图
微信小程序登陆篇_第1张图片

  • 小程序端通过wx.login()获取到code后发送给后台服务器
  • 后台服务器使用小程序的appid、appsecret和code,调用微信接口服务换取session_key和openid(openid可以理解为是每个用户在该小程序的唯一识别号)
  • 后台服务器自定义生成一个3rd_session,用作openid和session_key的key值,后者作为value值,保存一份在后台服务器或者redis或者mysql,同时向小程序端传递3rd_session
    小程序端收到3rd_session后将其保存到本地缓存,如wx.setStorageSync(KEY,DATA)
  • 后续小程序端发送请求至后台服务器时均携带3rd_session,可将其放在header头部或者body里
  • 后台服务器以3rd_session为key,在保证3rd_session未过期的情况下读取出value值(即openid和session_key的组合值),通过openid判断是哪个用户发送的请求,再和发送过来的body值做对比(如有),无误后调用后台逻辑处理
  • 返回业务数据至小程序端

注:
- openid为小程序用户唯一标识,需存入数据库
- 在微信小程序开发中,由wx.request()发起的每次请求对于服务端来说都是不同的一次会话。啥意思呢?就是说区别于浏览器,小程序每一次请求都相当于用不同的浏览器发的。即不同的请求之间的sessionId不一样(实际上小程序cookie没有携带sessionId)
- 前后端分离开发一般使用token做自定义登录态

2.微信小程序获取用户信息

自从微信接口有了新的调整之后 这个wx.getUserInfo()便不再出现授权弹窗了,需要使用button做引导~

  • wxml如下:
<!--wxml-->
 
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>
  • js如下:
//js
Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }
})

你可能感兴趣的:(小程序)