微信小程序登陆流程

微信小程序登陆流程

    环境:springboot、小程序(ts) 官方实例:

真实开发时最好对wx.request这种常用的进行Promise封装

// app.ts
App<IAppOption>({
          
   
  globalData: {
          
   },
  onLaunch(): void {
          
   
    const token: string = wx.getStorageSync(token);

    // 未保存token
    if (!token) {
          
   
      wx.login({
          
   
        success ({
          
   code}): void {
          
   
          if (code) {
          
   
            console.log(code);
            wx.request({
          
   
              url: http://127.0.0.1:8080/wx/login,
              method: POST,
              data: {
          
   
                appid: wxe8a141f1bb800ff7,
                secret: ede7d29a505f77e8318fa54c0d1dd057,
                js_code: code
              },
              success({
          
   data}: any): void {
          
   
                console.log(data);
                wx.setStorage({
          
   
                  key: "token",
                  data: data.data
                })
              }
            });
          }
        }
      });
      return;
    }
  }
})
// 此处只粘贴重要代码
HttpGet get = new HttpGet(AUTH_URL + "appid=" + user.getAppid() + "&secret=" + user.getSecret() + "&js_code=" + user.getJs_code() + "&grant_type=" + user.getGrant_type()); // url拼接

get.setConfig(config); // 装配配置信息
CloseableHttpResponse res = this.httpClient.execute(get);

User retUser = null;
if (res.getStatusLine().getStatusCode() == 200) {
          
   
    retUser = new ObjectMapper().readValue(EntityUtils.toString(res.getEntity()), User.class);// json转对象
    wxMapper.insert(retUser); // 添加入数据库
}

res.close(); // 关闭返回结果
httpClient.close(); // 关闭httpClient
    流程3:后台返回给前端一个jwt生成的token
JWTUtils.getToken(claims, null); // 自己封装过的JWT工具类, 生成token扔给下程序
主要:拿到前端传过来的code、secret、appid、grant_type三个参数然后通过httpClient发送GET请求,获取到返回的json对象,将该对象保存在数据库,再用JWT将一些不隐私且常用的数据转成token并返回给小程序 注意: 请求回来的session_key和openid,先留着存在数据库,token令牌用我们自己转换的
    流程4:小程序保存token 流程5:前端请求携带token在请求头,后端通过数据库查询对比判断用户是否登陆(效率更高可以采用jwt而不用每次都查询数据库)
wx.request({
          
   
      url: http://127.0.0.1:8080/wx/findsome,
      header: {
          
   
        Authentication: wx.getStorageSync(token)
      },
      success({
          
   data}: any): void {
          
   
        console.log(data);
      }
})

实操图片

    默认app-onLaunch即登陆
    保存token
    点击查询 -> 获取数据

代码地址

流程

经验分享 程序员 微信小程序 职场和发展