小程序的登录流程

登录流程

1. 三个角色:

  • 小程序端

  • 微信自己的服务器

  • 公司的服务器

2. openid
openid:每一个微信用户的唯一标识
openid一般不保存在客户端,一般保存在服务器端。
我们自己的服务器会和微信的服务器进行通信。到时候微信的服务器就会返回一个session_key和openid,到时候我们的服务器会把这个openid存到数据库中。

3. 登录的过程:

  1. 我们的小程序端先调用接口 wx.login(),向微信的服务器发送请求,获取到一个code,这个code在我们的客户端是没有用的。
    1.1 这个code的作用是发送到我们自己的服务器
    1.2 微信小程序端通过调用wx.request()将code发送到我们的服务器
    1.3 服务器拿到code和appid(一开始申请到的)和appsecret
    1.4 appsecret是怎么获取的:在小程序控制台,和appid在一个地方,可以重置。

  2. 我们的服务器与微信的服务器进行一次沟通,将code+appid+appsecret这三个东西传递给微信的服务器,

  3. 微信的服务器会返回session_key和openid。服务器就拿到了openid,不会传给客户端,而是将openid存到服务器。
    3.1 有时候,公司希望不仅能用微信登录,还可以用用户名+密码登录小程序。
    3.2 一般用账号+密码登录的时候,会在第一步,先让用户输入用户和密码,服务器验证通过以后,再将账号+密码+code发送给微信的服务器,换取openid;之后将openid+账号+密码存储在数据库的某个表中(t_user)。

  4. 服务器端验证通过之后,会向客户端返回一个token,登录状态。客户端会把token保存起来。小程序中有个storage,一般将token保存在storage中。

  5. 下次再打开小程序的时候,就可以先从缓存中拿出token来,发送给服务器,验证一下是否过期,不用每次打开都登录一下了。如果过期了再登录,没过期的话就直接使用这个。

  6. 以后客户端向服务器发送请求(请求需要在登录的状态下才会返回结果时),会携带token。服务器会根据token查询openid或者session_key和其他数据。然后将数据返回给客户端。

4. 简化后的流程:

  1. 调用wx.login获取code

  2. 调用wx.request发送code到我们自己的服务器(我们自己的服务器会返回一个登录状态的标识,比如token)

  3. 将登录状态的标识token进行存储,以便下次使用

  4. 请求需要登录状态的接口时,带上这个token。

5. 官方图解

小程序登录流程官方图


官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

代码演练

接口:

  • 登录接口

  • token是否过期的接口

登录接口:

接口:/login
method:post
参数:code (如果想要账号和密码登录的话,传递code+账号+密码)
返回:token

token是否过期的接口:

接口:/auth
method:post
参数:header,token,将token放在header中传递过去
返回值:
错误码:
1001:没有传入token
1002:传入错误的token
1003:token过期。

一般情况下,登录在app.js中做,不用等到进入某个页面再做。

wx.setStorage与wx.setStorageSync的区别:

  • wx.setStorage是异步的

  • wx.setStorageSync是同步的

小程序登录的流程代码大体如下:

// 注册小程序的示例const TOKEN = "token"; // 规范写法,写成常量,也可以抽取出来到一个常量文件中。App({
  // 全局对象,一旦小程序关闭掉,会被回收
  globalData: {
    token: "", //token
  },

  // 小程序初始化完成时,加载完,一般在这里进行登录操作
  onLaunch: function(options) {
    // 3. 做登录操作
    // 3.1 先在缓存中取出token,如果有,就验证;没有再登录。
    const token = wx.getStorageSync(TOKEN);
    // 3.2 判断token是否有值,并且判断长度>0
    if (token && token.length > 0) { // 已经有token,需要验证是否过期
      console.log("执行了验证token操作");
      // 验证token是否过期
      this.checkToken(token);
    } else {  // 还没有token,所以得先登录
      this.login(); // 登录一下
    }
  },
  
  // 登录的代码
  login() {
    console.log("执行了登录操作");
    wx.login({
      success: (res) => {
        console.log(res.code); // code只有5分钟的有效期
        // 1. 获取code
        const code = res.code;
        // 2. 将code发送给自己的服务器
        wx.request({
          url: 'http://123.207.32.32:3000/login', // 调用了别人的接口
          method: "post",
          data: {
            code,
          },
          success: (res) => {
            console.log(res); // 服务器会返回一个token
            // token的作用:在首页,关于啥的页面,都携带token才能查看某些内容
            // 拿到token,很多地方都要用,所以最好保存到全局中。
            // 3. 保存到全局
            const token = res.data.token;
            this.globalData.token = token; // 为了this有效,要都写成箭头函数的形式
            console.log(this.globalData.token);
            // 4. token进行本地存储(同步的)
            wx.setStorageSync(TOKEN, token);
          },
          fail: function(error) {
            console.log(error);
          }
        })
      }
    })
  },
  
  // 验证token是否过期
  checkToken(token){
    wx.request({
      url: 'http://123.207.32.32:3000/auth',
      method: "post",
      header: {
        token,
      },
      success: (res) => {
        if(!res.data.errCode){  // token有效
          this.globalData.token = token;
        }else{  // token无效,得重新登录
          this.login(); 
        }
      },
      fail: (error) => {
        console.log(error);
      }
    })
  }})




作者:椰果粒
链接:https://www.jianshu.com/p/afb2451b147e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。