微信小程序登录流程

发布于:2024-04-05 ⋅ 阅读:(152) ⋅ 点赞:(0)

1. 用户触发登录操作

用户在小程序内部点击登录按钮或进行需要登录权限的操作,触发登录流程。

2. 获取临时登录凭证

当用户点击登录按钮后,小程序调用 wx.login() 获取 code

// 小程序页面中的登录按钮点击事件处理函数  
login: function() {  
  wx.login({  
    success: function(res) {  
      if (res.code) {  
		console.log(res.code); // 获取到code
      } else {  
        console.log('登录失败!' + res.errMsg);  
      }  
    }  
  });  
}

3. 发送登录凭证到服务器

将获取到的code发送至开发者的后台服务器。这个步骤通常是通过HTTP请求完成的,可能还包含其他必要的参数,如小程序的AppID等。

4. 后端使用 code 获取 session_key 和 openid

后端服务器接收到 code 后,使用自己的 appidappsecret,结合 code,请求微信服务器换取 session_key(本次登录的会话密钥) 和 openid

5. 后端保存 session_key 和 openid 返回token

后端服务器保存 session_key 和 openid,并可以生成自定义的登录态 token 给小程序

6. 前端保存登录态

前端接收到登录态 token后,保存到本地,以便后续的请求中携带(需要携带token进行身份验证)。


// 小程序页面中的登录按钮点击事件处理函数  
login: function() {  
  wx.login({  
    success: function(res) {  
      if (res.code) {  
        // 发送 res.code 到后台换取 openId, sessionKey, unionId  
        wx.request({  
          url: 'https://xxxxxx/api/login', // 你的服务器地址  
          data: {  
            code: res.code,
            AppID:'xxxxxxxxx'  
          },  
          method: 'POST',  
          success: function(response) {  
          	// 服务器接收 code 并请求微信接口获取 session_key 和 openid,返回登录态 token 给小程序
            // 登录成功,保存登录态 token 到 storage,并在后续的请求中携带这个token,以便服务器验证用户的身份。
            wx.setStorageSync('token', response.data.token);  
            // 跳转到其他页面或执行其他操作  
          },  
          fail: function(error) {  
            // 登录失败处理  
            console.error('Login failed:', error);  
          }  
        });  
      } else {  
        console.log('登录失败!' + res.errMsg);  
      }  
    }  
  });  
}