小程序自动登录实现

2024-11-28 来源：个人技术集锦

微信小程序之登录

第一步:获取登录态code
微信登录部分，首先需要使用微信小程序的api—— wx.login(OBJECT)来获取登录态
这个登录态的作用是为了获取用户的openid（用户的唯一标识）;

相关链接：

官方示例
js部分：
//调用登录

wx.login({
   success: function(res) {
   console.log(res);
    if (res.code) {
      //发起网络请求
      //doSomething
    } else {
      console.log('获取用户登录态失败！' + res.errMsg)
    }
  },
 fail: function(){
  console.log("启用wx.login函数，失败！");
 },
 complete:function(){
  console.log("已启用wx.login函数");
 }
});

第二步：将登录态code发送给第三方服务器（即自家的服务器）

官方示例
把wx.login获取到的res.code返回值，直接以参数的形式，发起网络请求发送登录态给自家服务器
js部分：

//调用登录

wx.login({
  success: function(res) {
   console.log(res);
    if (res.code) {
      //就是在这里发起网络请求，使用wx.request()，将登录态发送给自家的服务器上
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        },
        method: 'POST',  
        header: {'content-type': 'application/json'},
        success: function(data){
        }
      })
    } else {
      console.log('获取用户登录态失败！' + res.errMsg)
    }
  },
  fail: function(){
    console.log("启用wx.login函数，失败！");
  },
  complete:function(){
    console.log("已启用wx.login函数");
  }
});

第三步：客户端保存收到后台同事返回的3rd_session

将后台返回的3rd_session存入缓存中。

第四步:获取用户信息
相关连接：
接上示例:
js部分：

wx.login({
  success: function(res) {
   console.log(res);
    if (res.code) {
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        },
        method: 'POST',  
        header: {'content-type': 'application/json'},
        success: function(data){
           console.log(data)
        }
      })

    // 使用wx.getUserInfo获取用户信息
    wx.getUserInfo({
    success: function (res) {
        utils.log(res);
    },
    fail:function(){
     console.log("启用app.getUserInfo函数，失败！");
    },
    complete:function(){
     console.log("已启用app.getUserInfo函数");   
 });

第五步:登录态维护

通过上面四步，就可成功登录微信小程序了，但是还需要做登录维护。

也就是说，登录小程序后，然后又退出该小程序了。在一段时间内，再次进入该小程序，视为有效登陆，如果超出指定的时间，则视为无效登陆，需要重新登陆

全部栏目

小程序自动登录实现